Come monitorare l'attività degli utenti sulla pagina web

Oggi vi mostriamo come utilizzare un plugin attraverso il quale si può monitorare per quanto tempo l'utente non era activo sulla vostra pagina web (aveva soltanto apperto una pagina e non spostava piu il puntatore, non clicava link, non scrolava la pagina) e che cosa possiamo fare in questo caso.

 

demosourse

I metodi principali

// Se la pagina non è attiva
if( ifvisible.now() ){
    // Visualizza una finestra di pop-up
    openPopUp();
}

cambio della scheda del browser e chiusura della finestra pop-up:

ifvisible.on("blur", function(){
    // stop animazione
    animations.pause();
});
ifvisible.on("focus", function(){
    // inizio animazione
    animations.resume();
});

ifvisible.js in grado di monitorare due stati: IDLE e ACTIVE.

ifvisible.on("idle", function(){
    // Stop conto
    stream.pause();
});
ifvisible.on("wakeup", function(){
    // Ripristina il conto alla rovescia
    stream.resume();
});

Il tempo di transizione di default è 60 secondi, ma possiamo cambiare il valore.

ifvisible.setIdleDuration(120); // Page diventerà inattiva dopo 120 secondi

Noi stessi possono richiamare azioni necesarie a seconda di quello che vogliamo che visitatore vedesse.

ifvisible.idle(); // facciamo la paggina non ativa

ifvisible.idle(function(){
  

  // >Questa funzione vera eseguita quando la pagina diventa inattiva
});
// altri metodi
ifvisible.blur();
ifvisible.focus();
ifvisible.idle();
ifvisible.wakeup();

Inoltre e possibile specificare intervallo che inizii la funzione:

ifvisible.onEvery(0.5, function(){
    // Animare il logo, se la pagina non è attiva
    animateLogo();
});

Esempio

Controllare se l'utente è attivo per 15 secondi.

ifvisible.setIdleDuration(15);
ifvisible.idle(function(){
    alert("addormentato");
});
ifvisible.wakeup(function(){
    alert("svegliato");
});

Fonte lezione: https://github.com/serkanyersen/ifvisible.js

Letto 1096 volte