RESOURCES/CALENDLY LISTENER
Calendly booking tracking listener for Google Tag Manager
Embedded Calendly widgets run in an iframe, invisible to GTM by default. This listener catches every Calendly postMessage (profile_page_viewed, event_type_viewed, date_and_time_selected, event_scheduled) and pushes it to the dataLayer, so you can fire a conversion tag exactly when a booking completes.
calendly-listener.html
<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>Install in 3 steps
- 01
In GTM, create a Custom HTML tag and paste this code.
- 02
Set the trigger to All Pages, or only the pages where the form is embedded.
- 03
Open GTM Preview, submit a test form, and confirm the event appears in the dataLayer. Then use that event as the trigger for your GA4, Meta, or Google Ads tags.
Common problems
More free listeners:Typeform · HubSpot · GoHighLevel