All Collections
Troubleshooting guides
How to track bookings with Google Analytics 4 and Google Tag Manager
How to track bookings with Google Analytics 4 and Google Tag Manager
Follow our step by step guide so you can start to gather data on where your customers have clicked from.
Madeline avatar
Written by Madeline
Updated over a week ago

We offer two types of booking tools:

  1. Standard widgets

  2. Enterprise widgets

Depending on the widget you use, depends on which steps to follow.

#1 Standard widgets

You use our standard widgets if your booking tools look something like this:

#2 Enterprise widgets

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);

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.


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


Did this answer your question?