🌎 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, setup the required tracking code and decide on what events you want to track

Refer to our guide on Tracking events from your Appointedd booking tools on your website with JavaScript and follow those steps to setup the required event listeners for the events you want to track.

You can also inject the above code in Google Tag Manager instead of placing it directly on your website manually by following these steps:

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 required script, adjusting it according to which events you want to track
Click on Triggering and select All pages.
Click Save

2. Forward events to GA4 data layer in your event listeners

In each of your event listeners, forward the event (and any required additional data) using the Google Tag Manager dataLayer object.

// Or bookingTool.on(...) if you're using embedded mode.
window.Appointedd.popovers.on("READY", function() {
  try {
    window.dataLayer.push({
      event: "READY",
    });
  } catch (err) {
    console.error(err);
  }
});

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 👂

Submit feedback

Keywords: Google Analytics, GA, GA4, Google tag manager, tracking.