🌎 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. For embedded mode tracking, different requirements apply, which are partially covered in this guide.

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. Some information about embedded mode tracking is now available in this guide.

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.

Best Practices for Monitoring Booking Data

Centralize Tracking: Use Appointedd as the primary source of truth for booking data, especially for social media integrations.
Test Regularly: Always test your tracking setup in GTM Preview Mode or through test bookings to ensure accuracy.
Stay Updated: Keep your Widget 2.0 script and GTM configurations up to date to avoid tracking issues. By following these guidelines, you can effectively track bookings across platforms and gain valuable insights into your customer interactions.

Tracking Bookings via Social Media Platforms

When using Facebook or Instagram ads (e.g., lead generation campaigns), bookings are tracked within Appointedd. Here’s what you need to know:

Integration Purpose: Facebook and Instagram allow customers to make bookings directly through their social apps.
Tracking Location: Booking counts and performance metrics are monitored in the Appointedd dashboard, not in Facebook Ads Manager. This setup ensures that all booking data is centralized in Appointedd, providing a clear view of your booking performance.

If you have any feedback we would love to hear it 👂

Submit feedback

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

Tracking events from your Appointedd booking tools with GA4 using Google Tag Manager