Name: Flowsery
Author: Flowsery

Benutzerdefiniertes Event-Tracking eroffnet leistungsstarke Moglichkeiten jenseits einfacher Seitenaufrufe. Dieser Leitfaden behandelt zwei praktische Anwendungsfalle: die Messung, wie lange Besucher tatsachlich Ihre Blogbeitrage lesen, und das zuverlassige Tracking von Nutzeranmeldungen von der Serverseite.

Blog-Artikel-Lesezeit messen

Standard-Seitenaufruf-Analysen sagen Ihnen, dass jemand einen Beitrag besucht hat, aber nicht, ob er ihn tatsachlich gelesen hat. Durch die Kombination von Scroll-Tracking mit Verweildauer-Berechnungen konnen Sie echte Leserschaft bestimmen.

"Vollstandig gelesen" definieren

Ein Artikel gilt als vollstandig gelesen, wenn zwei Bedingungen erfullt sind: Der Besucher hat genugend Zeit auf der Seite verbracht, um den Inhalt plausibel gelesen zu haben, und er hat bis zum Ende gescrollt. Die Mindestlesezeit wird aus der Wortzahl des Artikels abgeleitet, basierend auf einer durchschnittlichen Lesegeschwindigkeit von etwa 200-220 Wortern pro Minute.

Implementierungsschritte

1. Das Events-Tracking-Skript hinzufugen

Fugen Sie das Event-Tracking-Snippet Ihrer Analyseplattform in den <head> Ihrer Seiten ein. Wenn Sie einen statischen Seitengenerator wie Hugo verwenden, kommt dies in Ihr Basis-Template.

2. Artikel-Metadaten anhangen

Fugen Sie auf jeder Artikelseite ein kleines Script-Element hinzu, das den Artikeltitel und die Wortzahl als Datenattribute enthalt:

<script type="text/javascript" src="/js/article.js"
    id="article"
    data-title="Ihr Artikeltitel"
    data-words="1200"></script>

3. Die Tracking-Logik schreiben

Das Skript muss drei Dinge tun:

Erstens die Scroll-Position berechnen, um zu erkennen, wann der Leser das Ende des Artikels erreicht:

function getScrollPercent() {
    const h = document.documentElement,
          b = document.body,
          st = 'scrollTop',
          sh = 'scrollHeight';
    return Math.floor((h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100);
}

Dann beim Laden der Seite die Wortzahl und den Titel aus den Datenattributen lesen und die Mindestlesezeit berechnen:

window.addEventListener("DOMContentLoaded", () => {
    const script = document.getElementById("article");

    if(script &&
        script.hasAttribute("data-words") &&
        script.hasAttribute("data-title")) {
        const title = script.getAttribute("data-title");
        const minReadingTimeSeconds = Math.floor(
            parseInt(script.getAttribute("data-words")) / 220
        ) * 60;
        const start = new Date().getTime();
        let done = false;

Schliesslich auf Scroll-Events lauschen. Wenn der Besucher uber 85 % der Seite gescrollt hat und mindestens die Mindestlesezeit verbracht hat, wird ein benutzerdefiniertes Event ausgelost:

        window.addEventListener("scroll", () => {
            if(!done && getScrollPercent() > 85) {
                let readSeconds = Math.floor(
                    (new Date().getTime() - start) / 1000
                );
                if(readSeconds >= minReadingTimeSeconds) {
                    done = true;
                    // Benutzerdefiniertes Event mit Dauer und Artikeltitel senden
                    trackEvent("Read article", {
                        duration: readSeconds,
                        meta: { title }
                    });
                }
            }
        });
    }
});

4. Die Daten uberprufen

Sobald Events einfliessen, erscheinen sie in Ihrem Analyse-Dashboard. Offnen Sie die detaillierte Event-Ansicht, um zu sehen, welche Artikel gelesen werden und wie viel Zeit Besucher durchschnittlich mit jedem verbringen.

Nutzerregistrierungen vom Backend tracken

Frontend-Conversion-Ziele, die beim Besuch einer Bestatigungs-Seite auslosen, sind unzuverlassig, da jeder direkt zu dieser URL navigieren kann. Ein genauerer Ansatz ist es, ein benutzerdefiniertes Event nur dann vom Server zu senden, wenn eine Registrierung tatsachlich bestatigt wurde.

Flowsery

—

Umsatzorientierte Analysen für Ihre Website

Echtzeit-Dashboard

Zielverfolgung

Cookie-freies Tracking

Hier ist ein Beispiel in Go:

func SignUp(w http.ResponseWriter, r *http.Request) {
    // Captcha validieren, Nutzerkonto erstellen, etc.
    if err != nil {
        // Fehler behandeln
    } else {
        go func() {
            if err := analyticsClient.Event("Registration", 0, nil, r); err != nil {
                // Fehler protokollieren
            }
        }()
    }
    // Antwortseite rendern
}

Indem das Event nur bei erfolgreicher Kontobestatigung ausgelost wird, erhalten Sie eine vertrauenswurdige Zahlung echter Anmeldungen statt aufgeblahter Zahlen durch zufallige Seitenbesuche.

Wichtigste Erkenntnis

Benutzerdefinierte Events ermoglichen die Messung von praktisch allem, was fur Ihr Unternehmen wichtig ist. Achten Sie nur darauf, keine personlich identifizierbaren Informationen an Events anzuhangen, da dies die Datenschutzvorteile von cookieloser Analyse untergraben wurde.