October 31, 2024

Track Calendly Forms with Google Tag Manager for Google Ads, GA4

Abdul Kayium

Track Calendly Forms with Google Tag Manager

Welcome! If you’re here, you likely have an embedded Calendly calendar on your website to let visitors easily book appointments. Now, you’re looking to track Calendly form submissions for Google Analytics 4 (GA4), Google Ads, or Facebook Ads to measure conversions effectively.

You can also hire me to track Calendly conversions for you.

You’re in the right place! In this post, I’ll show you how to track Calendly using Google Tag Manager and send event data to platforms like GA4, Google Ads, and Facebook Ads.

Why Track Calendly Conversion Tracking?

Tracking these conversions allows you to:

Optimize Ad Campaigns: Know which ad campaigns drive more appointments.
Measure Marketing ROI: Understand which marketing efforts bring quality leads.
Enhance User Experience: By analyzing the data, you can make better decisions to improve your funnel.

Video tutorial

If you prefer video content, here’s a tutorial from my Youtube channel.

What interactions can we track?

You will be able to capture the following events:

#1. Profile Page View: Tracks when someone visits a page with your embedded Calendly calendar.

#2. Event Type View: Tracks when someone clicks to view a specific event type in your calendar.

#3. Date and Time Selection: Tracks when someone chooses a date and time in your calendar.

#4. Event Scheduled: Tracks when someone completes scheduling an event.

Listener code

To set up tracking for Calendly with Google Tag Manager, follow these steps:

Go to your GTM container.
Click on Tags and then select New.
Choose Custom HTML and paste the code below into the provided field.

This will enable GTM data_layer tracking for your Calendly events.

				
					<script>
window.addEventListener('message', function(event) {
    if(event.origin !== 'https://calendly.com') return;
  
    window.dataLayer = window.dataLayer || [];
    dataLayer.push(event.data);
});
</script>

This code acts as a listener for Calendly events on a page with an embedded calendar. It detects these events and pushes them to the Data Layer, with one of the following four events:

profile_page_viewed – when the profile page is viewed
event_type_viewed – when an event type is viewed
date_and_time_selected – when a date and time is selected by the invitee
event_scheduled – when a meeting is successfully booked by the invitee

In the tag’s trigger settings, select the All Pages trigger. If your Calendly calendar only appears on specific pages, create a more precise Pageview trigger with a condition such as “Page URL contains XXXX” (replace “XXXX” with the specific page URL where the calendar is embedded).

Save the tag, and now it’s time to test if the listener is functioning correctly. To do this, click the Preview button located in the top-right corner of the Google Tag Manager interface.

Next, enter the URL of the page where your Calendly calendar is embedded.

Click Connect to activate preview and debug mode. This will open a new tab or window displaying your website. In this view, you may notice a warning message.

Ignore the warning and don’t click “Enable.”

Next, interact with the embedded calendar on your website and schedule an event.

Return to the GTM preview mode tab, and on the left side, you should see Calendly events. Click on one of these events, expand the API call, and you should see details like this:

If you see these events in preview mode, that’s a good sign. In this example, you should see four event types:

– Profile page view (Calendly widget loaded)
– calendly.event_type_viewed
– calendly.date_and_time_selected
– calendly.event_scheduled

If the events are showing, move to the next step. If not, try refreshing preview mode or check your setup for possible errors.

Custom event trigger setup for Calendly form submission tag

In this case, we want to see the ‘calendly.event_scheduled’ event in preview mode. To do this, create a Custom Event trigger in Google Tag Manager. Navigate to Triggers > New > Custom Event, and enter the custom event name. Refer to the example image below for guidance.

Google Analytics 4 tag for Calendly Scheduled

Now it’s time to send Calendly events to Google Analytics 4. In Google Tag Manager, go to Tags > New > Google Analytics > GA4 Event Tag.

Enter your GA4 Measurement ID.
Use descriptive event names, such as calendar_event_scheduled, to simplify analysis (e.g., Path exploration).

Create triggers and tags for each event also, including:

– Profile page view (Calendly widget loaded)
– calendly.event_type_viewed
– calendly.date_and_time_selected

Your GA4 event tag setup might look like this:

Let's Test

Save the tag and click the Preview button in the GTM interface to refresh preview mode. The page with the embedded calendar will reload.

Note: If you see a warning about enabling debugging for the calendly.com domain, it may cause issues during testing. To fix this, close the GTM preview tab and your website tab, then click the Preview button again to restart preview mode.

Interact with the calendar and schedule an event.

Return to the Preview mode tab and check for the Calendly events. If they appear, click on them one by one to confirm that your GA4 tag fired successfully.

Next, go to your Google Analytics 4 property and navigate to Admin > DebugView.
– Locate your device in the top-left corner.

– In the event stream, you should see your calendar events listed.

Great news 🙂 Our Calendly form tracking for Google Analytics 4 is complete.

If you want to set up Calendly tracking for Google Ads or Facebook Pixel, check out my other blog or videos.