Inhaltsverzeichnis

resmio » Hilfe » Integration » Google Tag Manager

Tracking von Conversions mit Google Tag Manager (GTM)

Wer kann diese Funktion verwenden?

· Relevante Widget-Ereignisse über Google Tag Manager (GTM) tracken
· Sende Events / Conversions an GA4, Meta und Co.
· Werte den Erfolg deiner Marketing-Kampagnen aus

Los geht’s

Überblick

GTM Conversion Tracking über resmio Integration

Vorbereitungen fürs Conversion-Tracking über GTM

EXPERTEN-EINSTELLUNG Um den Erfolg deiner Online-Marketingkampagnen für beliebige Restaurants zu messen, haben wir grundlegende Fähigkeiten geschaffen, das Reservierungswidget von resmio über den Google Tag Manager (kurz: GTM) zu tracken.

resmio pusht dabei spezifische Events im Widget in den Data Layer.

Über im GTM gesetzte Trigger kannst du die verarbeiteten Signale beispielsweise zu Google Analytics (GA4) weiterreichen und so bspw. die Etappen vom Aufruf der Landingpage (bspw. Standortseite) über die erste Nutzerinteraktion mit dem Widget bis hin zur Reservierung nachverfolgen.

Folgende Vorbereitungen sollten getroffen sein:

Ein GTM-Konto (mit vorinstalliertem Webcontainer)
Ein GA4-Konto samt Property (mit vorinstalliertem GA4-Tag auf Webseite)
Das resmio-Widget (als Script auf der Webseite eingebunden)
GTM-Conversion-Tracking ist im resmio Konto aktiviert

GTM Conversation Tracking im resmio Konto aktivieren

GTM-Tracking ist standardmäßig deaktiviert, du kannst diese Funktion unter Einstellungen > Integrationen > Marketing einschalten. Agenturen wenden sich hierfür bitte direkt an ihre Restaurantkunden.

In eigener Sache: Um den Beitragsrahmen hier nicht zu sprengen, gehen wir im Folgenden nicht gesondert auf die Kontoerstellung von GTM und GA4 ein. Auch die Installation des GTM sowie GA4-Tags auf der Webseite wird hier nicht thematisiert. Ausführliche Anleitungen findest du unter den jeweiligen Links.

Überwachte Widget-Events

GTM resmio Tracking - Prozess veranschaulicht

Über postMessage kommuniziert das resmio-Widget (als eingebettetes iFrame) sicher mit der Webseite, auf der es eingebunden ist.

Immer wenn im Widget etwas passiert – z. B. ein Klick, Schrittwechsel oder eine abgeschickte Reservierung – sendet das Widget eine Nachricht (postMessage) an die Webseite.
Diese Nachricht wird dort vom Google Tag Manager empfangen, in den Data Layer geschrieben und kann dann z. B. in GA4 weiterverarbeitet werden.
Dadurch lässt sich das Widget verlässlich tracken, ohne direkt in den Widget-Code eingreifen zu müssen.

Derzeit senden wir folgende Events an GTM:

widget_interaction_started

Auslösen bei erster Nutzerinteraktion mit dem Widget (bspw. Tippen auf Reservierungszeit, Auswahl Gruppengröße, Kalenderaufruf)

reservation_step_2_started

Auslösen beim Wechsel in den Checkout-Bildschirm (Eingabe Kontaktdaten)

reservation_completed

Auslösen bei erfolgreicher Online-Reservierung

Datenschutz: Wir übermitteln keine personenbezogenen Daten an den Google Tag Manager, daher ist das Tracking der Widget-Ereignisse in unserem Set-up nach unserem Verständnis datenschutzkonform möglich.

An GTM übergebene Daten

resmio Widget pusht an GTM spezifische Daten

Wir übergeben alle oben genannten Events mit Zeitstempel an den Datalayer.

Folgende Daten geben wir grundsätzlich mit:

timestamp · Zeitstempel der Interaktion · Beispiel: 2025-12-05T12:23:35.430Z
facility_id · Indikator fürs jeweilige Restaurant · Beispiel: mein-restaurantname
promotion · Name der ausgewählten Angebotszeit · Beispiel: happy_hour

Du kannst diese Daten (optional) bspw. an GA4 zur Auswertung weitergeben.

Demo-Webseite

Wir haben den Google Tag Manager, GA4 und ein Muster-Widget auf unserer Demo-Webseite resmio Steakhouse (fiktives Restaurant) implementiert.

Alle technisch abgefangenen Widget-Events werden in unserem Set-up zusätzlich auch in der Browserkonsole geloggt.

Rechtsklick auf der Webseite > Untersuchen
Auf den Tab Console / Konsole wechseln
Die Widget-Signale auf der Webseite auslösen und Konsole beobachten

GTM-Tracking-Setup

1. Listener Tag in GTM

Im ersten Schritt müssen wir im GTM den sogenannten Listener-Tag einrichten.

Dessen Aufgabe besteht darin, dem Google Tag Manager mitzuteilen, auf bestimmte Ereignisse zu warten und beim Eintreten der vordefinierten Aktionen bestimmte Daten zu senden (etwa ans Analysetool GA4).

GTM mit resmio verbinden: Benutzerdefiniertes HTML Tag hinzufügen

So gehst du dabei vor:

Öffne deinen GTM-Container (Arbeitsbereich)
Klicke dann links in der Seitenliste auf Tags
Erstelle über den Button Neu einen neuen Tag
Wähle bei Tag-Konfiguration den Tag-Typ Benutzerdefiniertes HTML aus
Wähle einen aussagekräftigen Namen für den Tag und kopiere den nachfolgenden Code.


<script>
window.addEventListener('message', function(e) {
  if (!e.data || e.data.event !== 'resmio_widget_action') return;
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: e.data.step,       // 'widget_interaction_started', 'reservation_step_2_started', 'reservation_completed'
    timestamp: e.data.timestamp,
    facility_id: e.data.facility_id,
    promotion: e.data.promotion
  });
});
</script>

Tipp: Um ausgelöste Widget-Events in der Browserkonsole protokollieren zu lassen, füge zusätzlich console.log(e.data.step); hinzu.

GTM mit resmio verbinden: Code für den benutzerdefinierten HTML Tag kopieren

Der Code sollte wie auf dem Screenshot oben aussehen. Damit läuft der Listener ständig auf der Seite und fängt alle postMessage-Events vom Widget ab.

Als Trigger sollten alle Seiten vorausgewählt sein.

Vergiss bitte nicht, dein benutzerdefiniertes HTML-Tag zu speichern.

2. Custom Event Trigger und Tags

Jetzt benötigen wir für jeden Step in unserem Funnel einen dedizierten Custom-Event-Trigger.

In unserem Set-up benötigen wir insgesamt 3 Trigger für 3 benutzerdefinierte GA4-Tags, die wir darauffolgend noch mit den Auslösern verknüpfen.

widget_interaction_started

Auslösen bei erster Nutzerinteraktion mit dem Widget

reservation_step_2_started

Auslösen beim Wechsel in den Checkout-Bildschirm (Eingabe Kontaktdaten)

reservation_completed

Auslösen bei erfolgreicher Online-Reservierung

So gehst du dabei vor:

Öffne deinen GTM-Container (Arbeitsbereich)
Klicke dann links in der Seitenliste auf Trigger
Erstelle über den Button Neu einen neuen Custom Event Trigger
Wähle als Trigger-Typ Benutzerdefiniertes Ereignis aus
Vergib einen aussagekräftigen Eventnamen und wähle „Alle benutzerdefinierten Ereignisse“ als Kondition fürs Auslösen aus
Wiederhole Schritt 3 bis 5 bis du insgesamt drei Trigger hast

GTM mit resmio verbinden: Übersicht der Trigger

Wenn alle Trigger angelegt wurden, kannst du entsprechende Custom-Tags für GA4 (oder wahlweise Meta, TikTok usw.) erstellen und schließlich mit den Triggern im Google Tag Manager verknüpfen.

Wir skizzieren nachfolgend ein Set-up für Google Analytics 4.

So gehst du dabei vor:

Klicke links in der Seitenliste auf Tags
Erstelle über den Button Neu einen neuen Tag
Wähle bei Tag-Konfiguration den Tag-Typ Google Analytics aus
Füge die GA4-Mess-ID aus deiner Property hinzu
Wähle einen aussagekräftigen Ereignisnamen aus
Verknüpfe den Custom-Tag nun mit dem passenden Trigger
Wiederhole die Schritte für alle Events

So könnte dein fertiges Tracking-Set-up für GTM und resmio aussehen:

GTM mit resmio verbinden: Übersicht aller angelegten Custom Tags

Vergiss nicht, alle Änderungen an GTM zu pushen, damit sie wirksam werden. Klicke hierfür in der Kopfleiste oben rechts aufs Senden.

3. Data Layer Variablen anlegen (optional)

(Optionaler Schritt) Wir übergeben mit den Widget-Ereignissen zusätzliche Daten, die du bspw. an GA4 weiterreichen kannst.

timestamp · Zeitstempel der Interaktion · Beispiel: 2025-12-05T12:23:35.430Z
facility_id · Indikator fürs jeweilige Restaurant · Beispiel: mein-restaurantname
promotion · Name der ausgewählten Angebotszeit · Beispiel: happy_hour

Um die Daten für deine Auswertungen in GA4 zu verwenden, benötigst du…

… im GTM entsprechende Data-Layer-Variablen, die du mit den GA4-Events verknüpfst.
… benutzerdefinierte Definitionen (Custom Dimensions) in GA4, die die Event-Paramenter enthalten

Variablen im GTM anlegen

Data Layer Variablen fürs resmio Widget im GTM anlegen

So gehst du dabei vor:

Öffne deinen GTM-Container (Arbeitsbereich)
Klicke dann links in der Seitenliste auf Variablen
Erstelle über den Button Neu eine neue benutzerdefinierte Variable
Wähle als Variablentyp Datenschichtvariable aus
Trage nun folgende Werte ein: Name der Variable, z.B. DLV - facility_id, Name der Datenschichtvariable facility_id Speichere diese Variable.
Wiederhole die Schritte für die Datenschichtvariablen promotion und timestamp

Variablen mit GA4-Tags verknüpfen

Sobald die Variablen im Google Tag Manager angelegt wurden, musst du diese nur noch mit den korrespondierenden GA4-Tags verknüpfen (wie auf dem Screenshot oben illustriert).

In unserem beispielhaften Set-up verbinden wir die Datenschichtvariablen mit allen drei GA4-Tags.

So gehst du dabei vor:

Klicke in GTM auf Tags
Bearbeite einen beliebigen GA4-Tag
Füge zum jeweiligen GA4-Tag entsprechende Ereignisparameter hinzu:
1. Ereignisparameter: facility_id hat den Wert {{DLV - facility_id}}
2. Ereignisparameter: promotion hat den Wert {{DLV - promotion}}
3. Ereignisparameter: timestamp hat den Wert {{DLV - timestamp}}

Speichere die Änderungen und wiederhole die Schritte für die verbliebenen GA4-Tags.

Benutzerdefinierte Dimensionen in GA4 anlegen

Custom Dimensions in GA4 anlegen, um Widget-Daten empfangen und auswerten zu können

Zu guter Letzt benötigen wir für GA4 noch passende Custom Dimensions, damit Google Analytics sie speichern, auswerten und in Berichten anzeigen kann. Grund hierfür ist, dass GA4 unsere zusätzlichen Widget-Daten nicht out of the box tracken kann. Wir müssen GA4 diese Ereignisparameter erst beibringen.

So legst du benutzerdefinierte Dimensionen in GA4 an:

Wechsele zu GA4 und dort auf Verwaltung > Datenanzeige > Benutzerdefinierte Definitionen.
Klicke dann oben rechts auf den Button Benutzerdefinierte Dimension erstellen
Vergib einen aussagekräftigen Dimensionsnamen sowie ggf. eine Beschreibung. Anwendungsbereich für unsere benutzerdefinierte Definition ist Ereignis / Event.
Füge nun den jeweiligen Ereignisparameter aus dem GA4-Tag von GTM hinzu, achte hierbei unbedingt auf die korrekte Schreibweise (Groß-Kleinschreibung!). Beispiel: facility_id
Speichere deine benutzerdefinierte Dimension und wiederhole die Schritte für alle anderen Datenschichten.

Datenverfügbarkeit: Benutzerdefinierte Dimensionen erscheinen meist nicht sofort in Berichten von GA4. Es kann unter Umständen bis zu 24 Stunden dauern, bis alle Daten sichtbar sind.

4. GTM Tracking testen

Nach Abschluss der Einrichtung empfehlen wir, das Tracking im Google Tag Manager und GA 4 zu testen.

GTM mit resmio verbinden: Tracking über Debug-Modus testen

Nachdem du die Anpassungen an GTM gesendet hast:

Wechsele mit einem Klick auf Vorschau in der Kopfleiste oben rechts in den Debug-Modus
Gib die Webseite ein, auf der der GTM-Webcontainer und das resmio-Widget integriert sind
Du solltest erfolgreich mit dem Tag-Assistenten verbunden sein (siehe Screenshot oben), andernfalls bitte die Einbindung des Webcontainers auf der Webseite überprüfen
Löse die Signale im Reservierungswidget aus, beende den Tag-Assistenten wieder und prüfe abschließend, ob die Tags ausgelöst wurden

Rufe wahlweise die Debugview oder die Echtzeitbericht-Übersicht von Google Analytics 4 auf
Löse die entsprechenden Widget-Signale aus und prüfe in GA4, ob die Ereignisse entsprechend weitergegeben wurden
Die übergebenen Events sollten in GA4 nach wenigen Minuten auch unter Verwaltung > Ereignisse erscheinen. Sollte nach dem Testen nicht der Fall sein, prüfe unter Verwaltungen > Datenerhebung und -änderung > Datenfilter, ob der interne Traffic ausgeschlossen wird, und deaktiviere ggf. die Option vorübergehend.

Tipp: Markiere das Ereignis reservation_completed in GA4 als Schlüsselereignis, um deine Conversions in allen Berichten überwachen zu können.

5. Einfacher Funnel in GA4

Die Widget-Signale werden ordnungsgemäß von GTM an GA4 übermittelt?

Prima, mit diesen Daten kannst du nun bspw. über die Explorative Datenanalyse einen Funnel aufsetzen und so die einzelnen Schritte in der Nutzerinteraktion vom Page View bis hin zum Reservierungsabschluss nachverfolgen.

So geht’s:

Rufe die entsprechende GA4-Property auf
Klicke in der Seitenleiste links auf Explorative Datenanalyseund dann auf Explorative Trichteranalyse
Bearbeite in den Einstellungen > Schritte die angelegten Steps: Füge nacheinander alle Events hinzu (page_view, widget_interaction_started, reservation_step_2_started_reservation_completed).
Über Dimensionen kannst du den Funnel zum Beispiel nach der Gerätekategorie, Traffic-Quellen usw. segmentieren

Tracking von Conversions mit Google Tag Manager (GTM)

Überblick

Vorbereitungen fürs Conversion-Tracking über GTM

Überwachte Widget-Events

An GTM übergebene Daten

Demo-Webseite

GTM-Tracking-Setup

1. Listener Tag in GTM

2. Custom Event Trigger und Tags

3. Data Layer Variablen anlegen (optional)

Variablen im GTM anlegen

Variablen mit GA4-Tags verknüpfen

Benutzerdefinierte Dimensionen in GA4 anlegen

4. GTM Tracking testen

5. Einfacher Funnel in GA4

Diese Themen könnten dich auch interessieren

Reservierungen verwalten

Tischplan

iPad App

Telefonassistent einrichten

Google Business

Widget anpassen

Instagram

Widget-Installation

Benachrichtigungen

Gäste- und Feedbackmanagment