So trackst du Iframes über den Google Tag Manager

Kennst du das Problem?

Du bist Marketer oder Webentwickler und hast erfolgreich eine Kampagne für deinen Kunden aufgesetzt. Die Klicks und Seitenaufrufe steigen stetig, doch an einer entscheidenden Stelle tritt ein Problem auf: Das Buchungssystem deines Kunden trackt keine Conversions. Nach intensiver Analyse entdeckst du die Ursache – das Buchungssystem ist in einem Iframe eingebunden, was es isoliert und den Zugriff auf wichtige Ereignisse, wie das Erreichen der „Danke“-Seite nach einer abgeschlossenen Buchung, verhindert.

Obwohl Abschlüsse und Anmeldungen stattfinden, bleibt dein Tracking im Dunkeln. Die Folge: Du verlierst wertvolle Daten und hast Schwierigkeiten, die Effektivität deiner Kampagnen zu bewerten.

Kommt dir das bekannt vor? Wenn ja, bist du nicht allein. Viele Experten stehen vor genau dieser Herausforderung. Doch es gibt eine clevere Möglichkeit, dieses Problem zu lösen. Im folgenden Artikel stelle ich dir eine Möglichkeit vor, wie du Iframes über den Google Tag Manager tracken kannst, um versteckte Conversions zu erfassen und dein Tracking zu optimieren.

Problembeschreibung: Tracking von Iframes

Das Tracking von Iframes stellt für viele Marketer und Webentwickler eine besondere Herausforderung dar. Iframes, also eingebettete HTML-Dokumente innerhalb einer anderen Webseite, sind in ihrer Natur isoliert von der Hauptseite. Das bedeutet, dass man nicht einfach auf die Inhalte im Iframe zugreifen kann, insbesondere wenn sie von einer anderen Domain stammen. Dies macht das Tracking von Aktionen innerhalb eines Iframes, wie z.B. das Erreichen einer „Danke“-Seite nach einer Formularübermittlung, sehr schwierig.

Ein gängiges Problem ist es, zu erkennen, wann ein Nutzer eine bestimmte Seite im Iframe erreicht hat, ohne direkten Zugriff auf den Iframe-Inhalt zu haben. Das ist insbesondere bei Formularen und Conversion-Seiten relevant, die in einem Iframe eingebettet sind.

Optimale Lösung

Die optimale Lösung wäre direkt über den Drittanbieter das Tracking einzubinden. Bspw. indem der Drittanbieter ein Tracking-Event auslöst, sobald die „Danke“-Seite erreicht wird. Dies ist jedoch nicht immer möglich, da viele Drittanbieter keinen direkten Zugriff auf das Tracking-Setup des Kunden gewähren. Dennoch lohnt es sich vorab zu prüfen, ob eine direkte Integration möglich ist, da dies die zuverlässigste und einfachste Lösung darstellt.

Workaround: Überwachung der Iframe-Höhe

Da der direkte Zugriff auf den Inhalt des Iframes nicht möglich ist, müssen wir uns auf indirekte Methoden verlassen. Eine solche Methode ist die Überwachung der Iframe-Höhe. Die Idee dabei ist, dass sich die Höhe des Iframes ändert, wenn eine andere Seite geladen wird, wie z.B. eine „Danke“-Seite nach dem Absenden eines Formulars.

Hier kommt der Google Tag Manager (GTM) ins Spiel. Mit einem benutzerdefinierten HTML-Tag und JavaScript können wir die Höhe des Iframes überwachen und ein Event an den Datenlayer senden, wenn eine bestimmte Bedingung erfüllt ist.

Code für den Google Tag Manager

Der folgende Code überwacht die Höhe eines Iframes und löst ein Event im Datenlayer aus, wenn sich die Höhe in einem bestimmten Verhältnis zur anfänglichen Höhe ändert. Der Code kann im Google Tag Manager implementiert werden, um wichtige Conversions zu erfassen, die in einem Iframe eingebettet sind.

JavaScript!function(){
  const

  // START: CODE ANPASSUNG \\
  e=+{{ required_mobile_ratio }} / 100, // Mobile: Notwendiges Erfolgsverhältnis von Iframe Höhe bei Änderung zur Iframe Höhe zu Beginn
  t=+{{ required_tablet_ratio }} / 100, // Tablet: Notwendiges Erfolgsverhältnis von Iframe Höhe bei Änderung zur Iframe Höhe zu Beginn
  n=+{{ required_desktop_ratio }} / 100, // Desktop: Notwendiges Erfolgsverhältnis von Iframe Höhe bei Änderung zur Iframe Höhe zu Beginn
  a="{{ required_operator }}", // Erfolgsverhältnis muss größer oder kleiner sein. Möglich "smaller" oder "bigger"
  o="{{ required_iframe_selector }}", // Iframe CSS-Selector
  i="{{ required_data_layer_success_event_name }}", // DataLayer Event Name bei Erfolg
  // ENDE: CODE ANPASSUNG \\

  r="smaller"===a?"<":">",s=document.querySelector(o);if(s){const o=s.offsetHeight/window.innerHeight,a=[o];let c=function(){const o=window.innerWidth;return o<=768?e:o<=1024?t:n}(),l=new MutationObserver(e=>{e.forEach(e=>{if("attributes"===e.type&&("style"===e.attributeName||"height"===e.attributeName)){const t=s.offsetHeight/window.innerHeight,n=t/o;if(a.push(n),eval(`${n} ${r} ${c}`)){window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:i,iframeHeight:t,intialHeight:o,comparedHeightToIntialHeight:n,heightChanges:a}),console.log("Success event fired"),l.disconnect()}console.log({comparedHeightToIntialHeight:n})}})});l.observe(s,{attributes:!0,attributeFilter:["style","height"]}),window.addEventListener("resize",()=>{const e=function(){const o=window.innerWidth;return o<=768?e:o<=1024?t:n}();e!==c&&(c=e,console.log("Updated successHeightRatioThreshold:",c))})}
}();

Limitierungen des Ansatzes

Obwohl dieser Ansatz in vielen Fällen gut funktioniert, gibt es einige Limitierungen, die beachtet werden sollten:

1. Häufige Höhenänderungen: Wenn sich die Höhe des Iframes sehr oft ändert (z.B. durch dynamische Inhalte oder wiederholtes Nachladen), kann dies zu unerwarteten Ergebnissen führen. Es ist möglich, dass der Erfolg ausgelöst wird, obwohl die „Danke“-Seite noch nicht erreicht wurde.
2. Uneindeutige Höhenänderungen: In einigen Fällen kann es sein, dass die Höhenänderungen nicht eindeutig genug sind, um zuverlässig zu bestimmen, wann die „Danke“-Seite geladen wurde. Dies kann bei minimalen Layoutänderungen innerhalb des Iframes passieren.
3. Keine Kontrolle über den Iframe: Da dieser Ansatz darauf basiert, Änderungen in der Höhe zu erkennen, ist er anfällig für alle Faktoren, die die Höhe beeinflussen, wie z.B. CSS-Änderungen, JavaScript, etc.