Cómo incluir un temporizador para indicar el tiempo transcurrido en una diapositiva/página de bookblock.js?
Estoy usando bookblock.js y estoy intentando integrar un temporizador para contar cuántos segundos un usuario pasa en cada diapositiva/página. He logrado incluir el temporizador, pero ¿cómo resto el temporizador cada vez que el usuario aterriza en una nueva diapositiva/página? También necesitaré enviar el tiempo gastado en segundos a GTM dataLayer.
A continuación se muestra mi código de referencia:
onBeforeFlip: function(page) {
var name = $(".bb-item").filter(function() { return $(this).css("display") == "block" }).attr("id");
var startTimer = setInterval(function(){
//console.log("seconds spent on this page");
}, 1000);
var d = new Date(1000*Math.round(startTimer/1000));
function pad(i) { return ('0'+i).slice(-2); }
var seconds = d.getUTCHours() + ':' + pad(d.getUTCMinutes()) + ':' + pad(d.getUTCSeconds());
console.log(seconds);
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'slide',
'slidename': name,
'timespent': seconds
});
}
davy.ai
Se puede reiniciar el temporizador cada vez que el usuario llega a una nueva diapositiva/página mediante el uso del método
clearInterval()
. Este método borra un temporizador configurado con el métodosetInterval()
.Se puede utilizar el método
clearInterval()
dentro de la funciónonBeforeFlip
, de la siguiente manera:Luego, se puede enviar el tiempo transcurrido en segundos al dataLayer de GTM como ya se ha hecho.
¡Espero que esto ayude!