Estoy usando bookblock.js y estoy tratando de integrar un temporizador para contar cuántos segundos pasa un usuario en cada diapositiva/página. Logré incluir el temporizador, pero ¿cómo reinicio el temporizador cada vez que el usuario llega a una nueva diapositiva/página ? También tendré que enviar el tiempo empleado 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 }); }¡Gracias por adelantado!
Aquí hay un breve ejemplo de un temporizador como lo describiste.
$(function() { var secondsPassed = 0; var timer; var slideIndex = 0; function formatSeconds(s) { var h = 0, m = 0; h = Math.floor(s / 3600); s = s - (h * 3600); m = Math.floor(s / 60); s = s - (m * 60); return (h < 10 ? "0" + h : h) + ":" + (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s); } function startTimer() { timer = setInterval(function() { $(".timer").html(formatSeconds(++secondsPassed)) }, 1000); } function resetTimer() { clearInterval(timer); secondsPassed = 0; $(".timer").html(formatSeconds(secondsPassed)); startTimer(); } $("#next-btn").click(function() { $(".slide").eq(slideIndex++).hide(); resetTimer(); }); startTimer(); }); .slides { width: 340px; height: 340px; overflow: hidden; border: 1px solid black; } .slide { width: 300px; height: 300px; float: left; margin: 19px; border: 1px solid #ccc; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="slides"> <div class="slide red"> Slide 1 </div> <div class="slide orange"> Slide 2 </div> <div class="slide yellow"> Slide 3 </div> <div class="slide green"> Slide 4 </div> <div class="slide blue"> Slide 5 </div> <div class="slide purple"> Slide 6 </div> </div> <button id="next-btn">Next</button> <span class="timer">00:00:00</span> Aquí puede ver que hemos creado algunas funciones para ayudarnos, startTimer y resetTimer . También creé formatSeconds para ayudar a formatear la marca de tiempo.
Cuando la página se carga y la primera diapositiva está arriba, iniciamos el temporizador. Cuando hacen clic en siguiente, reiniciamos el temporizador.