resmio Logo
de
enitfr
Kostenlos testen

resmio » Hilfe » Integration » Google Tag Manager

Tracking von Conversions mit Google Tag Manager (GTM)

perm_identity
Wer kann diese Funktion verwenden?

Ab dem ULTIMATE-Tarif verfügbar.

  • 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
help

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:

  1. Ein GTM-Konto (mit vorinstalliertem Webcontainer)
  2. Ein GA4-Konto samt Property (mit vorinstalliertem GA4-Tag auf Webseite)
  3. Das resmio-Widget (als Script auf der Webseite eingebunden)
  4. 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.

info

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.

help

Ü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

shield

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.

help

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
    • party_size · Gruppengröße der Reservierung · Beispiel:4

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

help

Demo-Webseite

Demo-Webseite fürs GTM-Conversion-Tracking mit resmio

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

help

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:

  1. Öffne deinen GTM-Container (Arbeitsbereich)
  2. Klicke dann links in der Seitenliste auf Tags
  3. Erstelle über den Button Neu einen neuen Tag
  4. Wähle bei Tag-Konfiguration den Tag-Typ Benutzerdefiniertes HTML aus
  5. 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,
    party_size: e.data.party_size,
    promotion: e.data.promotion
  });
});
</script>
thumb_up

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.

help

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:

  1. Öffne deinen GTM-Container (Arbeitsbereich)
  2. Klicke dann links in der Seitenliste auf Trigger
  3. Erstelle über den Button Neu einen neuen Custom Event Trigger
  4. Wähle als Trigger-Typ Benutzerdefiniertes Ereignis aus
  5. Vergib einen aussagekräftigen Eventnamen und wähle „Alle benutzerdefinierten Ereignisse“ als Kondition fürs Auslösen aus
  6. 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:

  1. Klicke  links in der Seitenliste auf Tags
  2. Erstelle über den Button Neu einen neuen Tag
  3. Wähle bei Tag-Konfiguration den Tag-Typ Google Analytics aus
  4. Füge die GA4-Mess-ID aus deiner Property hinzu
  5. Wähle einen aussagekräftigen Ereignisnamen aus
  6. Verknüpfe den Custom-Tag nun mit dem passenden Trigger
  7. 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.

help

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
  • party_size · Gruppengröße der Reservierung · Beispiel:4

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

  1. … im GTM entsprechende Data-Layer-Variablen, die du mit den GA4-Events verknüpfst.
  2. … 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:

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

Variablen mit GA4-Tags verknüpfen

Data Layer 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:

  1. Klicke in GTM auf Tags
  2. Bearbeite einen beliebigen GA4-Tag
  3. 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}}
    4. Ereignisparameter: party_size hat den Wert {{DLV - party_size}}

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:

  1. Wechsele zu GA4 und dort auf Verwaltung > Datenanzeige > Benutzerdefinierte Definitionen.
  2. Klicke dann oben rechts auf den Button Benutzerdefinierte Dimension erstellen
  3. Vergib einen aussagekräftigen Dimensionsnamen sowie ggf. eine Beschreibung. Anwendungsbereich für unsere benutzerdefinierte Definition ist Ereignis / Event.
  4. 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
  5. Speichere deine benutzerdefinierte Dimension und wiederhole die Schritte für alle anderen Datenschichten.
info

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.

help

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:

  1. Wechsele mit einem Klick auf Vorschau in der Kopfleiste oben rechts in den Debug-Modus
  2. Gib die Webseite ein, auf der der GTM-Webcontainer und das resmio-Widget integriert sind
  3. Du solltest erfolgreich mit dem Tag-Assistenten verbunden sein (siehe Screenshot oben), andernfalls bitte die Einbindung des Webcontainers auf der Webseite überprüfen
  4. Löse die Signale im Reservierungswidget aus, beende den Tag-Assistenten wieder und prüfe abschließend, ob die Tags ausgelöst wurden
GA4 resmio Events tracken
  • 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.
thumb_up

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

help

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.

GA4 Demo Funnel

So geht’s:

  1. Rufe die entsprechende GA4-Property auf
  2. Klicke in der Seitenleiste links auf Explorative Datenanalyseund dann auf Explorative Trichteranalyse
  3. 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).
  4. Über Dimensionen kannst du den Funnel zum Beispiel nach der Gerätekategorie, Traffic-Quellen usw. segmentieren

Diese Themen könnten dich auch interessieren

expand_less