Gelezen of niet?

Crowl.readdetector.js

Deze js-class controleert of iemand een bepaald artikel op een website al dan niet heeft gelezen. Je kan controleren of iemand het artikel volledig heeft gelezen of ergens tijdens het lezen is gestopt. Je kan ook controleren of iemand het artikel enkel maar heeft bekeken of ook heeft gelezen. De class berekent eveneens de benodigde leestijd.

Na het lezen of bekijken kan je de data automatisch laten bewaren in een online databank. 

Class ReadDetector

De ReadDetector class in JavaScript is ontworpen om gebruikersinteracties met een specifiek HTML-element te monitoren, met name gericht op het detecteren of en wanneer een tekst gelezen wordt. Het doel van deze class is om te bepalen hoe lang een element in beeld is en de leestijd te schatten op basis van het aantal woorden in het element en een geschatte leessnelheid.

De constructor van de class neemt verschillende parameters om specifieke callbacks te beheren voor gebeurtenissen zoals het begin van het lezen, het stoppen van het lezen, en acties bij het verlaten van de pagina. De class houdt de zichtbaarheid van het element bij via een IntersectionObserver en gebruikt timers om de duur van het lezen te meten.

Functies en Methodes van ReadDetector

Constructor Parameters:

  • elementSelector: Selector voor het HTML-element.
  • onReadCallback: Functie die wordt aangeroepen als de tekst als gelezen wordt beschouwd.
  • onStopReadingCallback: Functie die wordt aangeroepen wanneer het lezen stopt.
  • onBeforeUnloadCallback: Optionele functie die wordt aangeroepen bij het verlaten van de pagina.
  • wordsPerMinute: De geschatte leessnelheid (standaard 200 woorden per minuut).
  • initialDelay: Startvertraging voordat het lezen begint te tellen.
  • debug: Debug-modus voor extra log informatie.

Methodes:

  • observeElement(): Zet een observer op het element om zichtbaarheidsveranderingen te volgen.
  • checkInitialVisibility(): Controleert of het element zichtbaar is bij het laden van de pagina.
  • handleIntersection(entries): Verwerkt veranderingen in de zichtbaarheid van het element.
  • startInitialTimer(): Start een initiële timer gebaseerd op initialDelay.
  • startReadingTimer(): Start een timer die meet hoe lang het element gelezen wordt.
  • updateElapsedTime(): Update de verstreken tijd sinds het begin van de observatie.
  • calculateReadingTime(): Berekent de geschatte tijd nodig om de tekst te lezen.
  • clearTimers(): Stopt alle actieve timers.
  • clearUpdateTimer(): Stopt alleen de timer die de verstreken tijd update.
  • disconnectObserver(): Verbreekt de observer die de zichtbaarheid van het element monitort.
  • reportStopReading(): Rapporteert het stoppen van het lezen en reset timers.
  • setupPageExitListener(): Stelt een listener in voor de beforeunload gebeurtenis.
  • setupClickListener(): Luistert naar klikken en controleert of deze buiten het element plaatsvinden.
  • hasBeenViewed(): Geeft terug of het element zichtbaar is geweest.
  • getEstimatedReadingTime(): Geeft de geschatte leestijd terug.
  • setWordsPerMinute(wpm): Stelt een nieuwe leessnelheid in woorden per minuut in.
  • updateDebug(newDebug): Update de debug-status.

Deze class biedt dus een gedetailleerde benadering om leesactiviteiten op een webpagina te monitoren en te beheren, wat nuttig kan zijn voor bijvoorbeeld het analyseren van gebruikersbetrokkenheid.

Initialiseer

let reader = new ReadDetector('#reader', onTextRead, onStopReading, onBeforeUnload, 250, 3000, true);

reader.setWordsPerMinute(250);
reader.updateDebug(true);

Leestijd weergeven 

neededtime = Math.round(reader.getEstimatedReadingTime());
document.querySelector("#time").innerHTML = "Leestijd: " + neededtime + " seconden";

Bekeken?

if (reader.hasBeenViewed()) {
    document.querySelector("#viewed").innerHTML = "Bekeken";
}

Callback-functie onTextRead()

var neededtime = 0;

function onTextRead() {
    alert('De tekst is waarschijnlijk gelezen.');
    const url = 'saveseconds.php';
    const data = JSON.stringify({
        elapsedTime: neededtime,
        event: 'readdyReading'
    });

    navigator.sendBeacon(url, data);
}

Callback-functie onStopReading()

function onStopReading(elapsedTime) {
    alert("Je bent gestopt met lezen. Verstreken tijd: " + elapsedTime + " seconden.");
    const url = 'saveseconds.php';
    const data = JSON.stringify({
        elapsedTime: elapsedTime,
        event: 'stoppedReading'
    });

    navigator.sendBeacon(url, data);
}

Callback-functie onBeforeUnload()

function onBeforeUnload(elapsedTime) {
    console.log("Gebruiker verlaat de pagina na " + elapsedTime + " seconden.");

    const url = 'saveseconds.php';
    const data = JSON.stringify({
        elapsedTime: elapsedTime,
        event: 'pageUnload'
    });

    navigator.sendBeacon(url, data);
}  

Bewaren met PHP?

// Het bestand waar de data zal worden opgeslagen
$filename = "readinglist.txt";

// Lees de ruwe POST data
$rawData = file_get_contents("php://input");

// Aannemende dat de data in JSON formaat is, decodeer deze om te gebruiken
$data = json_decode($rawData, true);

// Voorbeeld van hoe de data zou kunnen worden geformatteerd voor opslag
if (is_array($data)) {
$formattedData = "Leestijd: " . $data['elapsedTime'] . " seconden, Event: " . $data['event'] . " ";
} else {
// Als er iets misgaat met de decoding, sla de ruwe data op
$formattedData = $rawData . " ";
}

// Voeg de data toe aan het einde van het bestand
file_put_contents($filename, $formattedData, FILE_APPEND);

// Echo een response terug naar de client
echo "Data received and saved.";
Volgende pagina