How to include a timer to indicate time spent in a bookblock.js slide/page?

Question

I am using bookblock.js and am trying to integrate a timer to count how many seconds a user spends on each slide/page. I have managed to include the timer, but how do I reset the timer each time the user lands on a new slide/page? I will also need to push the time spent in seconds to GTM dataLayer.

Below is my code for reference:

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
            });
        }

Thanks in advance!

It looks like you need to increment your timer. You want it to show the Day and Time (12:34:01 PM) or just the amount of time since the page loaded (00:00:30)? — Twisty, Nov 18 '21 at 19:46
Just the amount of seconds since the page loaded. I will then need to reset it to zero when I go to another page/slide — deew, Nov 19 '21 at 10:30

score 1 · Accepted Answer · answered Nov 18 '21 at 20:21

Here is a brief example of a timer as you described.

$(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>

Here you can see that we have created a few functions to help us, startTimer and resetTimer. I also created formatSeconds to help format the Time stamp.

When the page loads, and the first slide is up, we start the timer. When they click next, we reset the timer.

thank you so much! this elegant solution works! – deew Nov 19 '21 at 16:25 — deew, Nov 19 '21 at 16:25

How to include a timer to indicate time spent in a bookblock.js slide/page?

1 Answers1