How to track Calendly Booking Submissions in GA4 with Google Tag Manager

Calendly makes client-side tracking reliable for bookings on your domain, capturing events like form views and submissions without cross-domain issues. This method uses a JavaScript event listener to push data to GTM’s data layer, then fires GA4 events. It works best for embedded Calendly (not external links) and supports full funnel tracking. For non-embedded setups, consider Calendly’s native GA4 integration (available on paid plans only) or server-side GTM for enhanced accuracy.

You can use multiple ways to track Calendly booking submission, but I’ll discuss most easiest and advanced ways to track Calendly submission tracking in Google Analytics 4, Meta ads, and Google Ads conversion tracking.

Table of Contents

• Overview of Acuity scheduling booking
• Tracking perquisites tools
• How to create a Google Tag Manager account
• Configure Datalayer
• Test and debug Calendly events in the datalayer
• Configure Tags and Triggers for GA4 Events
• Create Calendly scheduled events in GA4
• Preview and test the GA4 event.
• Create a Calendly Google Ads conversion
• Conclusion

1.2 Tracking perquisites tools  

For successful Acuity booking submission tracking, you need to have your own or your client’s account access to marketing tools and should have basic knowledge about them.

1. Google Tag Manager
2. Google Analytics 4
3. Google ads
4. Meta ads

1.3 How to create a Google Tag Manager account for tracking and scheduling

Use the ink below here to create your own Google Tag Manager Account. You just need to have a Gmail account. You can also watch the video where I showed how to create a Google Tag Manager account.

1.4 Custom JavaScript load to get the booking submission

Since Calendly booking is hosted on its own domain so we cannot access it directly due to a cross-domain issue. But we will use small pieces of JavaScript to load on the website. This JavaScript will send us events when users interact with Acuity Scheduling on each step.

<script>

window.dataLayer = window.dataLayer ||[];

window.addEventListener('message',

  function(e) {

    if (e.data.event && e.data.event.indexOf('calendly') === 0) {

      window.dataLayer.push({

        'event': 'calendly',

        'calendly_event' : e.data.event.split('.')[1]

      });

    }

  }

);

</script>

1.5 Create custom HTML tags in Google Tag Manager

You need to copy the code, then create custom HTML tags in Google Tag Manager.

You need to create a trigger for the pages, and the trigger should be for all pages. You will get the Calendly custom events when you debug and test gtm containers.

To

debug the container, click on the ” Preview ” Button, and you will see a new screen with Google Tag Assistant. Your website will be connected with the GTM container.

Now you will see Caldenly custom events in the datalayer when you see it. You may see a notification that tells you to enable calendly.com for debugging. Just dismiss the message. It will not have any impact on tracking.

You will get Calendly_event on each step of user interatcion in datalayer events . You can create datalayer veriables based on this events .

Create Datalayer variables in Google Tag Manager .Go to the variable section, then click on user-defined variable > new variable > Datalayer variables.

Now create triggers for Google Analytics 4 events. Follow the steps. Firstly, click on triggers > Choose new trigger > Custom event . Set the event Calendly that is created by custom JavaScript.

Now we will create tags that will send the events to GA4. To create Tags, first go to the tag section and click on ” NEW” tags. This will be the Google Analytics 4 events tag. You need to set the measurement_id from Google Analytics 4. If you don’t know, then you can see the videos below for a better understanding of how to set up Google Analytics with Google Tag Manager.

Let’s put a name for the Calendly event names since we have created a datalayer variable that will send events, which is created by custom JavaScript. You can put the event’s name in Calendly_ {{dlv_calendly_event}}. See the image below.

Let’s save the tag and test it with preview mode. You will see that the event tags will be fired on each step of the user journey, and data will be sent to GA4.

Finally, the events will be available in the debug view of GA4 dashboards, which will look as below.

as below.

In conclusion, we can say that if you follow the step-by-step process, then you will get accurate conversion tracking in Google Analytics 4 . With this data, you will see more user insight and improve areas of your service.