How to push the appointment_booked event to Google Tag Manager

Note: This only works for Appointible-hosten booking websites embedded as an iFrame on your website.

You can integrate Google Tag Manager with Appointible to track appointment booked events.

First, ensure that your Google Tag Manager JavaScript is loaded on your website where the Appointible-hosted booking website's iFrame is embedded.

Then, on these pages, add a simple JavaScript snippet that listens for window.events(...) and trigger the window.dataLayer.push({ }) method to send data to your GTM after new appointment is booked by customer.

<script>
 window.addEventListener( 'message', function(event) {
 
  // Just to make sure the event arrived from the appointible.com website.
  if (event.origin !== 'https://appointible.com') {
     return false;
  }
  
  // The 'appointment_booked' event arrives after new appointment is booked by customer.
  if (event.data.type === 'appointment_booked') {
     window.dataLayer.push({
        event: event.data.type,
        value: event.data.payload.totalAmount,   // optional
        currency: event.data.payload.currency    // optional
        // ...and other fields that are important for you to track for your business.
     });
 }
});
</script>

The complete event body after a new appointment is booked by customer:

{
   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',
   };
}