Implementierung eines benutzerdefinierten Google Tag Manager-Triggers zur Erfassung von Formularübermittlungen innerhalb eines iFrames

In der dynamischen Welt des digitalen Marketings ist die Erfassung von Nutzerinteraktionen auf Websites entscheidend für die Leistungsanalyse und die Optimierung von Strategien. Vor kurzem stand ich vor einer interessanten Herausforderung: Ein Kunde musste die Formularübermittlungen innerhalb eines iframes auf einer Website eines Drittanbieters erfassen, auf die er keinen direkten Zugriff hatte. In diesem Beitrag beschreibe ich die Schritte, die ich unternommen habe, um dieses Problem mithilfe von Google Tag Manager (GTM) zu lösen.

Die Herausforderung

Der Kunde versuchte, den Standard-Trigger „Element-Sichtbarkeit“ in GTM zu verwenden. Dieser Ansatz schlug jedoch fehl, da Elemente innerhalb des iframes nicht erkannt werden konnten. Nach einigen Untersuchungen stellte ich fest, dass die Formularübermittlung innerhalb des iframes ein bestimmtes postMessage mit data.code = "success" bei erfolgreicher Formularübermittlung. Dies lieferte den notwendigen Ansatzpunkt für unsere Tracking-Lösung.

Entdeckung der „PostMessage“

Um die spezifische postMessage zu ermitteln, das vom iframe verwendet wurde, nutzte ich das Inspektor-Tool von Chrome. So bin ich vorgegangen:

1. Chrome-Inspector öffnen: Mit der rechten Maustaste auf die Seite klicken und „Inspect“ auswählen oder Ctrl+Shift+I , um die Chrome-Entwicklertools zu öffnen.
2. Zur Konsole wechseln: Navigieren Sie in den Entwicklertools zur Registerkarte „Konsole“.
3. Füge einen Ereignis-Listener hinzu: Um alle postMessage Ereignisse zu erfassen, habe ich das folgende Skript in die Konsole eingefügt: window.addEventListener('message', console.log); Dieses Skript protokolliert alle eingehenden postMessage Ereignisse in der Konsole.
4. Formular absenden: Anschließend habe ich mit dem Formular im Iframe interagiert und die Konsole beobachtet, um den postMessage enthaltenen data.code = "success".

Mit dieser Methode stellte ich fest, dass beim Absenden des Formulars ein postMessage mit den Schlüsselinformationen, die zum Erstellen eines benutzerdefinierten Ereignisses in GTM erforderlich sind.

Die Lösung

Um das Formular-Absende-Ereignis zu erfassen, habe ich in GTM ein benutzerdefiniertes HTML-Tag implementiert, das auf das spezifische postMessage aus dem Iframe abfängt. Hier ist die Schritt-für-Schritt-Anleitung:

1. Identifizieren der PostMessage: Beim Absenden des Formulars sendet der Iframe eine postMessage mit data.code = "success". Wir können diese Nachricht nutzen, um unser benutzerdefiniertes Ereignis in GTM auszulösen.
2. Erstellen eines benutzerdefinierten HTML-Tags: Fügen Sie in GTM ein neues Tag vom Typ „Benutzerdefiniertes HTML“ mit dem folgenden Skript hinzu: <script> window.addEventListener('message', function(event) { if (event.origin === "https://converto.simplebooking.it" && event.data.code === "success") { window.dataLayer.push({ "event": "simplebooking_success" }); } }); </script> Dieses Skript überwacht postMessage Ereignisse. Wenn es eine Nachricht von der spezifischen Quelle https://converto.simplebooking.it mit data.code „success“, überträgt es ein benutzerdefiniertes Ereignis (simplebooking_success) an die Datenebene.
3. Konfigurieren Sie das benutzerdefinierte HTML-Tag :
   • Auslöser: Stellen Sie den Auslöser auf „Alle Seiten“ ein, damit das Skript auf jeder Seite ausgeführt wird, auf der der Iframe geladen werden könnte.
   • Priorität der Tag-Auslösung: Stellen Sie sicher, dass dieses Tag vor allen zugehörigen Conversion-Tags ausgelöst wird, um das Ereignis korrekt zu erfassen.
4. Erstellen Sie einen benutzerdefinierten Ereignis-Trigger: Um auf das simplebooking_success Ereignis zu reagieren, erstellen Sie einen neuen Trigger:
   • Triggertyp: Benutzerdefiniertes Ereignis
   • Ereignisname: simplebooking_success
   • Dieser Trigger wird ausgelöst bei: Alle benutzerdefinierten Ereignisse
5. Konversions-Tags verknüpfen: Nachdem der benutzerdefinierte Ereignis-Trigger eingerichtet ist, können Sie nun Ihre Konversions-Tags (z. B. für Facebook und Google) mit diesem Trigger verknüpfen. Diese Einrichtung stellt sicher, dass die Konversions-Tags ausgelöst werden, sobald das Formularabsendungsereignis erkannt wird.

Abschließende Einrichtung

Nachdem Sie die oben genannten Schritte durchgeführt haben, sollte Ihre GTM-Konfiguration in etwa so aussehen:

• Benutzerdefiniertes HTML-Tag: Enthält das postMessage Listener-Skript.
• Benutzerdefinierter Ereignis-Trigger: Benannt als simplebooking_success.
• Conversion-Tags: So konfiguriert, dass sie beim simplebooking_success Ereignis ausgelöst wird.

Testen und Überprüfen

1. Vorschau-Modus: Verwenden Sie den Vorschau-Modus von GTM, um die Implementierung zu testen. Senden Sie das Formular innerhalb des iframe ab und prüfen Sie, ob das simplebooking_success Ereignis in der GTM-Debug-Konsole angezeigt wird.
2. Browser-Konsole: Öffnen Sie die Browser-Konsole und lösen Sie das postMessage Ereignis aus, um sicherzustellen, dass das Skript das Ereignis korrekt an die Datenebene übermittelt.
3. Tag-Auslösung überprüfen: Stellen Sie sicher, dass die Conversion-Tags wie erwartet ausgelöst werden, wenn das simplebooking_success Ereignis erkannt wird.

Wenn Sie diese Schritte befolgen, können Sie Formularübermittlungen innerhalb eines iframes mithilfe von Google Tag Manager erfolgreich nachverfolgen, auch wenn Sie keinen direkten Zugriff auf den Inhalt des iframes haben. Dieser Ansatz stellt sicher, dass Sie wertvolle Konversionsdaten erfassen und Ihre Marketingmaßnahmen effektiv optimieren können.