Click Element in GTM: eine sehr nützliche Variable

Hier haben wir eine der integrierten Klickvariablen in Google Tag Manager, die auf den ersten Blick wenig nützlich wirken kann.

Vor allem, wenn du versucht hast, sie anhand des GTM-Vorschaumodus zu verwenden, und es nicht funktioniert hat.

Das ist normal, denn dieser Modus kann bestimmte Verständnisfehler anzeigen die dich in die Irre führen können, wenn du dich nicht richtig informierst.

Deshalb möchte ich in diesem Artikel etwas ausführlicher über diese Variable sprechen, die uns mehr als einmal aus der Patsche helfen kann.

Allerdings gibt es einen etwas technischeren Teil -den mit den CSS-Selektoren-. Ich werde nicht auf die fortgeschritteneren Möglichkeiten der Funktion eingehen, sondern nur auf die häufigsten Anwendungsfälle, in denen ich sie eingesetzt habe.

Aber fangen wir von vorne an.

Was die Click-Element-Variable in GTM ist: Definition

Nun, sie ist eine Variable, die uns das Element zurückgibt, auf das ein Nutzer klickt während er auf der Website navigiert.

Allein anhand des Namens hattest du das wahrscheinlich schon vermutet, aber nur zur Bestätigung.

Diese Variable erscheint, wenn ein bestimmter Auto-Listener von GTM aktiv ist, was nicht immer der Fall ist. Wenn wir mit einem neuen Container beginnen, ist er tatsächlich nicht aktiv, aber keine Sorge: Du wirst gleich sehen, dass die Aktivierung extrem einfach ist.

Wenn dieser Listener aktiv ist und ein Nutzer auf einen Link oder ein Element unserer Website klickt, werden Informationen zu diesem Klick an den Data Layer gesendet. Konkret diese Werte:

• gtm.element
• gtm.elementClasses
• gtm.elementTarget
• gtm.elementUrl
• gtm.elementId

Du kannst das in der Vorschau prüfen:

Das Gute daran ist, dass du auf jeden dieser Werte zugreifen kannst über vordefinierte Variablen in GTM, wie ich dir gleich erkläre.

Noch ein Hinweis: Alle diese Werte sind Textstrings, außer gtm.element, das ein Objekt ist.

Wie ich in der Einleitung sagte, kann es passieren, dass wir beim Betrachten seiner Eigenschaften in der Vorschau gelegentlich etwas wie das hier sehen:

Und nein, trotz dessen, was du dort siehst, ist es kein String, sondern ein Objekt.

Ein Objekt, das alle Attribute des Elements zurückgibt, zum Beispiel:

• Href: die URL (wenn es ein Link ist; bei einem anderen Element nicht)
• Title
• Text des Elements

Sie werden in der Vorschau nicht angezeigt, sind aber zugänglich falls wir sie benötigen.

Ich weiß nicht, ob du anhand der bisherigen Erklärung schon eine Vorstellung von den Möglichkeiten dieser Variable hast, aber falls nicht, zeige ich dir ein paar davon.

Wichtigste Anwendungsfälle

Derzeit gibt es zwei Hauptszenarien, in denen Click Element für mich sehr nützlich war:

Das erste ist, wenn du Klicks auf ein oder mehrere Elemente deiner Website messen möchtest die keine ID und keine Klasse haben.

Das ist der offensichtlichste Einsatz und derjenige, den ich in diesem Artikel als Beispiel ausführlicher zeige.

Das zweite ist, wenn du den Klick auf ein Element messen musst das mehrere Unterelemente enthält.

Denk an einen In-den-Warenkorb-Button in einem Ecommerce, bei dem häufig ein div einen span mit dem Symbol und einen weiteren span mit dem Buttontext umschließt.

Und natürlich möchtest du den Klick messen, wenn der Nutzer auf irgendeines davon klickt.

Ohne so stark ins Detail zu gehen wie im vorherigen Fall, erkläre ich dir später, wie.

Wie man die Variable verwendet

Jetzt, da wir wissen, worum es geht, erkläre ich dir, wie du diese Variable aktivierst, damit du sie verwenden kannst.

Aktivierung der Variable

Als Erstes aktivierst du sie in GTM.

Dazu gehst du zu Variablen > Integrierte Variablen und aktivierst sie. Wenn du schon dabei bist, aktiviere auch alle anderen Klickvariablen, denn sie sind ziemlich nützlich:

Nur das reicht nicht, denn der Listener, über den wir am Anfang gesprochen haben, wird ausgeschaltet sein.

Aktivierung des Listeners

Ihn in Gang zu setzen ist aber so einfach wie das Erstellen eines Triggers für Link-Klicks oder Klicks auf beliebige Elemente:

Allein durch das Erstellen beginnt der Listener zu arbeiten.

Und um das zu prüfen, reicht es:

1. Den Vorschaumodus aktivieren.
2. Zur Website gehen.
3. Auf irgendeinen Link oder irgendein Element klicken, je nachdem, welchen Trigger wir erstellt haben.

Danach kannst du die Variable so funktionieren sehen wie auf dem Bild am Anfang:

Gut, nachdem ich dir die ganze Theorie erklärt habe, kommen wir zur Praxis.

Die Click-Element-Variable von GTM verwenden

Hier siehst du, wie du die Variable auf die beiden Anwendungsfälle anwendest, die ich am Anfang erwähnt habe.

#1. Menülinks ohne ID oder Class

Sag mir, dass das nicht häufig vorkommt: Du willst messen, wie viele Klicks auf einem oder mehreren Elementen deiner Website stattfinden, und stellst dann fest, dass sie weder eine ID noch irgendeine Klasse haben, die du nutzen kannst.

Und ja, du könntest IT bitten, sie hinzuzufügen, und warten.

Oder du könntest Click Element noch heute verwenden.

Wenn du dich für den zweiten Weg entscheidest, findest du hier ein Beispiel, wie du vorgehen kannst.

1. Das richtige CSS-Attribut für den Trigger auswählen

Ich gehe davon aus, dass du die vordefinierten Klickvariablen von GTM bereits aktiviert und mindestens einen Click-Element- oder Click-Link-Trigger erstellt hast.

Wenn das so ist, finden wir als Erstes den CSS-Selektor des Elements heraus, dessen Klick wir tracken möchten.

Du hast verschiedene Möglichkeiten. Hier sind zwei.

1.1 Den CSS-Selektor mit dem Elementinspektor von Chrome herausfinden

Für diese Methode ist es empfehlenswert, zumindest grundlegende Kenntnisse in CSS und HTML zu haben.

Eigentlich sind solche Kenntnisse für Digital Analytics generell sinnvoll. Je früher du sie dir aneignest, desto besser.

Das System ist jedenfalls einfach:

1. Mit der rechten Maustaste auf das Menüelement klicken, das wir tracken möchten.
2. Im Kontextmenü von Chrome "Untersuchen" auswählen, damit sich der Inspektor öffnet.
3. Mit der rechten Maustaste auf das entsprechende HTML-Tag klicken (es wird ein "a"-Tag sein) und "Selektor kopieren" auswählen.

Fertig, alles erledigt.

1.2 Den CSS-Selektor mit einer Chrome-Erweiterung herausfinden

Wenn du keinerlei technischen Hintergrund hast und dich die vorherige Lösung verwirrt, kannst du diese Chrome-Erweiterung verwenden (zum Herunterladen auf das Bild klicken):

Sie kann dir dabei helfen, die Elemente auszuwählen, die dich interessieren:

Es ist eine freemium, mit kostenpflichtigen Tarifen und Google-Registrierung. Persönlich bevorzuge ich deshalb die vorherige Methode, aber wenn du keine Ahnung von HTML hast, kann sie dir helfen.

1.3 Testen

Unabhängig davon, welche der beiden Methoden du verwendet hast, solltest du prüfen, ob wir wirklich das ausgewählt haben, was uns interessiert.

Und nur das, was uns interessiert.

Zur Kontrolle füge ich im Elementinspektor mit dem kopierten Selektor eine Klasse hinzu, indem ich rechts auf das "+"-Symbol klicke, so:

Das kann zum Beispiel color: red !important oder etwas Ähnliches sein wie background: red !important.

Etwas Auffälliges, das beim Prüfen der Website stark hervorsticht und mir zeigt, was ich ausgewählt habe. So sehe ich, ob ich ausgewählt habe, was ich will, und nur das, was ich will.

In diesem Fall sehe ich, dass mein Selektor nur einen der drei Menülinks auswählt. Ich muss den Selektor also leicht anpassen, um alle drei zu erfassen.

Hier gibt es keine Tricks. Vielleicht ist jetzt ein guter Zeitpunkt, sich diese CSS-Grundlagen anzueignen, falls du sie noch nicht hast…

In meinem Fall gehe ich von:

#footer-container-main > div > div:nth-child(2) > div.col.col-md.block.block-toggle.block-iqitlinksmanager.block-iqitlinksmanager-1.block-links.js-block-toggle > div > ul > li:nth-child(1) > a

Zu:

footer-container-main > div > div:nth-child(2) > div.col.col-md.block.block-toggle.block-iqitlinksmanager.block-iqitlinksmanager-1.block-links.js-block-toggle > div > ul > a

Ich habe also die Referenz auf das erste Listenelement entfernt und bekomme beim Testen Folgendes:

Das zeigt mir, dass es der Selektor ist, den ich gesucht habe, und ich kann weitermachen.

Wichtig: dieser Selektor ist sehr schlecht optimiert. Man könnte ihn verfeinern und sehr, sehr viel einfacher machen, aber ich wollte zeigen, dass es nicht so kompliziert ist, einen funktionierenden zu finden, selbst wenn du nur ganz geringe HTML-Kenntnisse hast.

2. Trigger erstellen

Mit dem kopierten richtigen Selektor öffnen wir GTM und gehen zu Trigger > Neu und ich erstelle einen wie diesen:

Erklärung der einzelnen Felder:

• Name: da es sich um den Typ Link Click handelt, beginne ich immer mit "LC -".
• Wird ausgelöst bei: "Einige Link-Klicks". Logisch, wir wollen, dass er nur dann ausgelöst wird, wenn ein Nutzer auf die Links im Footer-Menü klickt.
• Variable: Click Element, über die wir hier sprechen.
• Abgleich: es ist interessant zu wissen, dass der Typ "entspricht CSS-Selektor" nur bei dieser integrierten Variable oder bei "Form Element" erscheint. Bei keiner anderen vordefinierten.
• Wert: ich füge den Textstring ein, den ich im vorherigen Schritt kopiert und getestet habe.

Wir speichern.

3. Das GTM-Tag erstellen

Da wir in diesem Fall ein Klickereignis tracken möchten, gehen wir zu Tags > Neu und wählen ein "GA4-Ereignis".

Wir konfigurieren es so:

Ich erkläre es dir:

GA4-Konfigurations-Tag: ich wähle das allgemeine, in dem ich die Tracking-ID habe. Falls du es aus irgendeinem Grund nicht hast (was machst du dann bei Click Element?), erstelle es zuerst.

Ereignisname: der Name, den du in deinem GA4 sehen wirst. Mein einziger Rat hier: Achte auf die Benennung und halte sie konsistent mit dem Rest deiner Ereignisstruktur.

Parameter: dieser Punkt ist wichtig. Ich füge den "link text" hinzu, weil ich so die Klicks auf die einzelnen Menülinks unterscheiden werde.

Wenn ich ihn nicht hinzufügen würde, hätte ich ein Ereignis, das die Klicks auf alle Menülinks zusammenzählt, könnte aber nicht segmentieren und die Anzahl für jeden einzelnen sehen.

Vergiss allerdings nicht, die benutzerdefinierte Dimension in GA4 zu erstellen, wenn du die Daten in Berichten auswerten möchtest:

Trigger: wir wählen den, den wir gerade erstellt haben:

Nachdem das Tag gespeichert ist, müssen wir nur noch prüfen, ob es wie erwartet funktioniert.

4. Test

Wir müssen sicherstellen, dass alles sowohl auf GTM-Ebene als auch auf Analytics-Ebene richtig funktioniert, also prüfen wir beides.

GTM-Vorschau

Wir aktivieren den Vorschaumodus, gehen zur Website und klicken auf die Links.

Wenn alles gut gelaufen ist, sehen wir, dass das Tag dann ausgelöst wird, wenn es soll:

Wichtig: möglicherweise siehst du in der Vorschau bei jedem Klick auf die Links zwei Link-Click-Ereignisse, so wie bei mir:

Das liegt sehr wahrscheinlich daran, dass du, wie ich, das Tracking ausgehender Klicks in der erweiterten Messung von GA4 aktiviert hast.

Das ist tatsächlich kein Problem, denn das Tag wird nur bei einem der beiden Zwillingsklicks ausgelöst und dadurch wird nur ein Ereignis an Analytics gesendet, was korrekt ist.

Hier siehst du, dass es beim anderen nicht ausgelöst wird:

Wir verlassen GTM vorübergehend.

DebugView in GA4

Wir öffnen unsere GA4-Property und gehen zu Verwaltung > DebugView.

Und klicken erneut auf die Website-Elemente, die ich tracken möchte.

Dann sollten wir ungefähr Folgendes sehen:

Das zeigt uns, dass wir die Ereignisse korrekt erfassen.

Um zu prüfen, ob der Parameter gesendet wird, klicken wir auf das Ereignis und dann auf den entsprechenden Parameter. Sein Wert wird aufgeklappt:

Alles scheint korrekt zu sein, aber denk daran: Wenn du keine benutzerdefinierte Dimension hast, die den Wert dieses Parameters erfasst, kannst du seine Daten in den Berichten nicht sehen, egal wie sehr diese Ansicht sie anzeigt.

Verstanden?

Dann müssten wir nur noch den GTM-Container veröffentlichen um die Klicks der Nutzer zu erfassen.

#2. Klicks auf gruppierte Elemente

Kommen wir zum zweiten häufigsten Anwendungsfall.

Sieh dir dieses Beispiel eines In-den-Warenkorb-Buttons an:

Das ist sein HTML-Code:

Wie man sieht, besteht die Struktur aus einem button der zwei i mit dem Symbol und dem Text gruppiert.

Wenn ich die GTM-Vorschau aktiviere und auf den Button klicke, erhalte ich je nachdem, wo genau ich klicke, Folgendes (wenn ich auf das Symbol klicke):

Oder das hier (wenn ich auf den Text klicke):

Auch wenn du es nicht lesen kannst, sieht man, dass es unterschiedlich ist.

Ich möchte aber natürlich Klicks auf jedes der Elemente, aus denen der Button besteht als einen einzigen Klick tracken.

Dann habe ich zwei Lösungen:

• Die einfache: in GTM drei Regeln mit drei verschiedenen Ereignissen und drei verschiedenen Triggern erstellen, einen für jedes Element.
• Die gute: Click Element und einen Trigger wie diesen verwenden:

Wenn du "Entspricht CSS-Selektor" auswählst und als Wert diesen Selektor eingibst:

• Die Klasse des Buttons (".add-to-cart").
• Und die seiner Kindknoten (".add-to-cart *").

Werden auch Klicks auf irgendeinen Bereich des Buttons (Symbol, Text) erfasst.

Das ist gut, oder?

Ja, aaaaber…

Empfehlungen

Die Verwendung von Triggern mit CSS-Selektoren birgt ein Risiko.

Vor allem, wenn du den Code der Website nicht selbst verwaltest.

Der Grund?

Einfach: Das Entwicklungsteam kann jederzeit eine Änderung am Code vornehmen, durch die dein Selektor das gewünschte Element nicht mehr erfasst. Das ist wahrscheinlicher bei Websites, die ständig aktualisiert werden.

In geringerem Maß kann dir das aber auch durch ein Update des Themes oder eines Plugins in deinem CMS passieren.

Ist Click Element mit dieser Konfiguration also nicht nützlich?

Doch, sehr sogar. Ich möchte nur, dass du dir seines größten Nachteils bewusst bist.

Auf der anderen Seite, und für die eher technisch Versierten, solltest du wissen, dass die Entwicklerkonsole deutlich mehr Informationen über diese Variable vom Typ Objekt liefert.

Um sie zu sehen, musst du nur die Konsole öffnen und "dataLayer" eingeben:

Nun navigierst du zum Element und klappst alle Werte auf:

Das Bild zeigt dir nur ein paar, aber es sind sehr viele.

Ab hier liegt es an dir und JavaScript, auf noch einige weitere Möglichkeiten zuzugreifen, zum Beispiel den Elternknoten zu sehen:

Und seine Elternknotenklasse abrufen mit gtm.element.parentElement.className über eine GTM-Data-Layer-Variable:

Oder auch gtm.element.firstChild.id verwenden, um nach demselben Verfahren auf die ID des ersten Kindknotens zuzugreifen.

Fazit

Click Element ist wahrscheinlich die leistungsstärkste vordefinierte Klickvariable in GTM.

Sie ist anfangs auch am schwierigsten richtig zu verwenden.

Aber sie lohnt sich, denn in bestimmten Szenarien rettet sie uns das Leben.

Nun, diese Aussage ist vielleicht etwas übertrieben, aber zumindest spart sie uns Zeit.

Ich hoffe, dass du mit diesen kleinen Grundlagen in deinen Projekten Nutzen daraus ziehen kannst.