Track Calendly with Google Tag Manager and GA4

Updated: September 2nd, 2025

If you landed on this page, you (most likely) have embedded a Calendly calendar on your website. People land on your website, they can schedule appointments, and you would like to see that data in your analytics (e.g., Google Analytics 4).

If my guess was correct, you have come to the right place. In this blog post, I will explain how to track Calendly with Google Tag Manager, and then we will send data to Google Analytics 4 as events.

Table of contents

– Hide table of contents –

• Before we continue
• What kind of interactions can we track?
• Listener code
• Custom event trigger and Data Layer Variable
• Create a Google Analytics 4 tag
• Let’s test
• Troubleshooting
• Mark calendar_event_scheduled as a key event (optional)
• Final words

Before we continue

In this blog post, I presume you have at least some basic knowledge about Google Tag Manager. If not, then read this tutorial first. And if you want to become a power GTM user, take a look at my courses.

Video tutorial

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

Google Tag Manager template

I also prepared a Google Tag Manager container template (a.k.a. recipe) to save you some time. You can download it here.

What kind of interactions can we track?

You will be able to capture the following events:

#1. When the profile page is viewed (meaning that someone lands on a page where your calendly calendar is embedded and loaded)

#2. When someone views an event type in your embedded calendar. For example, by clicking this one:

#3. When someone selects a date and time

#4. When someone schedules an event

Note: the solution that I explain in this blog post will not give you more granular data (like what exact time/date was selected or what kind of event type was viewed/scheduled). I know it would be nice to have more data, but that’s just what the official documentation of Calendly offers.

This method is good for general tracking (to know whether visitors look and schedule any events in your calendar).

By tracking all four of these distinct events, you are not just measuring the final booking; you are mapping the entire user journey through your scheduling process. This allows you to build a funnel report in Google Analytics 4 to answer important questions. For example, you can see if many users view an event type but then abandon the process before selecting a date and time. This kind of insight can help you identify potential friction points in your booking flow.

Listener code

To start tracking Calendly with Google Tag Manager, you must create a Custom HTML tag in your GTM container. Go to Tags > New > Custom HTML and paste the following code:

<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>

The reason we need this special listener code is that the embedded Calendly widget is technically a webpage living inside of your webpage, a concept known as an iframe. Because it is in its own container, standard Google Tag Manager triggers cannot easily see what happens inside it. This script acts as a bridge that is specifically designed to listen for the confirmation messages that the Calendly iframe sends out to the main page whenever a key action occurs.

This code is a listener that will be looking for Calendly events on a page (that are dispatched by the embedded calendar) and then will make them available in the Data Layer. It will push one of four events:

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

In the triggering section of a tag, click anywhere and select the All Pages trigger. If your Calendly calendar is available only on certain pages, then you could create a more precise Pageview trigger where the condition is Page URL contains XXXX (replace XXX with the URL of the page where the calendar is embedded).

Save the tag. It’s time to test whether this listener is working. Click the Preview button in the top right corner of the Google Tag Manager interface.

Then enter the URL of the page where you have embedded a Calendly calendar.

Click connect. This will activate the preview and debug mode and will open another tab/window with your website. In it, you might see this warning.

Ignore it and don’t click “enable” on it.

Do not be alarmed by the “Unknown domain” warning for calendly.com. This message appears because the embedded Calendly widget is technically a small, separate webpage (an iframe) running inside your own site. While GTM’s Preview mode offers to connect to that inner page for debugging, we do not need it to. Our listener code is specifically designed to catch the messages that the Calendly iframe sends out to the main page. All the data we need will be captured correctly on your website’s domain.

Now, interact with that embedded calendar on your website, and schedule an event.

Go back to the GTM preview mode’s tab, and on the left side, you should see calendly events. Click one of them, expand the API call, and you should see something like this:

If you see events, that’s great. In my screenshot, there are four events for every type of interaction with the calendar:

• profile page view (a.k.a. Calendly widget was loaded)
• event type selection
• choosing date and time
• scheduling the event

If you see the events in the preview mode, too, let’s move to the next step. If you cannot, then try closing and refreshing the preview mode again. Also, check your configuration. Maybe you accidentally left some mistakes.

Custom event trigger and Data Layer Variable

Later in this blog post, we will create a Google Analytics 4 event tag to send the data to GA. But we need to define when that data should be sent.

In our case, that is when the ‘calendly‘ event is visible in the preview mode. To do that, we have to create a Custom Event trigger. In Google Tag Manager, go to Triggers > New > Custom Event and enter the following configuration.

Then let’s create a data layer variable to let us know what event happened. Was it profile_page_viewed  or event_scheduled? Or maybe something else?

Go to Variables > New > Data Layer variable and enter the following settings:

I entered “calendly_event” because that is the parameter’s name that is pushed to the data layer.

Create a Google Analytics 4 tag

In this blog post, I presume that you already have the GA4 configuration tag in your container, and you know what it does. If you don’t, read this tutorial first.

Now, the time has come to send Calendly events to Google Analytics 4. In Google Tag Manager, go to Tags > New > Google Analytics > GA4 event tag.

Enter measurement ID.

Names could be calendar_profile_page_viewed or calendar_event_scheduled. Having unique event names is convenient for analysis like Path exploration. Also, in the list of events, you can clearly and quickly see what kind of calendar event it was.

If this naming convention works for you, your Ga4 event tag could look like this:

In the triggering section of the GA4 event tag, click anywhere and then select the custom event trigger you have just created. The final configuration of the tag can look like this:

Let’s test

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

Note: remember that warning in the preview mode about enabling debugging for calendly.com domain? This might cause some inconvenience while you test the setup. If you try to refresh the preview mode in GTM, it will then try to connect to the calendly.com domain (instead of your website’s domain). If you face this issue, close the GTM preview tab and your website’s tab. Then click the Preview button in the GTM interface once again to restart the preview mode.

Interact with that calendar and schedule an event.

Now, go back to the Preview mode’s tab and check if you see all those calendly events. If yes, click them one by one, and you’ll see that your GA4 tag fired.

Now, go to your Google Analytics 4 property > Admin > DebugView.

Find your device in the top-left corner.

Then, in the event stream, you will see your calendar events.

Click those events to inspect what kind of data they contain. All good? Then, hit the Submit button in your GTM interface and publish a new version of the container. Calendly tracking with Google Tag Manager has just gone live!

If GA4 debug view is not working for you, take a look here.

Troubleshooting

Here are some common troubleshooting scenarios in case your setup is not working.

#1. The listener doesn’t seem to work. It fires, but you don’t see the calendly events in the GTM preview mode. In that case, try firing the listener tag later (e.g., on Window Loaded). Also, check the browser’s JavaScript console – maybe there are some calendly or Google Tag Manager errors displayed there?

#2. calendly events are seen in the preview mode, but the tag does not fire. It’s possible that your trigger contains a typo, or maybe built-in consent checks are preventing the tag from firing? These and many other reasons are explained in this guide.

Mark calendar_event_scheduled as a key event (optional)

If we look at all Calendly events that this listener tracks, one event is more important than others. That’s calendar_event_scheduled. It’s the end goal that you want your visitors to complete when they start interacting with the calendar.

Naturally, you should tell Google Analytics that this event matters more. To do that, you should mark it as “Key event” (previously known as Conversion).

While tracking all interactions is useful for behavioral analysis, marking calendar_event_scheduled as a key event elevates its importance within your reports. This tells Google Analytics that this specific action is a primary business objective. Doing so makes it easier to analyze attribution, as key events are featured more prominently in reports like the Traffic Acquisition report. It helps you quickly see which marketing channels are not just driving clicks, but are successfully driving actual bookings for your business.

To do that, go to Google Analytics admin > Key events.

Click New Key Event, enter calendar_event_scheduled and hit Save.

After you do this (and you publish the GTM container), wait 24-48 hours. Then, you will be able to see this key event data in reports such as Traffic Acquisition.

Track Calendly with Google Tag Manager: Final words

In this blog post, you have learned how to track embedded Calendly with Google Tag Manager and send those events to Google Analytics 4.

The process looks like this:

• Create a Custom HTML tag with the listener code. Fire the tag on pages where the Calendly calendar is embedded
• Create a Data Layer Variable and a Custom Event trigger
• Create a Google Analytics 4 event tag that sends the data to Google Analytics
• Don’t forget to test everything with the GA4 DebugView