Tracking voor een Calendly afspraak instellen
Volg onderstaande stappen om het inplannen van een meeting via een Calendly embed op je website te tracken als GA4 gebeurtenis.
Om Calendly te kunnen volgen met Google Tag Manager, moet je een aangepaste HTML-tag maken in je GTM-container.
Open je GTM web container.
Ga naar Tags.
Maak een nieuwe tag aan.
Kies 'Aangepaste HTML' als tag configuratie en plak de volgende code:
Geef deze tag de trigger 'All Pages' (of als je alleen een Calendly embed op één specifieke pagina hebt, gebruik je dat als trigger).
Sla deze tag op.
Deze Custom HTML code is een listener die op zoek gaat naar Calendly-events op een pagina en ze dan beschikbaar maakt in de dataLayer. Het zal een van de volgende vier gebeurtenissen pushen:
profile_page_viewed - wanneer de profielpagina werd bekeken
event_type_viewed - wanneer de pagina van het evenementtype werd bekeken
date_and_time_selected - wanneer de bezoeker een datum en tijd heeft geselecteerd
event_scheduled - wanneer de bezoeker met succes een meeting heeft geboekt
In onderstaande stappen leggen we uit hoe je een 'event_scheduled' gebeurtenis op kan zetten
In je Google Tag Manager web container maak je een nieuwe tag aan.
Selecteer 'Google Analytics > GA4 event' als tag configuratie.
Voer je GA4 measurement ID in, of selecteer de constante variabele van je GA4 measurement ID.
Geef de gebeurtenis die je gaat meten een duidelijke naam. Hier ben je volledig vrij in (sign_up, generate_lead, contact, calendly_ingepland, afspraak_gepland, etc).
Voeg een nieuwe trigger toe aan deze tag door op het blauwe plusje te klikken nadat je een trigger gaat selecteren.
Kies als trigger configuratie voor de oranje optie 'Custom Event'.
Als Event Name vul je 'calendly' in.
Selecteer dan 'Some custom events'.
In het linkerinvoerveld klik je op 'New Variable'
Als variabele configuratie kies je voor 'Data Layer Variable'
Als Data Layer Variable Name vul je 'calendly_event' in.
Geef deze variabele een duidelijke naam zoals 'DLV - calendly_event' en sla deze variabele op.
In het middelste dropdown veld van je trigger kies je voor 'equals' en in het rechter invoerveld vul je 'event_scheduled' in.
Geef deze trigger een duidelijke naam zoals 'calendly - event_scheduled' en sla deze trigger op.
Geef deze tag een duidelijke naam zoals 'GA4 - gebeurtenisnaam' en sla de tag op.
Test in de GTM preview mode of je een gebeurtenis meet op het moment dat je de Calendly embed gebruikt om een meeting in te plannen. Als dat gelukt is, kan je je GTM web container publiceren.
Custom HTML Listener Script
Om Calendly te kunnen volgen met Google Tag Manager, moet je een aangepaste HTML-tag maken in je GTM-container.
Open je GTM web container.
Ga naar Tags.
Maak een nieuwe tag aan.
Kies 'Aangepaste HTML' als tag configuratie en plak de volgende code:
<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>Geef deze tag de trigger 'All Pages' (of als je alleen een Calendly embed op één specifieke pagina hebt, gebruik je dat als trigger).
Sla deze tag op.
GA4 event tag
Deze Custom HTML code is een listener die op zoek gaat naar Calendly-events op een pagina en ze dan beschikbaar maakt in de dataLayer. Het zal een van de volgende vier gebeurtenissen pushen:
profile_page_viewed - wanneer de profielpagina werd bekeken
event_type_viewed - wanneer de pagina van het evenementtype werd bekeken
date_and_time_selected - wanneer de bezoeker een datum en tijd heeft geselecteerd
event_scheduled - wanneer de bezoeker met succes een meeting heeft geboekt
In onderstaande stappen leggen we uit hoe je een 'event_scheduled' gebeurtenis op kan zetten
In je Google Tag Manager web container maak je een nieuwe tag aan.
Selecteer 'Google Analytics > GA4 event' als tag configuratie.
Voer je GA4 measurement ID in, of selecteer de constante variabele van je GA4 measurement ID.
Geef de gebeurtenis die je gaat meten een duidelijke naam. Hier ben je volledig vrij in (sign_up, generate_lead, contact, calendly_ingepland, afspraak_gepland, etc).
Voeg een nieuwe trigger toe aan deze tag door op het blauwe plusje te klikken nadat je een trigger gaat selecteren.
Kies als trigger configuratie voor de oranje optie 'Custom Event'.
Als Event Name vul je 'calendly' in.
Selecteer dan 'Some custom events'.
In het linkerinvoerveld klik je op 'New Variable'
Als variabele configuratie kies je voor 'Data Layer Variable'
Als Data Layer Variable Name vul je 'calendly_event' in.
Geef deze variabele een duidelijke naam zoals 'DLV - calendly_event' en sla deze variabele op.
In het middelste dropdown veld van je trigger kies je voor 'equals' en in het rechter invoerveld vul je 'event_scheduled' in.
Geef deze trigger een duidelijke naam zoals 'calendly - event_scheduled' en sla deze trigger op.
Geef deze tag een duidelijke naam zoals 'GA4 - gebeurtenisnaam' en sla de tag op.
Test in de GTM preview mode of je een gebeurtenis meet op het moment dat je de Calendly embed gebruikt om een meeting in te plannen. Als dat gelukt is, kan je je GTM web container publiceren.
Bijgewerkt op: 28/05/2025
Dankuwel!