Im folgenden Beispiel bauen wir ein Conversion Tracking für den Klick auf einem Menüpunkt bei einer WordPress Seite ein.
In unserem Beispiel möchten wir alle Klicks die auf den Menüpunkt „Neu Hier?“ durchgeführt werden tracken.
Schritt 1 – Erstellung der Conversion bei Trackboxx
Wir rufen dafür über die Einstellungen (Zahnrad) die Übersicht der Webseiten auf und wählen bei der entsprechenden Webseite den Punkt „Ziele“ auf.
Hier fügen wir ein neues Zielvorhaben hinzu und geben diesem einen passenden Namen. In unserem Fall Klick „Neu Hier?“ – Hauptmenü.
Ist das Zielvorhaben erstellt haben wir nun das entsprechende Code-Snippet. Das wichtigste Element ist hier tatsächlich die ID im Script.
In unserem Artikel „Wie verwende ich das Conversion Tracking“ findest du hier nun die verschiedensten Methoden hier das Conversion Script zu integrieren. In unserem Fall erläutere ich hier nun das „OneClick“ Event. Das bedeutet wir tracken den Klick auf den Menüpunkt durch die eindeutige Kennzeichnung (CSS Class) des Menüpunktes.
Im Falle von WordPress ist es ja nun z.B. nicht ohne weiteres möglich unseren Conversion Code in das Menü einzutragen. aber wir können den Menüpunkt „einzigartig“ kennzeichnen und ihn somit problemlos tracken.
Schritt 2 – Hinzufügen einer CSS Class für den Menüpunkt
Als erstes rufst du im WordPress Admin über den Punkt Design – Menüs dein entsprechendes Menü auf.
Um hier gleich auch eine CSS Class hinzufügen zu können, musst du vorher eventuell noch diese Option freischalten. Klicke dafür ganz oben auf die Option „Ansicht anpassen“ und aktiviere die Checkbox „CSS Klassen“.
Nach Aktivierung haben wir nun beim entsprechenden Menüpunkt ein Eingabefeld für die CSS-Klasse und tragen hier in unserem Fall z.B. „neu-hier“ ein und speichern das Ganze.
Schritt 3 – Anpassung und Einbau des Conversion Codes
Nun nehmen wir uns unseren Conversion Code und passen diesen entsprechend an. Für die Einbindung via der OneClick gibt es ein festes Format. Auch diese Formate finden sich auf unserer Hauptübersicht zum Thema Conversion Tracking.
In den Code müssen wir unsere eindeutige CSS Klasse einfügen und unser finales Script sieht somit so aus:
<script type='text/javascript'>
document.querySelector('.neu-hier').addEventListener('click', () => {
trackboxx('trackGoal', 'WNUXTLZ2GT');
});
</script>Code-Sprache: HTML, XML (xml)Zusatzinformation! Grundsätzlich hat man die Option entweder eine CSS ID oder eine CSS Klasse für die eindeutige Kennzeichnung eines Menüpunktes oder eines Buttons zu nutzen. Bei WordPress direkt im menü ist nur die CSS Klasse möglich, daher verwenden wir hier im Script document.querySelector statt document.getElementById
Habt ihr z.B. eine CSS ID vergeben, würde der Code wie folgt aussehen:
<script>
document.getElementById('neu-hier').addEventListener('click', () => {
trackboxx('trackGoal', 'WNUXTLZ2GT');
});
</script>Code-Sprache: HTML, XML (xml)Wichtig. Euer Code hat natürlich eine andere trackgoal: ID und je nachdem was ihr als CSS-Klasse verwendet habt, muss auch diese den entsprechenden Namen aufweisen.
Schritt 4 – Einbau des Conversion-Codes in eure Seite
In unserem Fall möchten wir ja den Klick auf den entsprechenden Menüpunkt „Seitenweit“ tracken. Daher werden wir in unserem Fall den Code in den Footer der Seite einbringen.
Möchtet ihr einen Klick nur auf einer spezifischen Seite tracken, reicht es natürlich auch aus das Conversion-Script nur auf dieser Seite einzubinden.
Die Einbindung in den Footer geht bei WordPress natürlich mit den verschiedensten Methoden:
- Einbindung über ein Template + Pagebuilder
- Einbindung via Plugin z.B. „Header Footer Script“
- Einbindung über Settings im Theme oder Settings im Pagebuilder
- Einbindung über Child-Theme und functions.php
In unserem Fall nutzen wir bei der Webseite den Elementor und verwenden daher die Option „Custom Code“.
Wir setzen hier die Einstellung bzgl. der Location auf </body> End.
Wir speichern das Ganze und haben somit die Einbindung des Conversion Trackings erfolgreich abgeschlossen. Die Klicks auf den Button sollten nun bei den Zielvorhaben im Trackboxx Dashboard angezeigt werden.
