Kann man iframes tracken?

Fast jeder Online Marketer hat sich schon einmal daran die Zähne ausgebissen: iframe-Tracking. Eine Werbekampagne ist geplant, die Landingpage ist super und eigentlich ist alles in trockenen Tüchern. Und dann bemerkt man, dass das Buchungsformular eigentlich ein eingebundenes Tool ist und Conversions nicht einfach regulär über Formularabsendungen gemessen werden können.

Die Frustration ist berechtigt, aber die Hoffnung soll daran nicht zugrunde gehen: Man kann iframes nämlich meistens sehr wohl tracken. Eben mal mehr, mal weniger genau. In diesem Artikel zeige ich dir 6 Wege, wie du das schaffst.

Typische Fallstricke beim iframe-Tracking

Falls du dir jetzt denkst «Sag mir doch einfach den richtigen / besten Weg» muss ich dich enttäuschen, den gibt es leider nicht. Ob, wie und wie tief ein iframe getrackt werden kann, hängt nämlich (wie so oft bei Tracking) von der individuellen Architektur, und der Technik dahinter, ab:

• Ist das iframe same origin (also von deiner eigenen Seite aus eingebettet) oder cross origin (stammt von einem Drittanbieter)?
• Kannst du den Code des iframe verändern (lassen) und in welchem Umfang?
• Wie ist das iframe aufgebaut und was verändert sich konkret bei einer Interaktion?

Je nach Antwort kann die Conversionmessung von «mindestens so verlässlich wie dein übriges Tracking» bis zu «Wir können Proxy und Soft Conversions als schwaches Signal für einen Abschluss verwenden» rangieren.

Denn eigentlich sind iframes kein Teil deiner Seite, sondern eine komplett eigene Seite mit eigenem DOM und Data Layer. Clientseitiges Tracking ist meistens darauf angewiesen, DOM-Änderungen, Events oder Data-Layer-Signale auf der Seite zu erfassen. Bei Cross-Origin-iframes ist genau dieser Zugriff stark eingeschränkt. Entsprechend könnte das iframe für deinen Tag Manager genauso gut ein eigener Tab sein, auf den du für die Conversion abspringst.

Meine Optionen, dieses Problem zu umgehen, sind in absteigender Komplexität geordnet. Am besten arbeitest du dich also in absteigender Reihenfolge durch diese Möglichkeiten durch.

Same-Origin-iframes

Wenn das iframe von deiner eigenen Webseite stammt, und einfach von einer anderen Unterseite eingebunden wird, ist direktes Tracking möglich. Ob das der Fall ist, kannst du überprüfen, indem du das HTML untersuchst und überprüfst, ob der Hostname mit deiner eigenen Seite übereinstimmt.

Dieses iframe stammt von Google Data Studio, ist also Cross Origin

Wenn das der Fall ist, gibt es keinen Grund zur Sorge. Du kannst dein Tracking wie gewohnt einrichten. Das Einzige, worauf du dabei achten musst, ist dass nicht zwei Seiten «laden». Ansonsten zeigt dein Analytics fehlerhafte, doppelte Pageviews an und verfälscht deine Auswertungen.

Das lässt sich allerdings einfach umgehen. Am einfachsten dadurch, dass du den Trigger deines Basis-G-Tag modifizierst und die Unterseite des iframes ausschliesst. Ansonsten gibt es hier nicht viele Besonderheiten.

Cross-Origin-iframes

Nicht alle Cross-Origin-iframes sind gleich kompliziert. Generell kann man die Optionen hier in vier verschiedene Fälle unterteilen:

Fall 1 – Namenhafte Drittanbieter-iframes: Wenn deine Conversion auf Brevo, Calendly oder einem ähnlich etablierten Tool stattfindet, stehen die Chancen gut, dass bereits saubere Event-Daten zur Parent-Seite übermittelt werden. Am einfachsten googlest du hierfür den Namen deines Anbieters und suchst die spezifische Tracking-Seite: Meistens findest du ein detailliertes Tutorial für genau deinen Fall.

Fall 2 – Der Anbieter erlaubt die Einbindung deines GTM-Snippets: Dieser Fall ist fast so einfach, als wäre dein iframe same-origin. Du kannst deinen GTM-Container einbinden und das Tracking funktioniert genau gleich, als wäre es deine eigene Seite. Hier musst du nur überprüfen, ob die Double-Page-View-Problematik, die oberhalb bereits beschrieben ist, zutrifft. Falls ja, kannst du sie genauso korrigieren. Bei Meta und manchen anderen Empfängern musst du zusätzlich darauf achten, dass die Domain des iframe in der Liste der «trusted hostnames» aufgenommen wird, damit der Event Manager die Events akzeptiert. Bei Google Analytics ist dies allerdings nicht notwendig.

Fall 3 – Dein GTM kann nicht eingebunden werden, aber du hast Kontakt zu den Entwicklern / Codeanpassungen sind möglich: In diesem Fall lassen sich Daten über postMessage an die Hauptseite schicken, und dort für einen Data-Layer-Push verwenden. Dies kann z.B. so aussehen (dieses JavaScript muss in das iframe eingefügt werden, nicht auf deiner Seite):

window.parent.postMessage({
  type: 'gtm_event',
  payload: {
    event: 'terminbuchung', // Event-Namen hier eintragen
    // Eigene Parameter
    param: 'wartung', // Eigene Parameter, z.B. business_unit: 'wartung'
  }
}, 'https://deineseite.ch'); // dient nur der Verifizierung

In deinem Tagmanager kannst du dann ein kurzes JS innerhalb nutzen, um die postMessage zum Custom Event zu machen, beispielsweise über ein Event-Listener HTML-Tag in deinem Tag Manager:

<script>
window.dataLayer = window.dataLayer || [];

window.addEventListener('message', function (e) {
  if (e.origin !== 'https://iframe-domain.com') return;        // Absender prüfen (schützt vor schädlichen Nachrichten)
  if (!e.data || e.data.type !== 'gtm_event' || !e.data.payload) return; // Struktur der Nachricht prüfen

  window.dataLayer.push({
    event: e.data.payload.event, // Löst einen Custom Event namens 'terminbuchung' aus
    // Eigene Parameter
    param: e.data.payload.param, // Fügt die bestehenden Event-Parameter hinzu
  });
});
</script>

Danach benötigst du nur mehr einen Trigger, der auf das Custom Event feuert:

Fall 4 – Wenn keine der drei Optionen zutrifft: Sollte allerdings keiner dieser drei Fälle möglich sein, endet die Möglichkeit sauber «hard conversion» zu tracken hier und die letzte Möglichkeit ist die Einrichtung von Proxy-Conversions, die zumindest eine tiefergehende Interaktion mit dem iframe messen, ohne genau verifizieren zu können, was im iframe passiert ist. Das ist nicht ideal, aber – zum Beispiel für Google Ads – zumindest ein halbwegs aussagekräftiges Signal, mit dem der Algorithmus arbeiten kann.

Proxy Conversions mit iframes

An dieser Stelle lohnt es sich, das iframe genauer unter die Lupe zu nehmen: Was passiert bei einem Abschluss? Verändert sich das iframe? Falls ja, wie?

Eines der Best-Case-Szenarios ist beispielsweise, wenn sich beim Screen-Wechsel innerhalb des iframes die Grösse verändert. Das iframe zeigt zu Beginn einen grossen Kalender und mehrere Eingabefelder, schrumpft aber auf der Bestätigungsseite auf einen Bruchteil der Höhe.

Wenn diese Veränderung nicht nur innerhalb des iframes passiert, sondern sich direkt auf die Grösse der Einbettung vererbt, kann das nämlich mit einem Event Listener überwacht werden:

<script>
(function() {
  var iframe = document.getElementById('[ID des iframe]'); // Hier die ID des iframes eintragen. Alternativ auch CSS-Klasse mit querySelector möglich

  if (!iframe) return;

  var lastHeight = iframe.getBoundingClientRect().height;

  function checkHeight() {
    var currentHeight = iframe.getBoundingClientRect().height;

    if (currentHeight < lastHeight - 1) {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: 'terminbuchung', // Event-Namen hier eintragen
        // Eigene Parameter
        param: 'wartung', // Eigene Parameter, z.B. business_unit: 'wartung'
      });
    }

    lastHeight = currentHeight;
  }

  if (typeof ResizeObserver !== 'undefined') {
    new ResizeObserver(checkHeight).observe(iframe);
  } else {
    setInterval(checkHeight, 500);
  }
})();
</script>

Ähnlich wie das Resize-Event funktioniert dieser Mechanismus für alle Veränderungen, die auf der Parent-Page passieren. Sollte bei einem Klick in das iframe die Seite verschwimmen oder das Scrollen gesperrt werden, lässt sich ein ganz ähnlicher Event Listener dafür schreiben.

Wenn alle Stricke reissen

Sollte sich auf deiner Seite bei einer Interaktion mit dem iframe allerdings gar nichts verändern, bleibt eine letzte Möglichkeit. Vorneweg: Es ist ein sehr schwaches Signal und funktioniert auf Smartphones fast gar nicht – wenn es also möglich ist deine Kampagne auf Desktop-Geräte auszurichten, würde ich es dir empfehlen.

Effektiv wird hier getrackt, wenn die Maus die übergeordnete Seite verlässt und das iframe in den Fokus rutscht:

<script>
(function() {
  var iframe = document.getElementById('[ID des iframe]'); // Hier die ID des iframes eintragen. Alternativ auch CSS-Klasse mit querySelector möglich

  if (!iframe) return;

  window.addEventListener('blur', function() {
    setTimeout(function() {
      if (document.activeElement === iframe && !document.hasFocus()) {
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
          event: 'terminbuchung', // Event-Namen hier eintragen
          // Eigene Parameter
          param: 'wartung', // Eigene Parameter, z.B. business_unit: 'wartung'
        });
      }
    }, 0);
  });
})();
</script>

Damit kannst du zumindest zu einem bestimmten Grad Personen identifizieren, die wahrscheinlicher einen Abschluss vorgenommen haben, als die Kohorte, bei denen dieses Event nicht stattgefunden hat.

Problem gelöst?

Wie du siehst, ist iframe-Tracking selten ein klares Schwarz oder Weiss, aber fast immer gibt es einen gangbaren Weg. Von der sauberen Hard Conversion bei Same-Origin-Einbettungen über postMessage und Data-Layer-Pushes bis hin zu Proxy-Signalen als letztem Strohhalm. Mit etwas Geduld lässt sich für die allermeisten Fälle eine brauchbare Lösung finden.

Wichtig ist nur, dass du ehrlich bleibst, welche Aussagekraft dein Signal hat. Eine verlässliche Conversion ist Gold wert, ein schwaches Proxy-Signal ist immer noch besser als gar keine Daten… solange du es als das behandelst, was es ist, und deine Auswertungen entsprechend einordnest.

Und wenn du nicht sicher bist, welches Signal bei deinem Setup belastbar ist oder falls du den ganzen Trackingaufbau lieber in erfahrene Hände abgeben möchtest: Melde dich einfach. Über das Formular unten kannst du einen unverbindlichen Rückruf anfordern oder direkt Kontakt aufnehmen. Gemeinsam finden wir auch für dein iframe eine Lösung.