Iframe tracking in Google Tag Manager via postMessage

In dit artikel leer je hoe je iframe tracking opzet via postMessage, wat de rol van eventlistener is, en hoe je dit allemaal veilig en betrouwbaar integreert.

Iframe tracking uitdagingen

Een iframe laadt content van een ander domein binnen jouw webpagina. Het probleem? GTM heeft geen directe toegang tot een iframe, ze “ziet” enkel de zaken op jouw eigen domein. De gebeurtenissen binnen het iframe zijn dus niet meetbaar met de traditionele triggers binnen Google Tag Manager.

In sommige gevallen zendt het iframe echter signalen uit naar jouw eigen webpagina op bepaalde gebeurtenissen binnen het iframe: dit is een postMessage. Via Google Tag Manager kan je deze postMessage opvangen door het aanmaken van een eventlistener.

Controleer: Wordt er een postMessage verzonden vanuit het iframe?

Voeg onderstaande code toe in de Chrome dev tools console om te kijken of er een postMessage wordt uitgestuurd vanuit het iframe.

window.addEventListener ('message', function(event){
    console.log(event)
})

Als er berichten worden uitgestuurd zal je deze in de console zien staan, alsook alle data die wordt meegestuurd met dit bericht. In onderstaand voorbeeld zien we bijvoorbeeld dat er een postMessage is voor de gebeurtenis “calendly.date_and_time_selected”. Je zou dus een eventlistener kunnen schrijven die deze berichten uitluistert en daarop “iets” doet (zie verder).

Hoe een postMessage opvangen met GTM?

De postMessage API is een Javascript methode die communicatie mogelijk maakt tussen 2 verschillende vensters (zoals tussen een iframe en de bovenliggende “parent” pagina). Het proces werkt als volgt:

1. Het iframe stuurt een bericht naar een parent pagina (jouw eigen website pagina).
2. Op de ouderpagina maak je een eventlistener die luistert naar de berichten die uitgestuurd worden van het iframe.
3. Op het event dat je wil meten, push je het event in de datalayer van de parent pagina .
4. Gebruik dit datalayer event als trigger voor jouw tags.

Stappenplan: iframe tracking implementeren via postMessage in GTM

Stap 1: Voeg een postMessage toe in je iframe

Zorg dat je iframe de juiste berichten verzendt op de verschillende gebeurtenissen die je wilt meten. Dit moet aan de iframe-zijde (de “embedded” app of tool) worden geïmplementeerd. We gaan er hier even van uit dat dit reeds geïmplementeerd is vanuit de tool zelf. Is dit niet het geval, vraag dan de developer om postMessage berichten toe te voegen aan het iframe.

Stap 2: Voeg een eventlistener toe op jouw pagina die het iframe bevat

Voeg een eventlistner toe aan je website via een Custom HTML-tag in GTM. Laat deze tag afvuren op alle pagina’s die het iframe bevatten.

Bouw jouw eventlistener zo op dat hij enkel afvuurt op de gewenste postMessage berichten. Op die gebeurtenissen push je een event in de datalayer van jouw eigen websitepagina.

Voorbeeldcode eventlistener

Pas de vetgedrukte zaken aan naar jouw eigen situatie

window.addEventListener("message", function (event) {
  if (event.origin !== "https://jouwbetrouwbarebron.com") return; // voeg hier enkel gekende domeinnamen toe

  if (event.data.eventType === "formSubmission") { // verander hier de event.data variabele en de naam van het event naar jouw eigen variabelen
 
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: "iframeFormSubmitted" // geef het datalayer event een duidelijke naam
    });
  }
});

De bovenstaande eventlistener luistert naar de binnenkomende postMessage “formSubmission” en pusht het event “iframeFormSubmitted” naar de dataLayer van de eigen website pagina.

Stap 3: Configureer je trigger en tag in Google Tag Manager

1. Maak een nieuwe trigger:
   • Type: Aangepaste gebeurtenis
   • Eventnaam: form_submit_hubspot
2. Koppel je trigger aan de gewenste tag(s): Google Ads, GA4, etc.

Vragen over Iframe tracking?

Neem even contact op en we bekijken we jouw specifieke situatie kunnen aanpakken.