Most articles we’ve read about Calendly and Google Tag Manager describe the process of setting up tracking for GA4 (Google Analytics) and don’t specifically refer to Google Ads conversion tracking. The beauty of Tag Manager, of course, is that once you’ve got a trigger setup in Google Tag Manager, you can use that to trigger Google Ads conversions tags, Analytics tags, or anything else you may need. However, not all search engine marketers are familiar with the ins and outs of the Tag Manager Data Layer and how it can be used.
This guide is intended to help walk you, a search engine marketer, through the setup of a Calendly booking trigger that you can use in Tag Manager to then trigger your Google Ads conversion tag. Note that we’ll assume you know how to setup the Google Ads conversion tag itself, so this guide will teach you a really awesome way to fire a Google Ads conversion tag when a user on your site interacts with an embedded Calendly <iframe>.
Normally, embedded contact forms and booking options are a nightmare to try and track, if it’s even possible. In this case, Calendly makes it fairly easy to listen for their triggerable events if you just follow the steps below.
We first approached this how-to as an internal article for our own digital ads management team, then realized that anyone searching specifically for how to set up Google Ads conversions with Calendly might also find this helpful. Without further ado, let’s get into it!
First and foremost, ensure that Google Tag Manager is properly installed on the website for which you’re tracking Google Ads conversions. You will need full read/write permissions within the Tag Manager container that is installed so that you can create new variables, triggers, and tags, then test that it’s all working before publishing.
Once inside your Tag Manager container, look on the left-hand side menu and find the Variables link, as seen in this screenshot:
Scroll to “User defined variables” and click the blue “New” button on the top right to create a new variable.
As an aside, you’ve probably used many of the built-in Tag Manager variables like Click URL, Form ID, Page Path, etc. when defining specific triggers. We often use these variables to narrow down a trigger so that we only get the events/actions we want. If you know this, skip ahead to the section entitled “Defining our Calendly variable“. Otherwise, hopefully this will help you gain a better understanding of some of these deeper Tag Manager options.
As an example, if we’re tracking a telephone link click, we’d typically setup a Tag Manager trigger that was “Just Links”, but we’d also configure it so that only “Some Link Clicks” fired the trigger. If we didn’t filter down to just “some” link clicks on the site, your Google Ads conversion or other tag would fire on literally any link clicked on the website, including just regular links between pages. This ability to filter is a powerful feature within Google Tag Manager for search engine marketers.
Once “Some Link Clicks” is selected, we get additional options (the previously mentioned “variables”) that we can now use to filter a user’s actions even further before the trigger fires. Continuing the telephone link example above, we’d set something like “Click URL” contains “tel:”. This means our trigger is now listening for when a link is clicked, but it will only fire connected Tags when the URL (the link’s HREF attribute) contains the “tel:” code which is the prefix before a phone number link.
User defined variables in Tag Manager, among other things, let us define our own parameters for how we can further filter a trigger. We’ll create one in a moment that is specific to Calendly, but variables can also be used to hold information like your Google Analytics ID (previously known as the UAID).
In this user-defined variables section, we’re going to define and filter on an event that Calendly pushes into the Data Layer. Without Calendly pushing this event into the Data Layer, it would be much more difficult (if not impossible) to directly track user actions inside of the Calendly <iframe> since Google Tag Manager would have no way to know what was happening inside the <iframe>.
Events and interactions inside of an <iframe> technically take place on another website; that type of embedded content is really no more than an invisible “window” into another website and isn’t technically part of your own website’s code, even though it looks like it is “on” your website. Thankfully, from within its <iframe>, Calendly notifies the client’s browser about their interactions with its widget which allows Tag Manager to listen for those events (once we set them up below).
Go ahead and click the blue “New” button under User-defined variables. You can name it whatever you’d like, but for the sake of easily matching what we’ll be measuring, we’ll name it “calendly_event”.
Under “Variable Configuration” click the big white card that says “Choose a variable type to begin setup…” and then find “Data Layer Variable” in the list that pops up.
Once you’ve chosen Data Layer Variable, you’ll have to enter in the name of the variable that we’re trying to read from the Data Layer. Understanding how events and variables get pushed into the Data Layer is a bit beyond the scope of this article, but the general flow goes like this:
When a user interacts with Calendly in the browser, it fires a very useful event into the data layer called “calendly” and that event has a property called “calendly_event”. The value we’ll be using in the next few steps is the “event_scheduled” value since that’s what we would consider a true conversion for most Google Ads customers that use Calendly.
Calendly pushes “calendly_event: event_scheduled” to the Data Layer when a user actually books with someone’s calendar, but there are four events in total that it can fire at different times:”profile_page_viewed”, “event_type_viewed”, “date_and_time_selected”, and “event_scheduled”. Click here to read more about this from Calendly’s developer docs.
Go ahead and save the new Data Layer variable that we’ve just created. We’ll use it next when we define our trigger.
We’ve got a new Data Layer variable, but it’s not much use to us on its own. We need to pair it with a trigger that can fire our Google Ads conversion tag. Head into the Triggers section of Tag Manager and click the New Trigger button. From there, scroll down to find the “Custom Event” trigger type.
Name your new trigger something descriptive like “Calendly Booking Trigger” (or whatever you prefer that makes sense to you) and where it asks for you to type in “Event name” we’re going to type “calendly”. This is the exact name of the event that Calendly pushes into the Data Layer, so this is what we can set our trigger to fire on.
However, we may not want our Google Ads conversion tag firing just on that “calendly” event. The “calendly” event fires even when the booking form is loaded. For most of our customers, that’s not a valuable enough action on its own to count as a Google Ads conversion. This is where we get to use our custom variable from earlier!
If you’d like to filter down by which of the four specific actions occurred, choose “Some Custom Events” below “Event name”. Much like how we can filter our trigger to only fire when a Form is submitted on a page with a certain URL, we can now filter our Custom Event to only fire when the “calendly_event” value also equals what we want it to equal.
In the dropdown under “Fire this trigger when an Event occurs and all of these conditions are true”, pick the “calendly_event” variable that we created earlier. You may have named it something else – just remember that this is where we pick the user-defined variable from a previous step.
From here, you can choose whichever of the four event values you’d like to measure. For us, we most frequently set it so that the trigger only fires when “calendly_event” equals “event_scheduled” as a potential customer actually booking some time with our client is frequently considered the most valuable action from a Google Ads conversion perspective.
If you’re running this trigger for something other than Google Ads (for instance, perhaps in your Analytics you want to count when people go only as far as selecting a day and time), then simply change the value of “calendly_event” to whatever you want to measure. Once again, the options are: “profile_page_viewed”, “event_type_viewed”, “date_and_time_selected”, and “event_scheduled”.
Go ahead and save your new trigger. From there, simply create your Google Ads conversion tag and set this new Custom Event to be your trigger. If you’re not familiar with creating a Google Ads conversion tag, try reading this article from Google’s support website.
You can always use the Preview button in Tag Manager to open the Tag Assistant. Connect it to a page on the site that has a Calendly booking embed. Once on the site in debug/preview mode, start interacting with the Calendly widget by picking a date and time and hitting “Next” within Calendly. Now, switch back to the browser tab that has Tag Assistant running and look on the left-hand side to see all of the actions that have loaded thus far. You should see an event in the list simply titled “calendly”. Although I don’t have screenshots at the time of writing, if you click any of the Calendly events listed, Tag Assistant will show you the little snippet of data that it saw. From there, you’ll see things like “event: calendly” and “calendly_event: date_and_time_selected”. These events were sent to the browser host by Calendly when you interacted with it and this is exactly how Google Tag Manager can see what you’ve done even though the booking embed is technically hosted on another domain (Calendly’s website, to be specific). Neat, huh? Well, we thought so.
If you’re looking for help running your Google Ads campaigns, don’t hesitate to reach out to us here at Red Ear Media. We’ve got years of experience running Google Ads campaigns and we also provide white-label services for other agencies.
We hope this article helped you as much as it helped us!
Want to get a quote on your project? Get started by contacting us now!