Trigger und Funnel Tracking | Big Data Insights

Zielseite und GTM-Grundlage.

Booking-Startseite: bookings.drivingcenterschweiz.com

/driving-center-safenwil/kurse - Driving Center Safenwil
/driving-center-sennwald/kurse - Driving Center Sennwald
/antischleuderschule-regensdorf/kurse - Antischleuderschule Regensdorf

Google beschreibt, dass Triggerfilter in Tag Manager auch regulaere Ausdruecke und CSS-Selektoren nutzen koennen. Fuer Klicks ist besonders der Operator matches CSS selector hilfreich.

Demo-Buchungsstrecke oeffnen Google-Hilfe zu CSS-Selektoren

Die Demo liegt unter /demo/ und bildet die wichtigsten Klassen und Pfade der echten Bookingseiten nach. Fuer GTM-Tests kannst du dieselben CSS-Trigger nutzen und bei URL-Regeln optional den Prefix /demo beruecksichtigen.

Empfohlener Funnel.

Der Funnel sollte aus Seitenaufrufen, Klicks und Formularschritten bestehen.

Funnel Start: Booking-Startseite besucht Nutzer landet auf bookings.drivingcenterschweiz.com/ und sieht die Auswahl der Standorte.
Standort / Kursseite gewaehlt Nutzer klickt auf eine Standort-Kursliste wie Safenwil, Sennwald oder Regensdorf.
Kursliste besucht Nutzer landet auf einer URL nach dem Muster /{standort}/kurse.
Kursauswahl geklickt Nutzer klickt in der Kurstabelle auf WAEHLEN.
Login-Weiche erreicht Nutzer sieht die Auswahl zwischen Anmeldung ohne Login und Anmeldung mit Login.
Anmeldung ohne Login gestartet Nutzer klickt auf Weiter zur Anmeldung ohne Login.
Formularschritte Nutzer durchlaeuft SARI Daten, Persoenliche Daten, Anmeldedaten, Gutschein und Weitere Angaben.
Abschluss / Buchung Finaler Absenden- oder Bestaetigungs-Schritt wird als Conversion gemessen.

CSS-Selektoren fuer GTM Trigger.

Diese Selektoren sind aus der Zielseite abgeleitet und sollten im GTM Preview-Modus validiert werden.

Wichtig: Nicht jede Regel wird an derselben Stelle eingetragen. CSS-Selektoren fuer Klicks gehoeren meistens in den Trigger bei Click Element matches CSS selector. URL-Regeln gehoeren in Page-View- oder DOM-Ready-Trigger. Select-Feld-Aenderungen gehoeren in das Custom-HTML-Listener-Tag, das anschliessend ein benutzerdefiniertes Event ausloest.

Funnel-Schritt	GTM Trigger	CSS-Selektor / Regel	Wo eintragen?	Eventname
Booking-Startseite besucht	Page View oder DOM Ready	`Page Path equals /` `Page Path equals /demo/`	Im Page-View- oder DOM-Ready-Trigger als URL-Bedingung.	`dc_booking_home_view`
Standort / Kursseite gewaehlt	Click - Just Links	`a[href="driving-center-"][href$="/kurse"], a[href="driving-center-"][href$="/kurse/"], a[href="antischleuderschule-"][href$="/kurse"], a[href="antischleuderschule-"][href$="/kurse/"]`	Im Klick-Trigger bei `Click Element matches CSS selector` als Wert eintragen. Alternativ robuster: `Click URL matches RegEx` mit dem Regex aus der Box unter der Tabelle.	`dc_location_select`
Kursliste besucht	Page View oder DOM Ready	`Page Path matches RegEx ^/(demo/)?(driving-center-[^/]+\|antischleuderschule-[^/]+)/kurse/?$`	Im Page-View- oder DOM-Ready-Trigger bei `Page Path matches RegEx`.	`dc_course_list_view`
Filter geaendert	Empfohlen: Custom Event Alternative: Click - All Elements	`#EventType-f0-i0` `select[id^="Products"][id$="-f0-i1"]` `#EventLocation-f0-i2`	In das Custom-HTML-Listener-Tag in `event.target.matches(...)`. Der GTM-Trigger selbst nutzt nur den Eventnamen `dc_course_filter_change`.	`dc_course_filter_change`
Suche ausgefuehrt	Click - All Elements	`button.dlms__submit[name="tx_eddaylight_readobjects[submitForm]"]`	Im Klick-Trigger bei `Click Element matches CSS selector`.	`dc_course_search_submit`
Kurs gewaehlt	Click - Just Links	`tr.dlms__cta a.btn-primary[href="/kurse/anmeldung"][href="occurrenceId"]`	Im Link-Klick-Trigger bei `Click Element matches CSS selector`. Alternativ mit `Click URL contains occurrenceId`.	`dc_course_select`
Login-Weiche erreicht	Page View oder DOM Ready	`Page URL contains /kurse/anmeldung` `Page URL contains loginSwitch`	Im Page-View- oder DOM-Ready-Trigger als URL-Bedingung.	`dc_login_choice_view`
Ohne Login weiter	Click - Just Links	`a[href="tx_eddaylight_survey"][href="controller%5D=Survey"]`	Im Link-Klick-Trigger bei `Click Element matches CSS selector` oder als `Click URL contains controller%5D=Survey`.	`dc_guest_checkout_start`
Formularseite erreicht	DOM Ready	`form[name="surveyForm"]` `#pageSelect`	In einem DOM-Ready-Trigger als Elementsichtbarkeit/Custom-HTML-Pruefung oder im dataLayer-Hilfsscript per `document.querySelector(...)`.	`dc_registration_step_view`
Naechste Formularseite	Click - All Elements	`form[name="surveyForm"] button[name="tx_eddaylight_survey[surveyActionId]"].dlms__submit`	Im Klick-Trigger bei `Click Element matches CSS selector` oder im dataLayer-Hilfsscript.	`dc_registration_next_click`
Finales Formular absenden	Click - All Elements	`form[name="surveyForm"] button[name="tx_eddaylight_survey[surveyActionId]"].dlms__submit` auf dem letzten Formularschritt	Im dataLayer-Hilfsscript, weil erkannt werden muss, ob es der letzte Schritt ist. Reiner Klick-Trigger erkennt nur den Button, nicht den Funnel-Zustand.	`dc_registration_submit_click`
Buchung abgeschlossen	DOM Ready / Page View auf Bestaetigungsseite	`Page URL contains /kurse/anmeldung` plus sichtbarer Bestaetigungsbereich oder Danke-Text	Im Page-View- oder DOM-Ready-Trigger als URL-/Textbedingung oder als eigenes dataLayer-Event auf der Bestaetigungsseite.	`dc_booking_complete`

Konfiguration im Google Tag Manager.

So werden die Trigger im GTM aufgebaut.

01

Click Variables aktivieren

In GTM links auf Variablen gehen, bei Integrierte Variablen auf Konfigurieren klicken und im Bereich Klicks diese Variablen aktivieren: Click Element, Click Classes, Click URL und Click Text.

02

CSS-Trigger anlegen

Bei Klick-Triggern Some Link Clicks oder Some Clicks nutzen und Click Element matches CSS selector eintragen.

03

GA4 Events senden

Pro Funnel-Schritt einen GA4 Event Tag erstellen und Parameter wie course_name, step_name und page_path uebergeben.

Wofuer sind Ereignisparameter?

Der Ereignisname beschreibt, was passiert ist. Ereignisparameter liefern die Details dazu. Ohne Parameter siehst du in GA4 zum Beispiel nur, dass dc_registration_step_view mehrfach ausgelost wurde. Mit Parametern erkennst du, welcher Formularschritt, welcher Standort und welcher Seitenpfad betroffen war.

Die Parameter traegst du im GA4-Ereignis-Tag unter Ereignisparameter ein. Links steht der Parametername, rechts der Wert oder eine GTM-Variable.

Ereignisparameter        Wert
step_id                   {{DLV - step_id}}
step_name                 {{DLV - step_name}}
booking_location          {{DLV - booking_location}}
course_name               {{DLV - course_name}}
page_path                 {{Page Path}}

Fuer Werte aus der dataLayer legst du in GTM zuerst Variablen vom Typ Datenschichtvariable an, zum Beispiel DLV - step_name mit dem Datenschichtvariablennamen step_name. Page Path ist eine integrierte Variable und kann unter Variablen -> Integrierte Variablen -> Konfigurieren aktiviert werden.

Woher kommt `Click Element`?

Click Element ist keine selbst angelegte Variable, sondern eine integrierte Variable von Google Tag Manager. Sie ist aber nicht immer automatisch sichtbar. Erst nach dem Aktivieren unter Variablen -> Integrierte Variablen -> Konfigurieren -> Klicks kann sie in Trigger-Bedingungen verwendet werden.

Fuer Standortlinks ist Click URL oft robuster als Click Element, weil der URL-Wert auch dann stabil bleibt, wenn innerhalb des Links ein Text oder ein Icon angeklickt wird. Beispiel fuer den Standort-Trigger:

Trigger-Typ: Click - Just Links
Ausloesen bei: Some Link Clicks

Click URL matches RegEx:
^https://bookings\.drivingcenterschweiz\.com/(driving-center-[^/]+|antischleuderschule-[^/]+)/kurse/?$

Welchen Wert trage ich beim Standort-Trigger ein?

Ja: a[href$="/kurse"] und a[href*="driving-center-"], a[href*="antischleuderschule-"] sind Werte fuer CSS-Selektoren. Das ist kein Trigger-Typ. Der Trigger-Typ bleibt Click - Just Links.

Wenn du im Trigger Click Element matches CSS selector nutzt, trage diesen kompletten Wert ein:

a[href*="driving-center-"][href$="/kurse"], a[href*="driving-center-"][href$="/kurse/"], a[href*="antischleuderschule-"][href$="/kurse"], a[href*="antischleuderschule-"][href$="/kurse/"]

Wenn du stattdessen Click URL matches RegEx nutzt, trage fuer die echte Booking-Seite diesen Wert ein:

^https://bookings\.drivingcenterschweiz\.com/(driving-center-[^/]+|antischleuderschule-[^/]+)/kurse/?$

Fuer die Demo unter /demo/ nutzt du diesen Wert:

^https://googletagmanager\.data4free\.com/demo/(driving-center-[^/]+|antischleuderschule-[^/]+)/kurse/?$

Warum steht bei Filteraenderungen `Custom Event`?

Google Tag Manager hat standardmaessig keinen Trigger-Typ namens Change fuer Select-Felder. In der Trigger-Auswahl siehst du bei Klicks nur Alle Elemente und Nur Links. Fuer echte Formularfeld-Aenderungen ist deshalb ein kleines Custom-HTML-Tag sinnvoll, das bei change ein dataLayer-Event sendet.

<script>
document.addEventListener("change", function (event) {
  if (event.target.matches("#EventType-f0-i0, select[id^='Products'][id$='-f0-i1'], #EventLocation-f0-i2")) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: "dc_course_filter_change",
      field_id: event.target.id,
      field_value: event.target.value,
      page_path: location.pathname
    });
  }
});
</script>

Danach legst du in GTM einen Trigger vom Typ Benutzerdefiniertes Ereignis an und traegst als Ereignisnamen dc_course_filter_change ein.

Wo wird das Custom HTML eingetragen?

Das Custom HTML wird in Google Tag Manager als Tag angelegt, nicht als Trigger. Dieser Tag installiert den Listener auf der Website. Erst wenn sich ein relevantes Dropdown aendert, schreibt der Listener das Event dc_course_filter_change in die dataLayer.

In GTM links auf Tags klicken.
Auf Neu klicken.
Tag benennen, zum Beispiel CHTML - Course Filter Change Listener.
Bei Tag-Konfiguration den Typ Benutzerdefiniertes HTML auswaehlen.
Den JavaScript-Code aus der Box unten einfuegen.
Bei Triggering einen Lade-Trigger waehlen, zum Beispiel DOM Ready auf Kursseiten.
Speichern und im Vorschau-Modus testen.

Tag-Typ: Benutzerdefiniertes HTML
Tag-Name: CHTML - Course Filter Change Listener

Triggering:
DOM Ready
Page Path matches RegEx:
^/(demo/)?(driving-center-[^/]+|antischleuderschule-[^/]+)/kurse/?$

Danach wird ein zweiter GTM-Baustein benoetigt: ein Trigger vom Typ Benutzerdefiniertes Ereignis mit dem Ereignisnamen dc_course_filter_change. Dieser Trigger kann dann ein GA4 Event Tag ausloesen.

Alle oder einige benutzerdefinierte Ereignisse?

Wenn der Trigger-Typ Benutzerdefiniertes Ereignis ist und oben bereits ein konkreter Ereignisname eingetragen wurde, zum Beispiel dc_registration_submit_click, waehlst du bei Diesen Trigger ausloesen bei in der Regel Alle benutzerdefinierten Ereignisse. Der Ereignisname begrenzt den Trigger bereits auf genau dieses dataLayer-Event.

Trigger-Typ: Benutzerdefiniertes Ereignis
Ereignisname: dc_registration_submit_click
Diesen Trigger ausloesen bei: Alle benutzerdefinierten Ereignisse

Einige benutzerdefinierte Ereignisse brauchst du nur, wenn du das Event zusaetzlich einschraenken willst, zum Beispiel nur fuer einen bestimmten Standort oder nur fuer eine bestimmte Seite.

Beispiel fuer zusaetzliche Einschraenkung:
booking_location equals driving-center-safenwil

Diese Events sollten als benutzerdefinierte Ereignisse angelegt werden, wenn sie aus dem dataLayer-Hilfsscript kommen: dc_course_filter_change, dc_registration_step_view, dc_registration_next_click, dc_registration_submit_click und dc_booking_complete.

Optionales dataLayer-Hilfsscript.

Wenn reine GTM-Klicktrigger fuer die Formularschritte nicht ausreichen, kann ein Custom-HTML-Tag im GTM auf allen Booking-Seiten laufen. Dieses Script liest URL, Standort, Formularseite und Klicks aus und schreibt klare Events in die dataLayer.

Wichtig: Vor Livegang im Preview-Modus testen und sicherstellen, dass keine personenbezogenen Daten wie Name, E-Mail oder Fuehrerscheinnummer an GA4 oder Pixel gesendet werden.

<script>
(function () {
  window.dataLayer = window.dataLayer || [];

  function getLocationSlug() {
    var match = location.pathname.match(/^\/(?:demo\/)?([^/]+)\/kurse/);
    return match ? match[1] : "";
  }

  function push(event, data) {
    window.dataLayer.push(Object.assign({
      event: event,
      page_path: location.pathname,
      booking_location: getLocationSlug(),
      funnel_name: "driving_center_booking"
    }, data || {}));
  }

  if (location.pathname === "/" || location.pathname === "/demo/") {
    push("dc_booking_home_view");
  }

  if (/^\/(demo\/)?(driving-center-[^/]+|antischleuderschule-[^/]+)\/kurse\/?$/.test(location.pathname)) {
    push("dc_course_list_view");
  }

  if (location.href.includes("loginSwitch")) {
    push("dc_login_choice_view");
  }

  var pageSelect = document.querySelector("#pageSelect");
  if (document.querySelector('form[name="surveyForm"]') && pageSelect) {
    push("dc_registration_step_view", {
      step_id: pageSelect.value,
      step_name: pageSelect.options[pageSelect.selectedIndex].text
    });
  }

  document.addEventListener("click", function (event) {
    var locationLink = event.target.closest('a[href$="/kurse"]');
    if (locationLink) {
      push("dc_location_select", {
        click_text: locationLink.textContent.trim(),
        click_url: locationLink.href
      });
    }

    var courseLink = event.target.closest('tr.dlms__cta a.btn-primary[href*="/kurse/anmeldung"][href*="occurrenceId"]');
    if (courseLink) {
      push("dc_course_select", {
        click_text: courseLink.textContent.trim()
      });
    }

    var guestStart = event.target.closest('a[href*="tx_eddaylight_survey"][href*="controller%5D=Survey"]');
    if (guestStart) {
      push("dc_guest_checkout_start");
    }

    var nextButton = event.target.closest('form[name="surveyForm"] button[name="tx_eddaylight_survey[surveyActionId]"]');
    if (nextButton) {
      push("dc_registration_next_click");
    }
  });
})();
</script>

Testing im Preview-Modus.

GTM Preview starten und zuerst https://bookings.drivingcenterschweiz.com/ verbinden.
Pruefen, ob dc_booking_home_view beim Besuch der Startseite erscheint.
Standort anklicken und dc_location_select kontrollieren.
Pruefen, ob dc_course_list_view beim Besuch der Kursliste erscheint.
Auf WAEHLEN klicken und dc_course_select kontrollieren.
Auf Weiter zur Anmeldung ohne Login klicken und dc_guest_checkout_start kontrollieren.
Formularseiten wechseln und dc_registration_step_view sowie dc_registration_next_click pruefen.
Auf dem letzten Demo-Formularschritt dc_registration_submit_click pruefen.
Finale Buchung nur in einer Testumgebung oder mit ausdruecklicher Freigabe testen.

Typische Fehler im Preview-Modus

Wenn dc_booking_complete mehrfach feuert, ist der Trigger oft zu breit. Nutze am besten ein benutzerdefiniertes Ereignis dc_booking_complete oder eine eindeutige Bestaetigungsseiten-URL statt nur Page URL contains /kurse/anmeldung.
Wenn dc_registration_submit_click bei jedem Klick feuert, fehlt eine Bedingung. Ein Trigger mit nur _event equals gtm.click ist zu breit. Nutze besser das benutzerdefinierte Ereignis dc_registration_submit_click.
Click Element funktioniert nur bei Klick-Events wie gtm.click oder gtm.linkClick. Es passt nicht zu einem DOM-Ready-Trigger mit _event equals gtm.dom.
Wenn du auf der Demo testest, muessen Hostname und Pfad zur Demo passen: googletagmanager.data4free.com und ein Pfad mit /demo/.

Funnel-Tracking mit CSS-Selektoren fuer alle Driving-Center-Bookingseiten.