Track Calendly Bookings Embedded on Your Website | Capture Emails
Track Calendly Bookings Embedded on Your Website | Capture Emails
How to Track Calendly Bookings Embedded on Your Website (and Capture Emails for Google Ads Enhanced Conversion) Using GTM
Calendly is a powerful tool for scheduling, but capturing critical user data like emails and sending it to Google Ads for conversion tracking adds extra value. By setting up Google Tag Manager (GTM), you can track Calendly bookings, capture user-provided data, and pass it to Google Ads for more accurate reporting.
Step-by-Step Guide to Track Calendly Bookings and Capture User Data
This guide will help you track events through GTM and capture data for Google Ads using the “Include user-provided data from your website” option.
Step 1: Add a Calendly Listener to GTM
You can add the Calendly listener directly into Google Tag Manager by following these steps:
1. In GTM, click on Tags and select New.
2. Choose Tag Configuration and select Custom HTML.
3. In the HTML field, paste the following Calendly listener script:
<script>
window.dataLayer = window.dataLayer || [];
window.addEventListener('message', function(e) {
if (e.data.event && e.data.event.indexOf('calendly') === 0) {
if (e.data.event == 'calendly.event_scheduled') {
var originalString = e.data.payload.invitee.uri;
var regex_event = /scheduled_events\/(.*?)\/invitees/;
var event_uuid = originalString.match(regex_event);
var regex_invitee = /invitees\/(.*)/;
var invitee_uuid = originalString.match(regex_invitee);
window.dataLayer.push({
'event': 'calendly',
'calendly_event': e.data.event.split('.')[1],
'event_uuid': event_uuid[1],
'invitee_uuid': invitee_uuid[1]
});
} else {
window.dataLayer.push({
'event': 'calendly',
'calendly_event': e.data.event.split('.')[1]
});
}
}
});
</script>
4. Set the trigger to All Pages to ensure the listener runs on every page.
Step 2: Create Data Layer Variables in GTM
Go to Google Tag Manager and create two Data Layer Variables to capture the Event UUID and Invitee UUID.
1. Click Variables in GTM.
2. Under User-Defined Variables, click New.
3. Select Data Layer Variable.
4. Create the following variables:
- DLV – Calendly – event_uuid
- DLV – Calendly – invitee_uuid
These variables will store the unique Event ID and Invitee ID for each booking.
Step 3: Capture the Invitee’s Email for Google Ads
Create a Custom JavaScript Variable to capture the invitee’s email using the Calendly API:
1. In GTM, go to Variables.
2. Click New and select Custom JavaScript.
3. Name it something like JS – Calendly Invitee Email and enter the following code:
function() {
if({{DLV - calendly_event}} === 'event_scheduled') {
var xhr = new XMLHttpRequest();
var calendly_url = 'https://api.calendly.com/scheduled_events/' + {{DLV - Calendly - event_uuid}} + '/invitees/' + {{DLV - Calendly - invitee_uuid}};
var response;
xhr.open('GET', calendly_url, false);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer YOUR_API_TOKEN');
try {
xhr.send();
if (xhr.status === 200) {
response = JSON.parse(xhr.responseText);
return response.resource.email; // Adjust to your API response structure
} else {
return 'Error: ' + xhr.status;
}
} catch (error) {
return 'Exception: ' + error.toString();
}
} else {
return 'Condition not met';
}
}
This makes a request to Calendly’s API to fetch the invitee’s email based on the event and invitee IDs.
Step 4: Set Up the Trigger in GTM
Now, create the trigger that fires when a Calendly booking is scheduled:
1. In GTM, go to Triggers and click New.
2. Select Custom Event Trigger.
3. Name the trigger Calendly Booking Trigger.
4. In the Event Name field, enter calendly.event_scheduled.
5. Set This Trigger Fires On to All Custom Events.
Step 5: Set Up the Google Ads Conversion Tag with User-Provided Data
Set up the Google Ads conversion tag and include user-provided data like the invitee’s email for better conversion tracking:
1. In GTM, go to Tags and click New.
2. Select Google Ads Conversion Tracking.
3. Add your Conversion ID and Conversion Label.
4. Scroll down to the section that says Include user-provided data from your website.
5. Enable this option and select the JavaScript variable you created for the invitee’s email (e.g., JS – Calendly Invitee Email).
6. Set the Trigger to the Calendly Booking Trigger you created.
Step 6: Insert the Conversion Linker Tag
To ensure the conversion data is tracked correctly, add the Conversion Linker tag:
1. In GTM, go to Tags and click New.
2. Select Conversion Linker.
3. Leave the default settings as they are.
4. Set the Trigger to All Pages.
Step 7: Publish Your GTM Container
Once all of the variables, tags, and triggers are set up, click Submit in Google Tag Manager to publish your container.
Benefits of Using Google Ads User-Provided Data
Using user-provided data (previously called Enhanced Conversions) improves your conversion tracking by securely hashing and sending customer data (such as emails) to Google Ads, helping to:
- Improve cross-device attribution.
- Enhance reporting accuracy.
- Optimize bidding strategies in Google Ads.
- Ensure data security by hashing customer information.
Wrapping It Up
By integrating Calendly with Google Tag Manager, you can track who’s booking meetings and capture their email addresses for use in Google Ads conversion tracking. This allows for deeper insights and better ad performance.
Need help tracking your small business marketing events? Mike from gravityGone, a web designer, SEO expert, automator, and marketing tech support guru, can assist you in scaling your business with smarter marketing data tracking.