Was wir zum tracken von Buttonklicks brauchen
Neben dem angesprochenen Pagebuilder Elementor benötigen wir zusätzlich den kostenlosen Google Tagmanager. Mit dem Google Tagmanager ist man ohne Programmierkenntnisse in der Lage, sogenannte Tags bei bestimmten Ereignissen bzw. Triggern automatisch auszulösen, ohne in den Quellcode der eigenen Webseite eingreifen zu müssen.
In diesem Blogpost gehe ich davon aus, dass der Google Tagmanager Container bereits auf deiner Webseite installiert ist.
Ist das noch nicht erfolgt, erkundige dich, wie du den Tagmanager auf deiner Webseite einbinden kannst.
Mit WordPress ist das recht einfach möglich. Meine Empfehlung ist, das kostenlose Plugin GTM4WP und das kostenpflichtige Datenschutzplugin Borlabs Cookie zu verwenden.
Achtung, tracke nicht zu viele Buttons!
Es ist sehr verlockend jeden Buttonklick zu tracken. Fokussiere dich lediglich auf dein Ziel, also was genau möchtest du erreichen und welche Buttonklicks sind diesbezüglich wichtig. Ansonsten läuft man Gefahr die Übersicht der erfolgten Klicks
Um zu wissen, was sonst noch benötigt wird, ist es wichtig, sich klar zu machen, was man mit dem tracken eines Buttonklicks erreichen möchte.
Zum Beispiel kann man ein Custom Event auslösen, z. B. über das Facebook Pixel, das Pinterest Tag, LinkedIn Tag, TikTok etc.
Oder aber man löst eine Google Ads Conversion aus, oder man baut damit eine Remarketingliste auf.
Auch denkbar ist das reine „sichtbar“ machen, welche Buttons auf welcher Position der Webseite geklickt werden.
Es kann durchaus sein, dass ein Button zwar viel geklickt wird, aber nur wenige gewünschte Conversions stattfinden.
Ein anderer Button hingegen viel weniger geklickt wird, aber im Verhältnis zu mehr Conversions führt. Eine solche Erkenntnis ist „Gold“ wert. Ein solches Signal kann man prima nutzen, um die Conversionrate zu erhöhen.
Den Pagebuilder Elementor technisch auf die Buttonklicks vorbereiten
Es gibt einige Möglichkeiten, Klicks zu tracken. Gute und weniger gute.
Eine sehr einfache, aber nicht so gute Wahl ist es, mit dem Google Tagmanager den Buttontext als Trigger, also Auslöser zu verwenden.
Sprich wird ein Button geklickt, dessen Buttontext z. B. Download ist und der Google Tagmanager einen Buttontext Trigger verwendet, kann es vermehrt zu falschen oder nicht gewünschten Trackings kommen.
Weiterhin ist es so nicht möglich, 2 Buttons die den gleichen Buttontext haben, zu unterscheiden. So könnte man nicht unterscheiden, welcher Button öfters geklickt wird.
Die bessere Variante ist, die von Elementor bereitgestellte Button ID zu verwenden.
Der Google Tagmanager kann diese dann als Click-ID eindeutig erkennen und passende Trigger mit dem gewünschten Ereignis auslösen.
Damit die Button ID als Variable für den Tagmanager sichtbar wird, muss folgender Code, z. B. im Customizer von WordPress, wie im Screenshot zu sehen unter dem Punkt „Zusätzliches CSS“ eingefügt werden.
Folgenden CSS Code kopieren und in WordPress unter Design > Customizer > Zusätzliches CSS einfügen, danach speichern bzw. auf Veröffentlichen klicken.
/** Elementor Button Fix for Tag Manager **/
.elementor-button-content-wrapper{
pointer-events: none;
}
.elementor-button span{
pointer-events: none;
}
Einem Button eine eindeutige ID zuweisen
Nun kommt der Punkt, an dem man einem Button eine bestimmte ID zuweisen sollte.
Verwende logische und eindeutige Button ID's
Damit du bereits an der ID erkennen kannst, um welchen Button, bzw. Button Art es sich handelt, solltest du dir eine Neindeutige und logische Namenskonvention ausdenken.
Ich verwende gerne folgende Regel: „BTN“ steht für Button getrennt mit einem – und dann folgt ein eindeutiges Wort, z. B. Anfrage.
Daraus ergibt sich dann die Button ID „BTN-anfrage“. So erkenne ich direkt, um welchen Button es sich handelt. Wenn man mehrere gleiche Buttons auf einer Seite verwendet, kann man zusätzlich fortlaufende Zahlen einsetzen.
Zum Beispiel: „BTN-anfrage1“. Das wäre dann der erste Anfragebutton auf einer Seite.
Diese eindeutigen IDs müssen jetzt im passenden Elementorfeld „Button ID“ eingefügt werden.
Passenden Button Klick Trigger im Google Tagmanager definieren
Jetzt den Google Tagmanager öffnen und in der linken Spalte auf Variablen klicken.
Rechts oben auf Konfigurieren klicken und im darauffolgenden Fenster die Click ID aktivieren.
Nun folgt ein passender Trigger. Dieser soll nur dann auslösen, wenn die passende bzw. die korrekte Click ID (in Elementor die selbst vergebene Button-ID des Button Widgets) vom User der Webseite geklickt wurde.
Dazu wechselst du in der linken Spalte zum Punkt Trigger und erstellst einen neuen Trigger mit einem Klick oben rechts auf „Neu“.
Ein aussagekräftiger Namen für den Trigger hilft dir, den Überblick zu behalten.
Du wählst den Triggertyp durch das Klicken auf das Bearbeitungssymbol (Stift) aus.
Der korrekte Triggertyp ist „Klick > Nur Links“.
Im Dropdown wählst du Click Id und die Bedienung „enthält“. Im letzten Feld trägst du genau den Wert/Name der vorher in Elementor selbst vergebenen Button ID ein. Achte auf die genaue Schreibweise!
Das war es. Nun musst du diesen Trigger einem passenden Tag hinzufügen, um diesen bei dem Klick auf den entsprechenden Button auszulösen.
Das kann z. B. eine Google Ads Conversion sein oder ein Facebook Pixel Custom Event etc.
Du kannst auch Zielgruppen für ein passendes Remarketing aufbauen oder einfach nur ein Google Analytics 4 Event auslösen, um in Analytics die Häufigkeit der entsprechenden Klicks zu analysieren.
