iFrame-Verfolgung mit dem Google Tag Manager

Voraussetzungen

Zwei GTM-Container sind erforderlich:

GTM auf der Website des Kunden → Empfängt Ereignisse.
GTM im Zenchef-Modul (iFrame) → Sendet Ereignisse.

Laden Sie die .json-Variablen herunter und importieren Sie sie in beide Container, bevor Sie beginnen, verfügbar hier.

Zielsetzung

Aktivieren Sie die Verfolgung von Zenchef-Reservierungen in Google Analytics 4 und Google Ads oder einer anderen Tracking-Lösung mit Google Tag Manager.

Erstellen von GTM-Tags

Drei Tags sind erforderlich:

Benutzerdefiniertes HTML-Tag zum Senden von Ereignissen (innerhalb des GTM-Containers in Zenchef) → Sendet Ereignisse an die Website.
Benutzerdefiniertes HTML-Tag zum Empfangen von Ereignissen (innerhalb des GTM-Containers auf der Website des Kunden) → Erfasst von Zenchef gesendete Ereignisse.
Tracking-Tag (GA4 / Google Ads) (innerhalb des GTM-Containers auf der Website des Kunden) → Zeichnet Ereignisse im Tracking-Tool auf.

Konfigurieren der Tags

1️⃣ Sendetag (GTM Zenchef - iFrame)

Typ: Benutzerdefiniertes HTML
Code:

<script>
try {
var postObject = JSON.stringify({
event: 'reservation_completed',
variable: 'variable'
});
parent.postMessage(postObject, 'https://votresite.com');
} catch(e) {
console.log(e);
}
</script>

⚠️ Anpassen:

reservation_completed → Zu personalisierender Ereignisname (z.B. chose_date, chose_slot).
https://yourwebsite.com → Ersetzen Sie durch Ihre tatsächliche Website-Domain.
Fügen Sie bei Bedarf zusätzliche Variablen hinzu (stellen Sie sicher, dass sie mit denen aus der .json-Datei übereinstimmen).

Auslöser:

Typ: Benutzerdefiniertes Ereignis
Wählen Sie das entsprechende Ereignis aus der heruntergeladenen .json-Datei aus.

2️⃣ Empfangstag (GTM auf der Website des Kunden)

Typ: Benutzerdefiniertes HTML
Code:

<script>
(function(window) {
addEvent(window, 'message', function(message) {
try {
var data = JSON.parse(message.data);
var dataLayer = window.dataLayer || (window.dataLayer = []);
if (data.event) {
dataLayer.push({
'event': data.event,
'postMessageData': data
});
}
} catch(e) {}
});
function addEvent(el, evt, fn) {
if (el.addEventListener) el.addEventListener(evt, fn);
else if (el.attachEvent) el.attachEvent('on' + evt, function(evt) { fn.call(el, evt); });
else el['on' + evt] = function(evt) { fn.call(el, evt); };
}
})(window);
</script>

Auslöser:

Typ: Seitenansicht – Alle Seiten (um sicherzustellen, dass das Tag auf der gesamten Website aktiv ist).

3️⃣ GA4 / Google Ads Tracking-Tag (GTM auf der Website des Kunden)

Typ: GA4-Ereignis oder Google Ads Conversion-Tracking
Auslöser: Benutzerdefiniertes Ereignis

Ereignisname: Muss mit dem im ersten Tag definierten Namen übereinstimmen (z.B. reservation_completed).

Testen & Überprüfung

GTM-Vorschaumodus: Überprüfen Sie, ob Ereignisse korrekt gesendet und empfangen werden.
GA4-DebugView: Stellen Sie sicher, dass Ereignisse in Google Analytics angezeigt werden.
Google Tag Assistant: Überprüfen Sie, ob GTM die Tags korrekt auslöst.

Wichtig: Sobald die Tests erfolgreich sind, vergessen Sie nicht, Ihre GTM-Container (sowohl Zenchef als auch die Website des Kunden) zu veröffentlichen, um das Tracking im Produktivbetrieb zu aktivieren.

Zusammenfassung der durchzuführenden Aktionen:

Importieren Sie die .json-Variablen in beide GTM-Container.
Fügen Sie ein Sende-Tag in GTM Zenchef hinzu.
Fügen Sie ein Empfangs-Tag in GTM auf der Website des Kunden hinzu.
Konfigurieren Sie ein GA4 / Google Ads Tracking-Tag auf der Website des Kunden.
Testen und validieren Sie mit Debugging-Tools.
Veröffentlichen Sie Ihre GTM-Container.

Die Verfolgung von Zenchef-Reservierungen ist jetzt vollständig betriebsbereit!

Verknüpfung mit

Suche