Als je dit artikel leest weet je waarschijnlijk wat een iFrame is, hoe het werkt, en hoe lastig het kan zijn voor om correct te tracken. Als dit voor jou het geval is kan je direct naar de kern van dit artikel en de eerste oplossing.
Als iFrames nieuw voor je zijn, vind je hier de definitie van een iFrame (bron: https://techterms.com): “Een iframe (kort voor inline frame) is een HTML element dat het mogelijk maakt om een externe pagina te integreren in een HTML document. In tegenstelling tot traditionele frames, die gebruikt werden om de structuur van een webpagina te creeeren kunnen iFrales overal in de layout van een webpage worden geintegreerd.”
Samengevat, een iFrame is een pagina in een pagina.
‘Waarom zou je een pagina willen integreren in een pagina?’ kan je je afvragen. Wel, ten eerste, je doet het best niet. IFrames zijn verschrikkelijk moeilijk te tracken en beinvloeden, voor je het weet, zeer waarschijnlijk de kwaliteit van je data (negatief).
Waarom zien we nog steeds zo veel iFrames als ze zo verschikkelijk moeilijk te tracken zijn? Schaalvoordelen (economies of scale) of gemakszucht zullen de voornaamste twee redenen zijn. Om je een concreet voorbeeld te geven, een typische iFrame kan een webformulier zijn. Als een development agency een webformulier bouwt voor een website en het exact hetzelfde formulier nodig heeft voor een andere website of web pagina kunnen ze snel en eenvoudig het originele formulier te injecteren in de andere pagina via een iFrame. Enkel de layout van de parent frame (de gewone website) zouden ze dan nog dienen aan te passen.
In dit artikel geven we een twee effectieve manieren om iFrames te tracken. Na uren zoeken naar de beste manier om deze ‘monsters’ te tracken kunnen we je, naar onze mening, de beste methode voorleggen. Hopelijk bespaar je hierdoor enkele uren en vergemakkelijkt het je leven.
1. iFrame decorator
De eerste optie om iFrame te tracken komt van Google Tag Manager guru, Simo Ahava, die er trouwens net zoals mij dezelfde (negatieve) mening over iFrames op nahoudt.
In deze oplossing maakt Simo gebruikt van een customTask dat gebruik maakt van een setInterval () en het iFrame decoreert wanneer hij er een tegenkomt. Met behulp van een aangepast script (custom script), elke x seconden (je kan zelf het interval kiezen), zoekt de TMS op het bovenliggende frame naar iFrames op de pagina die overeenkomen met de CSS-selector die u in het script hebt genoemd. Wanneer er een match is, zal hij het iFrame-pad decoreren met de cross-domein-linkerparameter. Dit betekent dat de URL van het iFrame de _ga = cross-domein linkerparameter zal hebben, die zal worden gebruikt door de cross-domain tag op het bovenliggende frame met de allowLinker ingesteld op true.
Voor de duidelijkheid, deze visuele weergave geeft je een beter inzicht:
Het volledige script kan gevonden worden in Simo’s artikel.
2. postMessage via dataLayer.Push
De tweede oplossing is radicalere dan de eerste. Daar hadden we een Tag Management System aan zowel de kant van de parent frame als die van de iFrame. In deze aanpak gaan we elke hit, van de parent frame alsook de interacties van de iFrame, naar Analytics sturen.
Om dit te doen gebruiken we een Javascript functie genaamd postMessage. Deze functie bestaat uit een boodschap en een targetOrigin. Concreet, we zullen een boodschap van de iFrame sturen dat zal gelezen worden door de parent frame. We zullen onze tracking informatie dus naar de parent frame sturen en in de dataLayer opnemen. Om het mogelijk te maken dat de parent is staat is om de boodschap van de iFrame te lezen, dienen we een listener te installer op onze parent frame.
Hier is een visuele voorstelling van deze oplossing:
Als het gaat om de kwaliteit van de data en de robuustheid is de tweede optie waarschijnlijk de beste. Het nadeel is dat het extra inspanning zal vragen van je development team/agentschap.
Onthoudt dat het gebruik van iFrames (ten alle koste) vermeden zouden moeten worden, maar als je er toch mee te maken krijgt kan je hopelijk troost en een oplossing vinden in één van de twee voorgestelde oplossingen.
Grégoire le Hardy
| LinkedinDit E-mail adres wordt beschermd tegen spambots. U moet JavaScript geactiveerd hebben om het te kunnen zien.
