Iframe-Tracking

Zuletzt aktualisiert: 15. Juni 2025

Autor: Patrick Grundlach

Pfeil 2

Iframe-Tracking – Funktionsweise, Herausforderungen und Praxisbeispiele

1. Was ist Iframe-Tracking?

Iframe-Tracking bezieht sich auf die Implementierung von Tracking-Codes innerhalb von eingebetteten Iframes, um Nutzerinteraktionen auf Drittanbieter-Websites oder eingebetteten Inhalten zu erfassen. Ein Iframe (Inline Frame) ist ein HTML-Element, das eine separate Webseite oder Inhalte von externen Quellen auf einer Hauptseite anzeigt. Dies wird häufig bei Buchungssystemen, Ticketing-Seiten oder Widgets von Drittanbietern verwendet.

Da Iframes Inhalte aus einer anderen Domain laden, stellen sie eine Herausforderung für das Tracking dar. Die eingeschränkte Kommunikation zwischen der Hauptseite (Parent) und der Iframe-Seite (Child) erschwert die Übertragung von Daten wie Klicks, Scrolls oder Formularübermittlungen. Dies macht spezielle technische Lösungen erforderlich, um eine Verbindung zwischen den beiden Seiten herzustellen.

2. Technische Herausforderungen beim Iframe-Tracking

  • Same-Origin-Policy (SOP): Die SOP verhindert, dass Skripte auf der Hauptseite direkt auf Inhalte des Iframes zugreifen, wenn diese aus einer anderen Domain geladen werden. Dies macht es schwierig, Ereignisse wie Klicks, Formularübermittlungen oder Eingaben im Iframe zu verfolgen.
  • Datenübertragung zwischen Iframe und Hauptseite: Ohne spezifische Lösungen können keine Daten direkt zwischen der Hauptseite und dem Iframe ausgetauscht werden. Es ist daher notwendig, Techniken wie postMessage() zu verwenden.
  • Cookie-Einschränkungen (Third-Party-Cookies): Iframes von Drittanbieter-Domains setzen oft eigene Cookies. Mit der Einführung von Datenschutzrichtlinien (wie der DSGVO) und Browser-Updates (wie Safari’s ITP oder Chrome’s SameSite-Policy) ist die Verwendung von Third-Party-Cookies eingeschränkt.
  • Consent-Management: Wenn das Tracking im Iframe stattfindet, muss sichergestellt werden, dass das Consent-Management der Hauptseite auch für das Iframe-Tracking greift. Dies erfordert, dass der Consent-Status synchronisiert wird.
  • Eingeschränkte Sichtbarkeit der Iframe-Inhalte: Tracking-Tools wie der Google Tag Manager (GTM) haben keinen direkten Zugriff auf Inhalte im Iframe, es sei denn, der Iframe erlaubt explizit den Zugriff.

3. Technische Lösungen für Iframe-Tracking

Verwendung der postMessage()-Methode:
Die postMessage()-Methode ermöglicht die Kommunikation zwischen dem Iframe und der übergeordneten Seite. Sie kann genutzt werden, um Ereignisse wie Klicks, Scrolls oder Formularübermittlungen aus dem Iframe an die Hauptseite zu senden. Beispiel:

Code im Iframe (Child-Seite)

Sendet eine Nachricht an die Parent-Seite, wenn ein Button geklickt wird 

document.getElementById('submitButton').addEventListener('click', function() { window.parent.postMessage('form_submitted', '*'); });

Code auf der Hauptseite (Parent-Seite)

window.addEventListener('message', function(event) { if (event.data === 'form_submitted') { console.log('Das Formular im Iframe wurde abgeschickt.'); // Hier kann ein GTM-Datenlayer-Push erfolgen dataLayer.push({ 'event': 'iframe_form_submit' }); } });

Direkte GTM-Integration im Iframe:
Wenn Zugriff auf den Iframe besteht (z. B. bei einem Iframe aus der eigenen Domain), kann der Google Tag Manager direkt in den Iframe eingebunden werden. So können Ereignisse wie Klicks oder Formularübermittlungen direkt im Iframe erfasst und an GA4 oder andere Tools weitergeleitet werden.

Tracking über URL-Parameter:
Eine weitere Lösung besteht darin, Tracking-Parameter (z. B. utm_source, utm_medium, utm_campaign) in die URL des Iframes zu übergeben. Diese Parameter können dann von der Iframe-Seite ausgelesen und als Tracking-Daten an Analytics-Tools gesendet werden.

4. Praxisbeispiele

Case 1: Ticketbuchung auf einer externen Iframe-Seite (mit postMessage())

Szenario:
Ein Anbieter (z. B. ein Zirkus) verwendet auf seiner Hauptseite (www.zirkus.de) ein Iframe, das von einer externen Ticketplattform (tickets.zirkus.de) geladen wird. Um die Conversion zu messen, muss der Buchungsstatus (Bestätigung) im Iframe erkannt und an die Hauptseite zurückgegeben werden.

Herausforderung:
Da die Ticketplattform eine andere Domain nutzt, greift die Same-Origin-Policy. Die Hauptseite kann die Interaktionen im Iframe nicht direkt verfolgen.

Lösung:

  • Die Iframe-Seite sendet eine postMessage(), sobald die Buchung abgeschlossen ist.
  • Die Hauptseite erfasst die Nachricht und triggert ein GTM-Event.

Technische Umsetzung:

Iframe-Seite (tickets.zirkus.de)

window.addEventListener('load', function() { // Sende Nachricht an Parent, wenn die Buchungsbestätigungsseite geladen ist if (window.location.pathname.includes('/buchungsbestaetigung')) { window.parent.postMessage('booking_completed', '*'); } });

Hauptseite (www.zirkus.de)

window.addEventListener('message', function(event) { if (event.data === 'booking_completed') { console.log('Die Buchung wurde abgeschlossen.'); dataLayer.push({ 'event': 'booking_complete' }); } });

Case 2: Formular-Tracking in einem Iframe (mit direkter GTM-Integration)

Szenario:
Ein Formular wird in einem Iframe auf der Hauptseite eingebettet. Das Ziel ist es, Formulareinreichungen zu verfolgen.

Herausforderung:
Da das Formular innerhalb des Iframes liegt, können die Klick- oder Sende-Ereignisse nicht direkt von der Hauptseite verfolgt werden.

Lösung:

  • Direkte GTM-Integration im Iframe, da die Kontrolle über den Iframe besteht.
  • Das GTM-Skript wird auf der Iframe-Seite eingebettet.
  • Die Einreichung des Formulars löst ein Event im Iframe aus, das direkt an den GTM gesendet wird.

Technische Umsetzung:

Iframe-Seite (form.domain.de)

<script> // GTM-Container im Iframe (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXXXX'); </script> <form id="iframe-form"> <input type="text" name="email" placeholder="E-Mail"> <button type="submit">Abschicken</button> </form> <script> document.getElementById('iframe-form').addEventListener('submit', function() { dataLayer.push({ 'event': 'form_submit', 'formId': 'iframe-form' }); }); </script>

Fazit

Iframe-Tracking ist komplexer als herkömmliches Tracking, da technische Einschränkungen wie die Same-Origin-Policy und Datenschutzrichtlinien berücksichtigt werden müssen. Mit Methoden wie postMessage() oder direkter GTM-Integration können jedoch individuelle Lösungen geschaffen werden.

Empfehlung:

  • Wenn der Iframe unter eigener Kontrolle ist, sollte der GTM direkt im Iframe eingebunden werden.
  • Bei Drittanbieter-Iframes sollte postMessage() verwendet werden, um Ereignisse von der Iframe-Seite an die Hauptseite zu übergeben.
  • Eine saubere Synchronisierung des Consent-Managements ist unerlässlich.

Mit diesen Methoden lässt sich das Verhalten der Nutzer im Iframe genau verfolgen und für Marketinganalysen auswerten. Durch diese Techniken wird eine vollständige Datenerfassung auch auf eingebetteten Drittanbieter-Webseiten ermöglicht.

zurück zur Lexikon Übersicht