🌎 Overview
Implementing GA4 tracking via Google Tag Manager on your booking tools allows you to efficiently monitor user engagement and gain valuable insights into customer behavior. By setting up GA4 tracking, you can capture data on interactions, such as when a customer engages with the booking widget or when they confirm a booking.
This guide will walk you through the step-by-step process of setting up GA4 tracking via Google Tag Manager on widget 2.0 in the popover mode only.
If you're using our legacy booking tools, such as Standard or Enterprise widget, you may wish to explore this guide instead.
Please note: This guide will help you set up tracking on the widget 2.0 in the popover mode only. We'll soon release a guide for widget 2.0 in the embed mode, too.
1. First, identify what you want to track
There are up to 5 events you can listen for when tracking the widget's behavior. These events will send various booking-related data, such as organisation, service, resource, booking questions, date, timezone, and more.
Event | Description |
READY | Fires when the widget has fully loaded and is ready for interaction. |
CLOSE_APPOINTEDD_POPOVER | Fires when the user closes the booking popover. This is only applicable to widgets embedded in popover mode. |
USER_ENGAGED | Fires the first time a user clicks inside of the widget. |
LOCATION_SEARCHED | Fires when a user searches for a location. |
BOOKING_CREATED | Fires when a visitor has successfully made a booking using the widget. |
Check the below to see example payload data for each event:
READY
{
"data": {
"iFrameId": "appointedd-widget-iFrame-66e40f99b6e581daf5894740-1"
},
"name": "READY"
}
CLOSE_APPOINTEDD_POPOVER
{
"data": {
"iFrameId": "appointedd-widget-iFrame-66e40f99b6e581daf5894740-1"
},
"name": "CLOSE_APPOINTEDD_POPOVER"
}
USER_ENGAGED
{
"data": {
"iFrameId": "appointedd-widget-iFrame-66e40f99b6e581daf5894740-1"
},
"name": "USER_ENGAGED"
}
LOCATION_SEARCHED
{
"data": {
"iFrameId": "appointedd-widget-iFrame-66e40f99b6e581daf5894740-1",
"location": "EH1 2JY"
},
"name": "LOCATION_SEARCHED"
}
BOOKING_CREATED
{
"data": {
"booking": {
"customer": {
"email": "example@appointedd.com",
"firstName": "John",
"lastName": "Doe",
"marketingOptIn": false,
"phone": "",
"crmFieldData": {
"Random date": "2023-06-14"
}
},
"end_time": "2024-09-15T09:00:00.000Z",
"id": "66e418b461ccf157b2549eb3",
"organisation_id": "66e418b461ccf157b2549eb3",
"organisation_name": "Example organisation name",
"service_id": "66e418c5628775f3ba0f7a25",
"service_name": "Example service name",
"spaces": 1,
"start_time": "2024-09-15T08:00:00.000Z",
"timezone": "Europe/London"
},
"iFrameId": "appointedd-widget-iFrame-66e40f99b6e581daf5894740-1"
},
"name": "BOOKING_CREATED"
}
2. Fire the events
First, make sure the widget is correctly embedded on your website. There are two ways to embed the widget; embed mode and popover mode. You can read more about them here. However, this guide only covers widgets in the popover mode (a guide for widgets in embed mode will be released soon, too).
💡 Make sure to use the full popover code, as this includes the software development kit (SDK) that is essential for emitting the events you will be listening for.
Next, in Google Tag Manager (GTM), create a custom HTML tag that listens for widget events and pushes relevant data to the data layer.
Steps to create a custom HTML tag in GTM:
Log in to Google Tag Manager and navigate to your workspace.
Click on Tags in the left-hand menu.
Click New to create a new tag.
Name your tag (e.g. Appointedd event listener)
Under Tag Configuration, select Custom HTML as the tag type.
In the HTML code editor, insert the script below, adjusting it according to which events you want to track:
Example 1: Listening for a single event (“BOOKING_CREATED”)
In this example, we listen for the BOOKING_CREATED event. When the event is triggered, we push it to the data layer along with the service booked.
<script>
Appointedd.popovers.on("BOOKING_CREATED", function() {
try {
window.dataLayer.push({
event: "BOOKING_CREATED",
});
} catch (err) {
console.error(err);
}
});
</script>
Example 2: Listening for multiple events (“USER_ENGAGED” and “BOOKING_CREATED”) and pushing information to the Data Layer
Here, we listen for both LOCATION_SEARCHED and BOOKING_CREATED events and push some data from the payload to the data layer.
<script>
Appointedd.popovers.on("BOOKING_CREATED", function(event) {
try {
window.dataLayer.push({
event: "BOOKING_CREATED",
organisation_name: event.data.organisation_name,
service_name: event.data.service_name
});
} catch (err) {
console.error(err);
}
});
Appointedd.popovers.on("LOCATION_SEARCHED", function(event) {
try {
window.dataLayer.push({
event: "LOCATION_SEARCHED",
location: event.data.location
});
} catch (err) {
console.error(err);
}
});
Appointedd.popovers.on("USER_ENGAGED", function() {
try {
window.dataLayer.push({
event: "USER_ENGAGED",
});
} catch (err) {
console.error(err);
}
});
</script>
7. Click on Triggering and select All pages.
8. Click Save.
3. Create a custom trigger in Google Tag Manager
Next, you need to create a custom trigger that listens for the event names in the data layer.
Go to Triggers in GTM.
Click New and name your trigger (e.g. “Appointedd BOOKING_CREATED”)
Choose Custom Event as the trigger type.
In the Event Name field, enter the event name you pushed to the data layer (e.g.,
BOOKING_CREATED).Under This trigger fires on select All Custom Events, unless you would like to trigger the event on specific pages. If so, select Some Custom Events and set any additional conditions
Click Save.
4. Finally, create a GA4 tag to track events
Now, set up a tag in GTM to send the events to Google Analytics 4 (GA4).
Go to Tags in GTM.
Click New and name your tag (e.g. ”GA4 - Appointedd BOOKING_CREATED - tag”)
Click on Tag Configuration, select Google Analytics, and then select Google Analytics: GA4 Event
Enter your Measurement ID and in the Event Name field, enter the event name from the data layer (e.g.
BOOKING_CREATED)Add any custom parameters you’d like to track (e.g., service name, booking date, etc.).
Select Triggering, and then select the custom trigger you created in Step 3 of the Create a custom trigger in Google Tag Manager instructions above.
Save the tag.
5. Test your tags are working
Next, access Google Tag Managers Tag Assistant tool to test if the tags and triggers you have set are working properly before pushing it live to your website. To do this following the steps below.
Select Preview
In the Connect Tag Assistant to your site box, select the URL on your website that has your Appointedd booking widget on it and then click Connect
This will open up the page you have entered in a separate tab. Here find your Appointedd booking widget on this page and complete a test booking
Go back to Google Tag Assistant and check if the tags you have created are under Tags Fired.
A. If the tags have fired correctly, jump straight to section 6 to publish the tags to your website.
B. If one or more of the tags have not fired correctly and appear under Tags Not Fired this means one or more of the instructions above have not been implemented correctly. Go back through the steps again and fix any issues or missing steps. If you are still struggling to get the tags to fire contact Appointedd’s customer support team - support@appointedd.com.
6. Publish the tags to your website
Finally, submit the tags to your live website in order to be able to track your Appointedd events in Google Analytics 4.
When your tags are firing correctly, go back to your Google Tag Manager workspace
Click Submit
Create a name and description for your tag submission
Click Publish. This will push the tags to your live website.
If you have any feedback we would love to hear it 👂
Keywords: Google Analytics, GA, GA4, Google tag manager, tracking.