Calendly Event Listener
How to track Calendly Interactions with google tag manager
Calendly is a great appointment scheduling tool, but tracking Calendy conversions and the user funnel on your booking page will enhance your marketing data.
With the Calendly event listener and Google Tag Manager, you can track how users complete the scheduling funnel into your analytics tools and advertising platform.
The data can be helpful in measuring conversions, building a marketing audience, and data segmentation for deeper marketing analysis.
To implement this, all you have to do is create a new custom HTML tag in Google Tag Manager, copy and paste the Calendly event listener code and fire the tag on Pageview or DOM ready.
The code makes it possible to listen for Calendly activities and user interactions, to fire your tag on these interactions create a custom event with the name [calendly]
To identify the actions performed, you’ll have to create a dataLayer variable with the key [calendly_event], which returns the Calendly action (successful booking, profile_page_viewed, event_type_viewed)
These can be pushed dynamically into your analytics tools or streamlining your trigger to fire for Calendly conversions using trigger conditions and the dataLayer variable key.
The creator of this code is Julius Fedorovicius and can be found here https://www.analyticsmania.com/post/how-to-track-calendly-with-google-tag-manager-and-google-analytics-4/
<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>