Listener tag for Calendly Event in GTM
<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>
Tag type: [ Tag Name:- cHTML - Calendly - Listener ]
Custom HTML = Listener Code 01
Trigger:- [ Trigger Name :- All Page ]
==================================================================
Trigger:- [ Trigger Name :- GA4 - CalendlySchedule - Trigger ]
# Click - Just Links:- event equals - ..............
# Click - All Elements:- event equals - .................
Tag type: [ Tag Name:- GA4 - Calendly -Tag ]
Event Name :- wp_form_submission
===================================================================
Create Data Layer Variable
dlv - Calendly Event -> calendly_event
Listener tag for Calendly Event in GTM
Listener Code: 02
<script>
jQuery(document).ready(function(){
if(jQuery('#custom-calendly-test-3').length){
Calendly.initInlineWidget({
url: 'https://calendly.com/techrock69/30min',
parentElement: document.getElementById('custom-calendly-test-3'),
prefill: {},
});
}
});
function isCalendlyEvent(e) {
return e.data.event &&
e.data.event.indexOf('calendly') === 0;
};
window.addEventListener(
'message',
function(e) {
if (isCalendlyEvent(e)) {
var elem = jQuery(this).get(0);
var dataLayerObject = {
'event': "custom_event." + e.data.event,
'gtm.element': elem,
'gtm.elementClasses': elem.className || "",
'gtm.elementId': elem.id || "",
'gtm.elementTarget': elem.target || "",
'gtm.elementUrl': elem.href || elem.action || "",
};
dataLayer.push(dataLayerObject);
}
}
);
</script>
Create Data Layer Variable

