Erstellen benutzerdefinierter Klick-Events in GA4

Zuletzt aktualisiert am 18. Juni 20265 Min. Lesezeit

Inhaltsverzeichnis

• Kurz gesagt
• Schritt 1: Ein Custom Event an GA4 senden
• Schritt 2: Ein benutzerdefiniertes Event in GA4 einrichten

important

Diese Anleitung gilt nur, wenn die Daten nicht über ein serverseitiges GTM oder ein über den Shopify Custom Pixel integriertes GTM an Google Analytics 4 gesendet werden. Werden die Daten jedoch über ein serverseitiges GTM oder ein über den Shopify Custom Pixel integriertes GTM gesendet, müssen die Events zunächst in den DataLayer gepusht und anschließend über das GTM an GA4 übertragen werden.

Kurz gesagt

Varify.io® sammelt selbst keine Daten. Dennoch kannst du Klick-Events auf bestimmten Elementen innerhalb deiner Varify-Experimente tracken. In diesem Abschnitt erklären wir dir Schritt für Schritt, wie du das mit Google Analytics 4 umsetzen kannst.

Das Setup erfolgt in zwei Phasen: Zuerst sendest du dein Event an GA4 (Schritt 1), dann konfigurierst du es in GA4 (Schritt 2)—Revenue-Events als Key Events und numerische Werte zusätzlich als Custom Metrics. Wie du das abgeschlossene Event analysierst, erfährst du im Artikel „Analyzing Custom Events.“.

Schritt 1: Ein Custom Event an GA4 senden

Empfohlener Ansatz: Events über das bestehende Tracking-Setup senden

Wir empfehlen generell, benutzerdefinierte Events an GA4 mit derselben Methode zu senden, die du bereits zur Erfassung deiner Events verwendest – also über dein bestehendes Tracking-Setup:

• Wird Google Tag Manager verwendet?, sollten die benutzerdefinierten Events über GTM erstellt und an GA4 übergeben werden (üblicherweise über den DataLayer und ein entsprechendes GA4-Event-Tag).
• Ist GA4 direkt in die Website integriert? (ohne GTM), werden die benutzerdefinierten Events auf demselben direkten Weg gesendet.

Dies stellt sicher, dass dein Tracking konsistent bleibt und zentral gepflegt werden kann. Die unten beschriebene Click-Event-Lösung, die die Funktion „Add JS” nutzt, ist als Ergänzung gedacht, falls du Klicks auf einzelne Elemente innerhalb eines Varify-Experiments messen möchtest.

Click-Tracking auf einem bestimmten 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 definieren. IDs eignen sich hierfür besonders gut.

Ein eindeutiger Selektor ist zum Beispiel: #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 durch den tatsächlichen Selektor deines Elements ersetzen. Dazu kannst du die Funktion „Add JS“ verwenden. Folge dieser Anleitung:

1. JavaScript-Editor in Varify öffnen: Öffne das Fenster im Editor, um JavaScript einzufügen. Das Code-Symbol findest du oben rechts.
2. Code einfügen: Füge den bereitgestellten JavaScript-Code in den Editor ein.
3. Selektor ersetzen: Finde den Platzhalter in Zeile 3 #my-btn. Ersetze #my-btn durch den tatsächlichen Selektor deines neuen Elements. Dies kann eine ID (zum Beispiel 1TP6New-button-id) oder eine Klasse (zum Beispiel .new-button-class) sein.
4. Ä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 (im Original und in der Variante)

Um Klicks auf Elemente zu messen, die bereits auf deiner Website existieren, ist es wichtig, dass du für jedes Element einen eindeutigen Selektor definierst. Eine effektive Möglichkeit, einen solchen Selektor zu ermitteln, ist die Verwendung des visuellen Editors von Varify.io.

Im Folgenden findest du ein Beispiel für einen eindeutigen Selektor .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:

1. Neues Experiment erstellen: Erstelle ein Experiment, das ausschließlich für das Tracking von Elementen vorgesehen ist.
2. JavaScript-Code hinzufügen: Nutze die Funktion „Add JS“, um den erforderlichen JavaScript-Code zu deiner Variante hinzuzufügen. Ersetze in Zeile 3 des Codes den Platzhalter .btn-primary durch den korrekten CSS-Selektor deines Elements.
3. Page Targeting festlegen: Lege das Page Targeting für das Experiment so fest, dass es mit dem Matching-Typ „Contains“ auf die Homepage gesetzt ist. Dadurch werden alle Seiten deiner Website einbezogen, sodass das Experiment auf der gesamten Seite aktiv ist.
4. Traffic-Verteilung anpassen: Die Traffic-Verteilung sollte für die Variante auf 100% gesetzt werden, um sicherzustellen, dass alle Nutzer das Tracking-Skript erhalten.
5. Klick-Events tracken: Die Klicks auf das angegebene 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 senden

Damit du das Event später als benutzerdefinierte Metrik analysieren kannst, sollte es einen Event-Parameter an GA4 senden. In den oben genannten Klick-Event-Snippets ist dieser Parameter bereits enthalten (VarifyClickCount).

Wenn du ein benutzerdefiniertes Event über GTM trackst und es noch keine Parameter sendet, füge sie direkt zum Event hinzu:

1. Öffne den Tab „Event Parameters“.
2. Klicke auf den blauen Button „Add Parameter“.
3. Gib im Feld „Event Parameters“ den Namen des Parameters ein.
4. Trage darunter bei Value die Zahl 1 eins ein (oder, im Fall von Revenue-Events, den dynamischen Revenue-Wert).
5. Veröffentliche die Änderungen im GTM-Container.

Schritt 2: Ein benutzerdefiniertes Event in GA4 einrichten

Sobald deine Events korrekt an GA4 gesendet werden, erscheinen sie dort automatisch – ohne dass du sie manuell erstellen musst. (Es kann bis zu 24 Stunden dauern, bis sie in den Berichten erscheinen.)

Damit ist der Teil zum Senden abgeschlossen – weiter geht es nun in GA4. Richte dein Event dort je nach Anwendungsfall wie folgt ein:

• Umsatzzahlen: als Key Event auswählen, damit sie im Varify Result Report unter „Key Events“ erscheinen.
• Standard-(numerische) Metriken: zusätzlich als Custom Metric erstellen, damit du sie in den explorativen Berichten analysieren kannst.

Revenue Custom Events als Key Events markieren

Damit ein Revenue Custom Event im Varify Result Report unter „Key Events" erscheint und dort als Ziel auswählbar ist, muss es in GA4 als Key Event markiert werden. Bei anderen Custom Events (z. B. reinen Click Events) ist dieser Schritt nicht nötig – sie stehen ohnehin als Ziele zur Verfügung.

1. Gehe in GA4 zu Administration → Events (oder Key Events).
2. Suche dein Revenue Custom Event und aktiviere den Schalter „Mark as Key Event".
3. Falls das Event noch nicht erfasst wurde, klicke auf „New Key Event" und gib den Event-Namen exakt so ein, wie GA4 ihn empfängt.

Numerische Werte als Custom Metrics anlegen

Wenn du den numerischen Wert eines Events (z. B. eine Anzahl oder Menge) in Explorativen Berichten analysieren möchtest, erstelle eine Custom Metric in GA4. Dafür muss das Event den entsprechenden Parameter enthalten (siehe Schritt 1).

1. Gehe in GA4 zu Admin → Custom Definitions → Custom Metrics → Create Custom Metric.
2. Gib einen aussagekräftigen Namen und optional eine kurze Beschreibung ein.
3. Wähle den Event-Parameter aus dem Dropdown-Menü aus oder füge ihn manuell hinzu. Achte auf die korrekte Schreibweise.
4. Lasse das Feld „Unit of Measurement“ in der Regel auf „Standard“ (bei Umsatz: die entsprechende Währungseinheit) und speichere die benutzerdefinierte Metrik.

Es dauert 24–48 Stunden, bis die Daten in den explorativen Berichten verfügbar sind. Beachte außerdem: Event-Daten werden nicht rückwirkend einer benutzerdefinierten Metrik zugeordnet. Eine benutzerdefinierte Metrik beginnt erst nach ihrer Erstellung mit der Datenerfassung.

Hinweis: Varify übernimmt keine Verantwortung für die Funktionalität des Codes und der Informationen.
Es liegt in der Verantwortung des Nutzers, den Code gründlich zu testen und ihn korrekt zu implementieren.