0

I would like to send data to Google Analytics to measure the watching behavior of the users for multiple videos - I want to know if they played the cideo, watched 25%, 50%, 75% or 100%. The code below is not sending the data to GA. I'm not sure if my question falls under Google Analytics or javascript or both. Please help. Thank you.

<video id="v1" src="/v1.mp4" width="400px" height="200px" controls />
<video id="v2" src="/v2.mp4" width="400px" height="200px" controls />


<script type="text/javascript">
(function() {
  document.addEventListener('DOMContentLoaded', init, false);
  var videoId, dur, quarter, stat;

  function init() {
    for (var video of document.querySelectorAll('video')) {
      video.addEventListener('play', videoPlay, false);
      video.addEventListener('ended', videoEnd, false);
      video.addEventListener('timeupdate', videoTimeUpdate, false);
    }
  }

  function setKeyFrames(duration) {
    if (dur) {
      return;
    }
    dur = duration;
    quarter = duration / 4;
  }

  function videoTimeUpdate(e) {
    var videoId = e.target;
    var curTime = videoId.currentTime;
    if (curTime >= quarter && curTime < quarter * 2 && stat !== 1) {
      gtag('event', 'Watched Video', {
        'event_category': 'Video',
        'event_label': 'Watched 25% of ' + videoId.id
      });
      stat = 1;

    } else if (curTime >= quarter * 2 && curTime < quarter * 3 && stat !== 2) {
      gtag('event', 'Watched Video', {
        'event_category': 'Video',
        'event_label': 'Watched 50% of ' + videoId.id
      });
      stat = 2;

    } else if (curTime >= quarter * 3 && curTime < dur && stat !== 3) {
      gtag('event', 'Watched Video', {
        'event_category': 'Video',
        'event_label': 'Watched 75% of ' + videoId.id
      });
      stat = 3;

    }
  }

  function videoPlay(e) {
    var videoId = e.target;
    gtag('event', 'Watched Video', {
      'event_category': 'Video',
      'event_label': 'Video Played Is ' + videoId.id
    })
    setKeyFrames(this.duration);

  }


  function videoEnd(e) {
    var videoId = e.target;
    stat = 4;
    gtag('event', 'Watched Video', {
        'event_category': 'Video',
        'event_label': 'Watched ALL of ' + videoId.id
      });

  }



})();


</script>
ImASkuller
  • 39
  • 5
  • It's a bit tricky to debug this without a live example. The code looks okay at first glance. Perhaps you could try throwing some `console.log()`s in there to work out whether your code is running as expected. It could be an issue with `gtag()`, or an issue with some other part of your js. – Joundill Dec 15 '18 at 22:22
  • how do I work with console.log with a mac? – ImASkuller Dec 15 '18 at 23:26
  • Just put `console.log("Something");` whereever you want to debug, then look at the console in the Chrome Inspector. – Joundill Dec 16 '18 at 00:58
  • These previous stackoverflow answers might assist you: https://stackoverflow.com/a/4539270/6632744 https://stackoverflow.com/a/11663507/6632744 – Joundill Dec 16 '18 at 01:09

0 Answers0