Thursday, March 28, 2024
No menu items!
HomeData Analytics and VisualizationTrack Calendly with Google Tag Manager and Google Analytics

Track Calendly with Google Tag Manager and Google Analytics

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.


 

Before we continue

In this blog post, I presume that 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.

 

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 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 basically good for general tracking (to know whether visitors look and schedule any events in your calendar).

 

Listener code

To start tracking Calendly with Google Tag Manager, first, you have to 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>

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 profile page was viewed
event_type_viewed – when event type page was viewed
date_and_time_selected – when invitee selected date and time
event_scheduled – when 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” in it.

Now, interact with that embedded calendar on your website, 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 mistake.

 

Custom event trigger and Data Layer Variable

Later in this blog post, we will create a Google Analytics 4 event tag that will send the data to GA. But we need to define the exact moment 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 that will let us know what kind of 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 name of the parameter 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 > GA4 event tag.

Select your existing GA4 configuration tag. The following configuration depends on how you structure your events.

Option #1. If you don’t plan to track hundreds and hundreds of different event names, you could name your events based on the interaction a user did with your embedded calendar. For example, event 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 was it.

If this naming convention works for you, your GA4 tag configuration could look like this:

Option#2. If you plan to track A LOT of unique event names in GA4, then remember that GA4 has a 500 event limit per app instance / client ID (in other words, per visitor/user).

So if there is a high chance of that, you could just send a generic event calendar to GA4 and then send an additional parameter calendar_interaction that will contain either profile_page_viewed, or event_scheduled, or something else.

However, keep in mind that there is another limit here. If you want to use that calendar_interaction in your GA4 reports, there is a limit of 50 custom dimensions per property.

Anyway, if you choose this path, then your GA4 tag configuration should look like this:

There is no “best” solution here. Everything depends on how you plan to use GA4 and there are tradeoffs in various situations.

Let’s say that I decided to go with the first option.

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, 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, 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 > Configure > 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 do 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 you are sending event parameters

If you went with option #2 in the GA4 event tag configuration (where event name is always calendar and you have the calendar_interaction parameter), you have to register that parameter as a custom dimension in your Google Analytics 4 interface. This is necessary if you want to use/see that parameter in GA4 reports.

Read this blog post on how to do that.

While registering the custom dimension, choose the Event scope.

 

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

If you decided to set an event parameter in the GA4 tag (e.g. calendar_interaction), don’t forget to register that dimension in the GA4 interface.


The post Track Calendly with Google Tag Manager and Google Analytics appeared first on Analytics Mania.

Read MoreAnalytics Mania

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments