Tracking Appointment Bookings

This guide explains how to send the appointment_booked event from an Appointible-hosted booking website (embedded as an iFrame) to Google Tag Manager using dataLayer.push().

Before starting

Important: This setup only works when the Appointible booking website is embedded as an iFrame on a website, not when opened directly on the Appointible public link.

I recommend checking two things first:

Google Tag Manager (GTM) is correctly installed on the website where the booking iFrame is embedded.
The Appointible booking website is enabled in Setup and embedded from the official Appointible public link.

Step 1: Embed the booking website

First, make sure the Appointible booking website is embedded as an iFrame on the website.

The iFrame URL should point to the Appointible booking website, for example:

<iframe src="https://appointible.com/<business-slug>" width="100%" height="800" frameborder="0"></iframe>

Step 2: Load Google Tag Manager

On the same page where the iFrame is embedded, make sure the standard GTM container code is installed. This is the usual GTM snippet provided in the Google Tag Manager account.

If GTM is not installed yet, add the container code to the website template or page builder before continuing. Without GTM loaded, the dataLayer.push() call will not be picked up.

Step 3: Listen for the event

Next, add a small JavaScript snippet on the same page as the iFrame. This script listens for messages from the Appointible booking website and pushes the appointment_booked event into the GTM dataLayer.

<script>
window.addEventListener('message', function(event) {
  // Make sure the event comes from the Appointible booking website
  if (event.origin !== 'https://appointible.com') {
    return false;
  }  // The 'appointment_booked' event arrives after a new appointment is booked
  if (event.data && event.data.type === 'appointment_booked') {
    window.dataLayer = window.dataLayer || [];    window.dataLayer.push({
      event: event.data.type,
      value: event.data.payload.totalAmount,   // optional
      currency: event.data.payload.currency,   // optional
      shortPublicId: event.data.payload.shortPublicId, // optional
      startDateTimeUtc: event.data.payload.startDateTimeUtc, // optional
      durationInSeconds: event.data.payload.durationInSeconds, // optional
      clientEmail: event.data.payload.clientEmail, // optional
      locationId: event.data.payload.location && event.data.payload.location.id, // optional
      locationName: event.data.payload.location && event.data.payload.location.publicName, // optional
      status: event.data.payload.status // should be "Booked"
      // ...and any other fields that are useful to track for the business
    });
  }
});
</script>

Step 4: Create a GTM trigger

After the event is pushed into the dataLayer, configure a trigger in Google Tag Manager to react to it.

Open Google Tag Manager and select the GTM container used on the website.
Go to Triggers and click New.
Choose Trigger type as Custom Event.
Set Event name to appointment_booked.
Set This trigger fires on to All Custom Events (or add conditions if needed).
Save the trigger.

Step 5: Attach tags to the event

With the trigger ready, connect it to the analytics or marketing tags that should fire when an appointment is booked.

In GTM, go to Tags and click New.
Choose the tag type, for example Google Analytics 4 event or a conversion tag for an ad platform.
Set the event name in the tag configuration (for example, appointment_booked or a custom name used in the analytics setup).
Under Triggering, select the appointment_booked custom event trigger created earlier.
Save the tag and publish the GTM container.

Event payload details

For reference, this is the full structure of the event object sent from the Appointible booking website after a new appointment is booked:

{
  type: "appointment_booked",
  payload: {
    currency: string,
    totalAmount: number,
    shortPublicId: string,
    startDateTimeUtc: string,
    durationInSeconds: number,
    clientEmail: string,
    location: {
      id: long,
      slug: string,
      publicName: string,
      timezoneId: string
    },
    status: 'Booked'
  }
}

Any of these fields can be mapped in GTM as dataLayer variables and used in tags or triggers. For example, total revenue per booking, location-based conversions, or appointment duration can all be tracked without needing extra code. A bit like getting the deluxe analytics package without extra assembly.

Tracking Appointment Bookings With GTM