Een iFrame volgen met Google Tag Manager

Vereisten

Er zijn twee GTM-containers zijn nodig:

GTM op de website van de klant → Ontvangt gebeurtenissen.
GTM in de Zenchef-module (iFrame) → Verstuurt gebeurtenissen.

Download en importeer de .json-variabelen voor beide containers voordat je begint.
Hier beschikbaar

Doel

Het traceren van Zenchef-reserveringen in met Google Analytics 4 en Google Ads, of elke andere vorm van traceren met Google Tag Manager.

Aanmaken van GTM-tags

Drie tags zijn nodig:

Custom HTML-tag voor het verzenden van events (in de GTM-container van Zenchef) → Verstuurt events naar de website van de klant.
Custom HTML-tag voor het ontvangen van events (in de GTM-container van de website van de klant) → Vangt events op die door Zenchef worden verzonden.
Trackingtag (GA4 / Google Ads) (in de GTM-container van de website van de klant) → Registreert events in de trackingtool.

Configuratie van de tags

1️⃣ Verzendtag (GTM Zenchef - iFrame)

Type: Custom HTML
Code:

<script>
try {
var postObject = JSON.stringify({
event: 'reservation_completed',
variable: 'variable'
});
parent.postMessage(postObject, 'https://jouwwebsite.com');
} catch(e) {
console.log(e);
}
</script>

⚠️ Aanpassen:

reservation_completed → Naam van het event (bijv. choose_date, form_submit).
https://jouwwebsite.com → Vervang dit door je eigen website.
Voeg extra variabelen toe indien nodig (zorg ervoor dat ze overeenkomen met die in het .json-bestand).

Trigger:

Type: Aangepaste events
Selecteer de juiste events uit het gedownloade .json-bestand.

2️⃣ Ontvangtag (GTM op de website van de klant)

Type: Custom HTML
Code:

<script>
(function(window) {
addEvent(window, 'message', function(message) {
try {
var data = JSON.parse(message.data);
var dataLayer = window.dataLayer || (window.dataLayer = []);
if (data.event) {
dataLayer.push({
'event': data.event,
'postMessageData': data
});
}
} catch(e) {}
});
function addEvent(el, evt, fn) {
if (el.addEventListener) el.addEventListener(evt, fn);
else if (el.attachEvent) el.attachEvent('on' + evt, function(evt) { fn.call(el, evt); });
else el['on' + evt] = function(evt) { fn.call(el, evt); };
}
})(window);
</script>

Trigger:

Type: Paginaweergave – Alle pagina's (Dit zorgt ervoor dat de tag actief is op alle pagina's van de site).

3️⃣ GA4 / Google Ads trackingtag (GTM op de website van de klant)

Type: GA4-gebeurtenis of Google Ads-conversietracking
Trigger: Aangepaste events

Naam van de gebeurtenis: Moet overeenkomen met de naam die is gedefinieerd in de eerste tag (bijv. reservation_completed).

Testen en verificatie

GTM Preview Mode: Controleer of gebeurtenissen correct worden verzonden en ontvangen.
GA4 DebugView: Bevestig dat gebeurtenissen verschijnen in Google Analytics.
Google Tag Assistant: Zorg ervoor dat GTM de tags correct activeert.

Belangrijk: Nadat de tests zijn gevalideerd, vergeet niet je GTM-containers te publiceren (zowel Zenchef als de website van de klant) om tracking in productie te activeren.

Samenvatting van de uit te voeren acties:

Importeer de .json-variabelen in beide GTM-containers.
Voeg een verzendtag toe in GTM Zenchef.
Voeg een ontvangtag toe in GTM op de website van de klant.
Configureer een GA4 / Google Ads trackingtag op de website van de klant.
Test en valideer met debuggingtools.
Publiceer je GTM-containers.

Zenchef-reserveringstracking is nu volledig operationeel!

Gerelateerd aan

Zoeken