Loggen van gebruikersinformatie

Crowl.eventlogger.js

Deze class heeft een constructor die een lijst van te loggen gebeurtenissen accepteert en een interne log (eventLog) bijhoudt. De isLogging vlag bepaalt of logging actief is.

Met deze class kun je flexibel bepalen welke gebeurtenissen je wilt loggen en deze aanpassen zonder de pagina opnieuw te laden.

Methoden

  • startLogging(): Start de logging voor de gespecificeerde gebeurtenissen.
  • updateEvents(newEvents): Stopt de huidige logging, werkt de lijst van te loggen gebeurtenissen bij en start de logging opnieuw.
  • resetLog(): Reset de log.
  • getEventLog(): Retourneert de volledige log.
  • logEvent(event): Logt de gebeurtenisgegevens en voegt deze toe aan eventLog.
  • stopLogging(): Stopt de logging.

Voorbeeldcode

De logger wordt gestart met 'click' en 'mouseover' gebeurtenissen. Na 5 seconden worden de te loggen gebeurtenissen bijgewerkt naar 'click' en 'keydown'. Na 10 seconden stopt de logging en wordt de log weergegeven.

De lijst possibleEvents bevat de meest voorkomende gebeurtenissen die kunnen worden gelogd.

// Lijst van mogelijke gebeurtenissen om te loggen
const possibleEvents = [
    'click', 'dblclick', 'mousedown', 'mouseup', 'mouseover', 'mouseout', 'mousemove', 
    'keydown', 'keyup', 'keypress', 'touchstart', 'touchend', 'touchmove', 
    'focus', 'blur', 'change', 'input', 'submit', 'resize', 'scroll'
];

// Voorbeeldgebruik van de EventLogger class
const logger = new EventLogger(['click', 'mouseover', 'keydown']);
logger.startLogging();

// Update de te loggen gebeurtenissen
setTimeout(() => {
    logger.updateEvents(['click', 'keydown']);
}, 5000);

// Stop logging na een tijdje
setTimeout(() => {
    logger.stopLogging();
    console.log('Event Log:', logger.getEventLog());
    console.log('Key Log:', logger.getKeyLog());
}, 10000);

Het is ook mogelijk om een callbackfunctie te koppelen aan de eventlogger en die functie te updaten.

        // Voorbeeldgebruik van de EventLogger class
        function exampleCallback(eventData) {
            console.log("Callback executed with event data:", eventData);
        }

        // Voorbeeldgebruik van de EventLogger class
        const logger = new EventLogger(['click', 'mouseover', 'keydown', 'keyup', 'paste'], exampleCallback);
        logger.startLogging();


        // Update de callback functie
        setTimeout(() => {
            logger.updateCallback((eventData) => {
                console.log("New callback executed with event data:", eventData);
            });
        }, 3000);

        // Stop logging na een tijdje
        setTimeout(() => {
            logger.stopLogging();
            console.log('Event Log:', logger.getEventLog());
            console.log('Key Log:', logger.getKeyLog());
        }, 10000);

Je kan de eventlogger ook alle events laten weergeven in de console, bij wijze van test:

logger.updateDebug(true);
Volgende pagina