Du möchtest wissen, wie viele User:innen auf einen bestimmten Button auf einer bestimmten Unterseite geklickt haben? Mit Hilfe von GA4-Ereignis Tracking ist dies auf relativ unkomplizierte Art und Weise möglich. Dabei spielt es generell keine Rolle, ob es sich um einen handelsüblichen Button mit Link (Stichwort: a href) handelt oder um ein onclick element. In der folgenden Anleitung zeigen wir dir, wie du Button Link Klicks und Button Klicks (nicht immer dasselbe!) grundsätzlich tracken kannst.

Im ersten Beispiel gehen wir auf den Button Link Klick ein, im zweiten Beispiel auf den Button Klick.

Erstellung eines geeigneten Triggers für Button Link Tracking

Um einen geeigneten Trigger für das Tracken eines bestimmten Button Links erstellen zu können, ist es wichtig, den zu trackenden Button genau zu analysieren und festzustellen, wie der Trigger überhaupt aussehen kann.

Im folgenden Beispiel möchten wir die Klicks auf den Button „Unsere GA4-Pakete“ auf https://www.sea-coaching.de/ga4-pakete/ tracken:

Screenshot: Button Link Tracking: Button für Beispiel 1

Mit Analyse des Buttons ist die Untersuchung des Elements aus Programmiersicht gemeint. Unter Verwendung des Browsers Chrome bewegen wir den Mauszeiger über den zu analysierenden Button und machen anschließend einen Rechtsklick. Danach klicken wir auf „Untersuchen“:

Screenshot: Button Link Tracking: Untersuchung des Buttons für Beispiel 1

Folgendes wird nun angezeigt:

Screenshot: Devtools: Untersuchung des Buttons für Beispiel 1

Entscheidend ist das folgende Element bzw. der folgende Code:

<a class="et_pb_button et_pb_button_0 et_pb_bg_layout_dark" href="#GA4-Pakete">Unsere GA4-Pakete</a>

Wir entnehmen diesem Element, dass der Button

  1. die Klasse (class) et_pb_button et_pb_button_0 et_pb_bg_layout_dark,
  2. die Ziel-URL #GA4-Pakete (als Anchor-Link) und
  3. den Linktext Unsere GA4-Pakete hat.

Alle drei Bestandteile des Buttons können wir hernehmen, um einen geeigneten Trigger zu erstellen.

Anmerkung: Da der Button über einen Linktext und eine Ziel-URL verfügt, handelt es sich hierbei logischerweise um einen Button mit Link (-> Button Link Tracking)!

Wir gehen nun in den Arbeitsbereich des Google Tag Managers (im richtigen Container natürlich!) und begeben uns in die Trigger-Ebene:

Screenshot: GTM Arbeitsbereich: Trigger-Eberne

Danach klicken wir auf Neu und wählen den Trigger-Typ „Nur Links“ aus:

Screenshot: Button Link Tracking: Trigger-Typ Nur Links
  1. Bei Diesen Trigger auslösen bei: wählen wir Einige Klicks auf Links.
  2. Bei Diesen Trigger auslösen, wenn ein Ereignis eintritt und all diese Bedingungen erfüllt sind wählen wir bei der ersten Bedingung im ersten Feld Click Classes aus. Für das zweite Feld wählen wir enthält und ins dritte Feld tragen wir et_pb_button et_pb_button_0 et_pb_bg_layout_dark ein.
  3. Bei der zweiten Bedingung wählen wir im ersten Feld Click URL aus. Für das zweite Feld wählen wir enthält und ins dritte Feld tragen wir #GA4-Pakete ein.
  4. Bei der dritten Bedingung wählen wir im ersten Feld Click Text aus. Für das zweite Feld wählen wir enthält und ins dritte Feld tragen wir Unsere GA4-Pakete ein.
  5. Bei der vierten Bedingung wählen wir im ersten Feld Page Path aus. Für das zweite Feld wählen wir beginnt mit und ins dritte Feld tragen wir /ga4-pakete/ ein, zumal wir ausdrücklich nur die Button Link Klicks auf der Unterseite https://www.sea-coaching.de/ga4-pakete/ tracken möchten.

Der fertige Trigger, dessen Name individuell gewählt werden kann, sieht nun wie folgt aus:

Screenshot: Finaler Trigger für das Button Link Tracking beim Beispiel 1

Anmerkung: Sollte es auf der Unterseite /ga4-pakete/ keinen zweiten Button geben, der dieselbe Class, dieselbe Ziel-URL und/oder denselben Linktext hat, reichen zwei Bedingungen aus, wobei die Bedingung „Page Path beginnt mit /ga4-pakete/“ mit einer der drei anderen kombiniert werden kann.

Grundsätzlich ist es überaus ratsam, jedem Button mit Link auf einer Internetseite eine unique Link Class zu geben. In diesem Fall reicht die Bedingung „Click Classes enthält x“ aus. (x = Name der Link Klasse / a class)

Tag-Erstellung für Button Link Tracking

Der Tag für unser erstes Beispiel ist sehr schnell erstellt.

  1. Wir gehen in die Tag-Ebene und klicken auf Neu.
  2. Wir wählen den Tag-Typ Google Analytics: GA4-Ereignis aus.
  3. Bei Konfigurations-Tag wählen wir unsere individuelle Google Analytics GA4-Konfiguration aus.
  4. Im Feld Ereignisname tragen wir einen passenden Ereignisnamen ein. In unserem Bespiel verwenden wir click_button_ga4pakete. Dieser Ereignisname wird später auch in der GA4-Property unter „Ereignisse“ angezeigt.
  5. Wir wählen den zuvor erstellten Trigger aus.

Der fertige Tag für unser Beispiel zum Button Link Tracking sieht wie folgt aus:

Screenshot: Finaler Tag für das Button Link Tracking beim Beispiel 1

Wir können nun die Richtigkeit des Button Link Trackings beispielsweise im GTM Preview Mode überprüfen. Wie die Überprüfung der korrekten Erstellung von neuen Triggern und Tags funktioniert, zeigen wir euch im zweiten Beispiel, damit es in dieser Anleitung nicht zu viele Doppelungen gibt. 😉

Erstellung eines geeigneten Triggers für Button Klick Tracking

Für das zweite Beispiel erstellen wir auf rato-digital.de vorübergehend eine Testunterseite /test/ mit einem onclick element.

Screenshot: Onclick element: Button auf Testseite

Wir fahren mit unserem Mauszeiger über den Button „Click Here“ und machen einen Rechtsklick. Danach untersuchen wir das Element:

Screenshot: Devtools: Untersuchung des Buttons für Beispiel 2

Entscheidend ist das folgende Element:

<button onclick="window.location='kontakt';" value="Click Here" class="et_pb_button et_pb_button_0 et_pb_bg_layout_light">Click Here</button>

Für die Erstellung eines geeigneten Triggers für unser Button Klick Tracking können wir zwei Bestandteile hernehmen:

  1. Click Classes = et_pb_button et_pb_button_0 et_pb_bg_layout_light
  2. Click Text = Click Here

Wir begeben uns wieder in die Trigger-Ebene im GTM-Arbeitsbereich und klicken auf Neu. Da wir es nun mit einem Button Klick zu tun haben (nicht mit einem Button Link Klick!), wählen wir unter „Klick“ statt „Nur Links“ nun Alle Elemente aus:

Screenshot: Button Klick Tracking: Trigger-Typ Alle Elemente
  1. Bei Diesen Trigger auslösen bei: wählen wir Einige Klicks auf Links.
  2. Bei Diesen Trigger auslösen, wenn ein Ereignis eintritt und all diese Bedingungen erfüllt sind wählen wir bei der ersten Bedingung im ersten Feld Click Classes aus. Für das zweite Feld wählen wir enthält und ins dritte Feld tragen wir et_pb_button et_pb_button_0 et_pb_bg_layout_light ein.
  3. Bei der zweiten Bedingung wählen wir im ersten Feld Click Text aus. Für das zweite Feld wählen wir enthält und ins dritte Feld tragen wir Click Here ein.
  4. Bei der dritten Bedingung wählen wir im ersten Feld Page Path aus. Für das zweite Feld wählen wir beginnt mit und ins dritte Feld tragen wir /test/ ein.

Der fertige Trigger, dessen Name individuell gewählt werden kann, sieht nun wie folgt aus:

Screenshot: Finaler Trigger für Button Klick Tracking (Beispiel 2)

Tag-Erstellung für Button Klick Tracking

Auch der Tag für unser zweites Beispiel ist sehr schnell erstellt.

  1. Wir gehen in die Tag-Ebene und klicken auf Neu.
  2. Wir wählen den Tag-Typ Google Analytics: GA4-Ereignis aus.
  3. Bei Konfigurations-Tag wählen wir unsere individuelle Google Analytics GA4-Konfiguration aus.
  4. Im Feld Ereignisname tragen wir einen passenden Ereignisnamen ein. In diesem Bespiel verwenden wir click_button_test. Dieser Ereignisname wird später auch in der GA4-Property unter „Ereignisse“ angezeigt.
  5. Wir wählen den zuvor erstellten Trigger aus.

Der fertige Tag für unser Beispiel zum Button Klick Tracking sieht wie folgt aus:

Screenshot: Finaler Tag für Button Klick Tracking (Beispiel 2)

Überprüfung des neuen Button Klick Trackings im GTM Debug Mode

In unserem zweiten Beispiel überprüfen wir nun die Richtigkeit des neuen Tags zum Button Klick Tracking.

  1. Im GTM Arbeitsbereich klicken wir oben rechts auf In Vorschau ansehen.
  2. Bei Connect Tag Assistant to your site tragen wir in unserem Fall https://www.rato-digital.de/test/ ein
  3. Nun klicken wir im Debug Mode auf den Button Click Here und schauen uns das Ergebnis im Tag Assistant Tab an:
Screenshot: Test im GTM Debug Mode: Button Klick Tag feuert nach Klick auf "Click Here"

Da alle Bedingungen für unsere Firing Triggers erfüllt wurden, konnte unser Test über den GTM Debug Mode erfolgreich abgeschlossen werden! Yippieeeeeh!

Screenshot: Button Klick Tag fired: Details

Anmerkungen zum Beitrag „GA4-Ereignis Tracking: Button Link Tracking und Button Klick Tracking“

Diese detaillierte Anleitung zum Thema „GA4-Ereignis Tracking: Button Link Tracking und Button Klick Tracking“ wurde am 28.07.2022 erstellt und veröffentlicht. Wir möchten darauf hinweisen, dass Google in der Zukunft Änderungen an den Benutzeroberflächen von Google Tag Manager, GA4, Google Tag Assistant und Co. vornehmen könnte. Wir gehen jedoch davon aus, dass selbst dann diese Schritt-für-Schritt-Anleitung sehr hilfreich bleiben wird, wenn es in nächster Zeit zu einigen Änderungen an den Interfaces kommen sollte.

Bei Fragen, Anmerkungen, Problemen und Co. könnt ihr, wie immer, gern unsere Kommentarfunktion nutzen. Oder uns gleich direkt kontaktieren. Wir helfen euch gern!