🌍 Overview
This guide will cover tracking on two types of legacy booking tools:
Standard widgets
Enterprise widgets
The steps to follow will depend on which widget you use.
Please note: The guide below explores tracking bookings with GA4 and Google Tag manager on our legacy widgets.
To access the guide on tracking the new widget 2.0 instead, click on the below button:
#1 Standard widget example
You use our standard widgets if your booking tools look something like this:
#2 Enterprise widget example
You use our enterprise widgets if your booking tools look something like this:
Once you are clear what widget you are using, please direct yourself to our standard widget or enterprise widget tracking guides below.
⚙️ Standard Widget Tracking Guide
Step 1:
Use Google Tag Manager to create a tag that adds this custom HTML on all pages on the website:
<script>
var receiveMessage = function(event){
var data = event.data;
var eventName = data.substring(0,data.indexOf('.'));
var booking = data.substring(data.indexOf('.')+1);
if(eventName === 'appointeddBookingConfirmed'){
try{
var bookingObject = JSON.parse(booking);
var email = bookingObject.customer.profile.email;
window.dataLayer.push(JSON.parse(booking));
dataLayer.push({'event': eventName});
}
catch(err){
console.warn('Failed getting JSON from event ' + eventName, err);
console.warn(booking);
}
}
};
window.addEventListener("message", receiveMessage, false);
</script>
Step 2:
Then create a custom trigger in Google Tag Manager
Step 3:
And then create the conversion tag using that trigger.
Step 4:
Submit the changes in Google Tag Manager and push live.
⚒️ Enterprise Widget Tracking Guide
Step 1:
Use Google Tag Manager to create a tag that adds this custom HTML on all pages on the website:
<script>
appointeddWidget.on('booking_created', function(data){
dataLayer.push({'event': 'enterpriseBooking'});
dataLayer.push({'widgetBooking': data});
});
</script>
Step 2:
Then create a custom trigger in Google Tag Manager
Step 3:
And then create the conversion tag using that trigger.
Step 4:
Submit the changes in Google Tag Manager and push live.
Additional Point - find your unique GA4 measurement ID:
If you haven't already set up your GA4 configuration tag to begin collecting data in GA4 here are instructions on how to do this. You will need to do this first before setting up the tracking of your booking widgets, otherwise you wont see this data in your GA4 account.
Summary
Create two custom HTML tags:
One for each widget tracking snippet, firing on all pages on your website.
Create two triggers for your custom events
One for the standard widget and one for the enterprise widget
Create the GA4 tags and use the newly created triggers to track conversions in Google Analytics.
One for standard widget and one for the enterprise widget
Instructions to find your unique GA4 measurement ID above
keywords: GA, GA4, Google Analytics, listening, tracking
If you have any feedback we would love to hear it 👂