JS: Tilføj tracking til Plausible for rulle-procent

At implementere tracking for rulle-procent på din hjemmeside kan give dig værdifuld indsigt i, hvordan brugerne interagerer med dit indhold. Jegh ar lavet dette kodestykke som tilføjer rulle-procent tracking og sender dataene til Plausible Analytics, hvor vi gemmer rulle-procenten som events med et prop-navn.

Først og fremmest skal du have Plausible Analytics integreret på din hjemmeside med event tracking. Hvis det er på plads, kan du oprette en funktion, der sender events til Plausible, hver gang en bruger ruller ned på din side.

Her er min JavaScript funktion som tilføjer tracking og sender dataene til Plausibe. Man kan naturligvis tilføje alle mulige events, men i dette tilfælde er det kun rulle procent.

function initScrollPlausibleTracking() {

    let plausibleLoaded = false;
    // Funktion der venter på Plausible og sender events
    function checkIfPlausibleLoaded() {
        if (typeof window.plausible === "function") {
            plausibleLoaded = true;
            console.log("Plausible er indlæst");
            // Start rulle tracking, når Plausible er klar
            startScrollTracking();
        } else {
            // Hvis Plausible ikke er indlæst endnu, prøv igen
            setTimeout(checkIfPlausibleLoaded, 100);
        }
    }

    // Kald checkIfPlausibleLoaded for at sikre, at Plausible er klar
    checkIfPlausibleLoaded();

    // Beregn rulle-procenten og send events til Plausible
    function trackScrollDepth() {
        const scrollPercentage = ((window.scrollY + window.innerHeight) / document.body.scrollHeight) * 100;
        
        const thresholds = [20, 40, 60, 80, 90];
        thresholds.forEach((threshold) => {
            if (scrollPercentage >= threshold) {
                plausible("LENC", {
                    props: {
                        rulle-procent: `${threshold}%`
                    }
                });
                console.log(`Rulle-procent: ${threshold}%`);
            }
        });
    }

    function startScrollTracking() {
        document.addEventListener("scroll", trackScrollDepth);
        window.addEventListener("resize", trackScrollDepth);
        window.addEventListener("load", trackScrollDepth);
    }
}

initScrollPlausibleTracking();

checkIfPlausibleLoaded: Denne funktion venter på, at Plausible er fuldt indlæst, før vi starter rulle tracking. Hvis Plausible ikke er klar, forsøger vi igen hvert 100ms, indtil det er.

Rulle-procent beregning: Hver gang brugeren ruller, beregnes den aktuelle rulle-procent som en procentdel af siden.

Thresholds: Vi definerer nogle specifikke rulle-procenter (10%, 20%, 40%, osv.), hvor vi ønsker at tracke begivenheder.

Plausible event: Når brugeren når en af disse grænser, sendes et event til Plausible med category som “Scroll” og value som den specifikke rulle-procent.

Eventlyttere: Vi sætter begivenheder op til at lytte efter scroll, resize og load for at sikre, at tracking fungerer korrekt, når siden er indlæst eller ændres.

Når man har tilføjet koden til sin hjemmeside, vil tracking begynde at fungere, og du vil kunne se de indsamlede data i din Plausible Analytics konto, såfremt din Plausible tracking tillader event tracking.

Fjern eventuelt console.log elementerne for at undgå at de vises i konsollen, men meget fint for test.