This article shows you how to use Demodesk booking page to gain insightful information or have specific actions, once you have embedded it on your website. It is meant for source and conversion tracking in your marketing tool or CRM (for HubSpot only). If you are looking for source and conversion tracking for your CRM and you are a Pipedrive or Salesforce user please refer to this article. Please note that this article applies to routing forums as well.
🪛👩💻 Please note: This article is technical, but it is worth reviewing the use cases to determine their potential benefit for you. If you decide to implement any of these features, you may need the assistance of a web developer.
The following are some source and conversion use cases that can be achieved using Demodesk booking pages:
Conversion tracking of bookings via Google Analytics or HubSpot
Hide or show content after the booking process
Redirect to a different page after the booking process
React to actions that are triggered by the booking page
This article is divided into the following sections:
Embed a booking page
The first step is to embed a booking page to your website. You can embed the booking page as an iframe by, for example, using the Demodesk embed snippet as detailed in this article. In doing so, to enable source and conversion tracking, you should ensure that the information transmitted from the Demodesk iframe to your website is received (listened to), enabling you to monitor the specific information you require.
As a developer, you can subscribe to these events to fire analytic tracking events or customize your own website/app. This is done via window.postMessage() which means you can receive these events in the following two situations:
Receive events when embedding a booking page as an iframe
Receive events when embedding a booking page as an iframe
You do not need to perform any additional setup. Just use our embed snippet or create an <iframe> yourself (not encouraged) and create an event listener as shown in the example here.
Receive events when opening the booking page in a new tab
Receive events when opening the booking page in a new tab
Because of browser constraints, this approach is more tricky. Most browsers automatically set rel=noopener when clicking href elements that also have target="_blank". This prevents the booking page from accessing the window object of the opening page (which is required to send events to the opener). However, one can use JavaScript to open the booking page like the following:
<script>
function openDemodeskBookingPage() {
window.open(
'https://demodesk.com/book/<your-event-type-slug>',
'DemodeskBookingPage',
'noopener=false' // this should do the trick
);
}
</script>
<button onclick="openDemodeskBookingPage()">Book a demo</button>
Listening to events from the booking page
Listening to events from the booking page
This section explains the process of creating an event listener. Existing JavaScript events include:
demodesk.timeSlotSelected(Event name): The user selected a time and is forwarded to the booking form (Event description)demodesk.meetingScheduled(Event name): A demo was successfully booked
All emitted JavaScript events have the following structure: { event: 'demodesk.XXX', data: {...} }. An example of an emitted event is as follows:
{
"event": "demodesk.meetingScheduled",
"data": {
"meetingDate": "2022-06-15T07:00:00.000Z",
"eventTypeSlug": "discovery",
"hostEmail": "host@company.com",
"isReschedule": false,
"form": {
"guests": [],
"customer_email": "test@example.com",
"customer_first_name": "dieter",
"customer_last_name": "demo",
"customer_company_name": "dieter company",
"customer_phone": ""
}
}
}
The following example listens to the custom events and logs the payload to the console output:
window.addEventListener(
'message',
function(e) {
if (isDemodeskEvent(e)) {
console.log('Event name', e.data.event);
console.log('Event payload', e.data.data);
}
}
);
function isDemodeskEvent(e) {
return e.data.event && e.data.event.indexOf('demodesk') === 0;
};
Create Google Tag Manager Trigger
Create Google Tag Manager Trigger
Please refer to this article if you would like to set up conversion tracking with Google Tag Manager.
HubSpot - Merge web analytics data with Contact
HubSpot - Merge web analytics data with Contact
Demodesk will create a Contact in HubSpot when a guest books a meeting via the booking page. To merge this Contact with the web analytics information that was already available for the anonymous page visitor, you can send an identify event to HubSpot. This will link all the web analytics information like source, campaign, page visits etc. to the new Contact, as shown below:
window.addEventListener(
'message',
function (e) {
if (isDemodeskMeetingScheduledEvent(e)) {
hubspotIdentify(e.data.data.form.customer_email);
}
}
);
function hubspotIdentify(email) {
var _hsq = window._hsq = window._hsq || [];
_hsq.push(['identify', {email: email}]);
_hsq.push(['trackPageView']); // You have to either call a trackPageView or a custom event (trackCustomBehavioralEvent) to actually send the identification information to hubspot
}
function isDemodeskMeetingScheduledEvent(e) {
return e.data.event && e.data.event === 'demodesk.meetingScheduled';
}
❗Please note: You have to issue either a trackPageView or trackCustomBehavioralEvent event after the identify event so the HubSpot SDK actually sends the identification information to HubSpot.