GTM - HTML Video Listener

gtm-html-video-listener.js

/*
 * v1.0
 * Created by the Data Intelligence Team at https://www.foundsm.com/
 * Written by Nicholas Hoium
 * Licensed under the Creative Commons 4.0 Attribution Public License
 */

(function () {
  function pushVideoEventToDataLayer(video, gtmVideoStatus) {
    dataLayer.push({
      "event": 'gtm.video',
      "gtm.videoStatus": gtmVideoStatus,
      "gtm.videoUrl": video.src,
      "gtm.videoTitle": video.dataset.title, // data-title attribute.
      "gtm.videoProvider": 'Self-Hosted',
    });
  }

  var videos = document.querySelectorAll('video');

  videos.forEach(function (video) {
    video.addEventListener('play', function (e) {
      pushVideoEventToDataLayer(e.target, 'start');
    });
    video.addEventListener('pause', function (e) {
      pushVideoEventToDataLayer(e.target, 'pause');
    });
    video.addEventListener('ended', function (e) {
      pushVideoEventToDataLayer(e.target, 'complete');
    });
  });
})();