Button Tracking

Button-Tracking hilft, Benutzerinteraktionen zu analysieren, Konversionen zu verfolgen und die Website-Erfahrung zu optimieren. Mit JENTIS haben Sie mehrere Möglichkeiten Buttons zu tracken. Entweder über die CSS Klasse, oder über den Text im Button.

Variable erstellen

Um für den Trigger den inneren Text eines HTML-Elements auslesen zu können, müssen wir erst eine Variable anlegen. Keine Sorge, das ist ganz einfach. Klicken Sie dazu im Menü Server Side Manager auf den Menüpunkt “Variables“. Sie sehen dann folgenden Screen. Wählen Sie im Reiter “Client Side” den Punkt “Click Trigger Properties” aus.

Nun befüllen Sie die Felder – den Namen und die Gruppe können Sie frei wählen. Wichtig ist, dass das Feld “Element property” korrekt – auch in Groß- und Kleinschreibung befüllt ist.

Speichern Sie die Variable um sie gleich im Trigger verwenden zu können.

Trigger anlegen – Var  1

In der Variante 1 lesen wir den Text im Button aus, für den wir das Click-Tracking definieren wollen. Das ist praktisch für alle jene, die keinen direkten Zugang zum Website-Code haben. Wählen Sie im Tag Manager im Menü links unter Server-Side Manager “Triggers” aus. Klicken Sie auf den Button oben rechts und legen Sie einen neuen Trigger an. Vergeben Sie einen Namen für Ihren Trigger und optional auch eine Beschreibung. Wählen Sie für den Status “SELECTORACTION” aus und für die Action “Click“. Sie sind schon fast fertig – aber wichtig ist, dass Sie dann im Feld CSS Selector folgenden Text eingeben: “a, a *“. Damit legen Sie fest, dass Sie alle Text innerhalb eines a href-Tags oder verschachtelten a href-Tags suchen.

Trigger Konditionen – Var 1

Im Moment würde der Trigger noch alle a href-Tags ausgeben, daher müssen wir nun genauer spezifizieren, welche Links getriggert werden sollen. In unserem Beispiel triggern wir alle Buttons, in denen der Text “Kontakt” oder “Contact” vorkommt:

Dazu wählen Sie als Variable “Click Inner Text” – als Operator “contains” und als Value den Textstring “Kontakt”. Das heißt, der Trigger soll für alle Links aktiv sein, in denen der Text “Kontakt” enthält. Zusätzlich haben wir in dem Beispiel noch auf “OR” geklickt um eine weitere Bedingung zu stellen – nämlich dass der Trigger auch die englischen Variante mitnimmt. Speichern Sie Ihren Trigger!

Trigger anlegen – Var 2

In der alternativen Variante 2 lesen wir den Button nicht über den beinhaltenden Text, sondern über die Klasse, die ihm zugeordnet wurde. Dazu brauchen wir keine Variable anzulegen. Wir schauen einfach nach, welche einzigartigen CSS-Eigenschaften unser Button hat. In diesem Beispiel ist die id=”main_learnmore” – für einen bestimmen Button – und das verwenden wir auch gleich um es mit einer vorangestellten Raute in das Feld CSS Selektor einzutragen. In dieser Variante brauchen wir keine weiteren Trigger-Definitionen vornehmen.

Tag erstellen

Gehen Sie nun in der linken Menüleiste auf “Tags” , achten Sie darauf, dass der richtige Container ausgewählt ist und klicken Sie rechts oben auf “Add new tag”.

Wählen Sie dann das Tool aus, dem Sie den Tag hinzufügen wollen. In unserem Beispiel ist das GA4. Wählen Sie im folgenden Screen den Tag “Custom Event” aus und vergeben Sie im darunterliegenden Feld einen beliebigen Namen. In unserem Beispiel ist das “GA4-button-contact”. Klicken Sie rechts unten auf “Next”.

Im nächsten Screen müssen Sie nur noch bei Event name einen beliebigen Namen wählen, den Sie gut wiedererkennen können. Klicken Sie anschließend auf “Next”.

Tag und Trigger verknüpfen

Fast ist es geschafft – im nächsten Schritt müssen Sie nur noch den vorher angelegten Trigger mit dem Tag verknüpfen. Wählen Sie dazu den Trigger aus, den Sie zuvor angelegt haben:

Gehen Sie in die Publishing Menüpunkt um Ihr neues Button-Tracking zu testen, zu previewen und zu publishen. Mehr Info, wie man publiziert gibt es hier.