Erstellung von benutzerdefinierter Klick Events in GA4
Inhaltsverzeichnis
Kurz & Knapp
Varify.io® sammelt selbst keine Daten. Trotzdem kannst du Klick-Events auf spezifische Elemente innerhalb deiner Varify-Experimente tracken. In diesem Abschnitt erläutern wir dir Schritt für Schritt, wie du dies mit Google Analytics 4 umsetzen kannst.
Das Anlegen erfolgt in zwei Phasen: Zuerst sendest du dein Event an GA4 (Schritt 1), anschließend richtest du es in GA4 ein (Schritt 2) – Revenue-Events als Key Event, numerische Werte zusätzlich als Custom Metric. Wie du das fertige Event auswertest, findest du im Artikel „Auswertung von Custom Events”.
Schritt 1: Custom Event an GA4 senden
Empfohlener Weg: Events über das bestehende Tracking-Setup senden
Wir empfehlen, Custom Events grundsätzlich über den Weg an GA4 zu senden, über den du deine Events ohnehin schon erfasst – also über dein bestehendes Tracking-Setup:
- Ist der Google Tag Manager im Einsatz, sollten die Custom Events über den GTM erstellt und an GA4 übergeben werden (in der Regel über den DataLayer und ein entsprechendes GA4-Event-Tag).
- Wird GA4 direkt auf der Website eingebunden (ohne GTM), werden die Custom Events auf dem gleichen direkten Weg gesendet.
So bleibt dein Tracking konsistent und an einer zentralen Stelle wartbar. Die nachfolgend beschriebene Klick-Event-Lösung über die „Add JS”-Funktion ist als Ergänzung gedacht, wenn du Klicks auf einzelne Elemente innerhalb eines Varify-Experiments messen möchtest.
Klick Tracking auf ein bestimmtes Element
Das Element existiert nur in deiner Variante
Um Klicks auf neu erstellte Elemente in deiner Variante zu messen, musst du zunächst für jedes Element einen eindeutigen Selektor festlegen. IDs eignen sich hierfür besonders gut.
Ein eindeutiger Selektor ist beispielsweise: #my-btn
Um den JavaScript-Code für das Tracking von Klicks auf dein neues Element anzupassen, solltest du zunächst den Platzhalter #my-btn in Zeile 3 des Codes mit dem tatsächlichen Selektor deines Elements ersetzen. Dazu kannst du die Funktion “Add JS” verwenden. Folge dieser Anleitung:
JavaScript-Editor in Varify öffnen: Öffne im Editor das Fenster, um JavaScript einzufügen. Du findest das Code-Symbol oben rechts.
Code einfügen: Füge den bereitgestellten JavaScript-Code in den Editor ein.
Selektor ersetzen: Finde in Zeile 3 den Platzhalter
#my-btn. Ersetze#my-btnmit dem tatsächlichen Selektor deines neuen Elements. Dies könnte eine ID sein (zum Beispiel#neue-button-id) oder eine Klasse (zum Beispiel.neue-button-klasse).Änderungen speichern: Speichere die Änderungen nach dem Ersetzen des Selektors.
window.varify.helpers.onDomLoaded(() => {
// Replace the CSS selector
var cssSelector = "#my-btn";
// Select only the first element with the .btn-primary class
var element = document.querySelector(cssSelector);
if (element) {
element.addEventListener("click", VarifyTrack);
}
});
function VarifyTrack() {
if (typeof gtag === "function") {
gtag('event', 'VarifyClick', {
'VarifyClickCount': '1',
});
console.log("Event sent.");
} else {
console.log("gtag is not defined. Please check the GA integration.");
}
}
Das Element existiert bereits (in Original und Variante)
Um Klicks auf Elemente zu messen, die bereits auf deiner Webseite existieren, ist es wichtig, dass du für jedes Element einen eindeutigen Selektor festlegst. Ein effektiver Weg, um einen solchen Selektor zu ermitteln, ist die Nutzung des visuellen Editors von Varify.io.
Ein nachfolgendes Beispiel für einen eindeutigen Selektor ist .btn-primary.
Um Klick-Events von bereits existierenden Elementen zu tracken, die sowohl im Original als auch in der Variante deines Experiments vorkommen, kannst du ein spezielles Tracking-Experiment einrichten. Hier ist eine angepasste Anleitung dazu:
Neues Experiment erstellen: Erstelle ein Experiment, das ausschließlich für das Tracking von Elementen gedacht ist.
JavaScript-Code hinzufügen: Verwende die “Add JS”-Funktion, um den benötigten JavaScript-Code zu deiner Variante hinzuzufügen. In Zeile 3 des Codes ersetze den Platzhalter
.btn-primarymit dem korrekten CSS-Selektor deines Elements.Page Targeting einstellen: Stelle das Page Targeting für das Experiment so ein, dass es auf die Homepage mit einem „Contains“ Matching Type gesetzt ist. Dies gewährleistet, dass alle Seiten deiner Website eingeschlossen sind, wodurch das Experiment auf der gesamten Site aktiv ist.
Traffic-Verteilung anpassen: Die Traffic-Verteilung sollte auf 100% für die Variante eingestellt sein, um sicherzustellen, dass alle Nutzer das Tracking-Script erhalten.
Klick-Events tracken: Die Klicks auf das spezifizierte Element werden als Event an Google Analytics 4 (GA4) gesendet, um dort analysiert zu werden.
window.varify.helpers.onDomLoaded(() => {
// Define the CSS selector of the element you want to track
var cssSelector = ".btn-primary";
var elements = document.querySelectorAll(cssSelector);
elements.forEach(function(element) {
element.addEventListener("click", VarifyTrack);
});
});
function VarifyTrack() {
if (typeof gtag === "function") {
gtag('event', 'VarifyClick', {
'VarifyClickCount': '1',
});
console.log("Event sent.");
} else {
console.log("gtag is not defined. Please check the GA integration.");
}
}
Event Parameter in GTM mitsenden
Damit du das Event später als Custom Metric auswerten kannst, sollte es einen Event Parameter an GA4 senden. Bei den Klick-Event-Snippets oben wird dieser bereits mitgesendet (VarifyClickCount).
Erfasst du ein Custom Event über den GTM und es sendet noch keinen Parameter, ergänze ihn direkt am Event:
- Öffne den Reiter „Event Parameter”.
- Klicke auf den blauen Button „Parameter hinzufügen”.
- Trage in das Feld „Event Parameter” den Namen des Parameters ein.
- Trage unter Wert die Zahl
1ein (bzw. bei Revenue-Events den dynamischen Umsatzwert). - Veröffentliche die Änderungen am GTM-Container.
Schritt 2: Custom Event in GA4 einrichten
Sobald deine Events korrekt an GA4 gesendet werden, tauchen sie dort eigenständig auf – ohne dass du sie manuell anlegen musst. (Es kann bis zu 24 Stunden dauern, bis sie in den Berichten sichtbar sind.)
Damit ist der Sende-Teil abgeschlossen – jetzt geht es in GA4 weiter. Je nach Anwendungsfall richtest du dein Event dort so ein:
- Revenue-Werte: als Key Event markieren, damit sie im Varify Result Report unter den Key Events erscheinen.
- Normale (numerische) Metriken: zusätzlich als Custom Metric anlegen, damit du sie in den explorativen Reports auswerten kannst.
Revenue Custom Events als Key Event markieren
Damit ein Revenue Custom Event im Varify Result Report unter den Key Events erscheint und dort als Goal ausgewählt werden kann, muss es in GA4 als Key Event markiert sein. Für andere Custom Events (z. B. reine Klick-Events) ist dieser Schritt nicht nötig – sie stehen ohnehin als Goal zur Verfügung.
- Gehe in GA4 zu Verwaltung → Ereignisse (bzw. Schlüsselereignisse).
- Suche dein Revenue Custom Event und aktiviere den Schalter Als Schlüsselereignis markieren.
- Ist das Event noch nicht erfasst, klicke auf Neues Schlüsselereignis und trage den Event-Namen exakt so ein, wie GA4 ihn empfängt.
Numerische Werte als Custom Metric anlegen
Möchtest du den numerischen Wert eines Events (z. B. einen Zähl- oder Mengenwert) in den explorativen Reports auswerten, lege dafür in GA4 eine Custom Metric an. Voraussetzung ist, dass das Event den entsprechenden Parameter mitsendet (siehe Schritt 1).
- Gehe in GA4 zu Admin → Custom Definitions → Custom Metrics → Create Custom Metric.
- Vergib einen aussagekräftigen Namen und optional eine kurze Beschreibung.
- Wähle den Event-Parameter aus dem Dropdown-Menü oder füge ihn manuell hinzu. Achte auf die genaue Schreibweise.
- Belasse im Feld „Unit of Measurement” in der Regel den Wert „Standard” (bei Umsatz: passende Währungseinheit) und speichere die Custom Metric ab.
Es dauert 24–48 Stunden, bis Daten in den explorativen Reports verfügbar sind. Beachte außerdem: Event-Daten werden nicht rückwirkend einer Custom Metric zugeordnet. Eine Custom Metric erfasst erst Daten, nachdem sie angelegt wurde.
