JSFiddle - React, Tailwind, and code Playground

by dsgnr

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="https://player.vimeo.com/api/player.js"></script>

<iframe src="https://player.vimeo.com/video/105690274" id="vimeo-player-1" class="vimeo-player" width="640" height="390" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

<iframe src="https://player.vimeo.com/video/127724708" id="vimeo-player-2" class="vimeo-player" width="640" height="390" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<br/>
<ul id="events">
</ul>

JavaScript

var dataLayerPush, players=[];

window.dataLayer || (window.dataLayer = []);

if(Vimeo){
	for(var v = document.getElementsByClassName("vimeo-player"), i = v.length; i--;){
		players[i] = new Vimeo.Player(v[i].id);
    if(players[i]) trackPlayer(players[i]);
  }
}

dataLayerPush = function(a, l) {
  var textnode = document.createTextNode("Category: Vimeo, Action: " + a + ", Label: " + l);
  var node = document.createElement("li");
  node.appendChild(textnode);
  document.getElementById("events").appendChild(node);
  console.log("Category: Vimeo, Action: " + a + ", Label: " + l);

  return window.dataLayer.push({
    event: "vimeo",
    vimeoEventCategory: 'vimeo',
    vimeoEventAction: a,
    vimeoEventLabel: l
  });
};
function trackPlayer(player){
	var lastUpdatePercent = null;
  player.getVideoTitle().then(function(title) {
    player.on('play', function() {
      return dataLayerPush('play', title);
    });
    player.on('pause', function() {
      return dataLayerPush('pause', title);
    });
    player.on('ended', function() {
      return dataLayerPush('100%', title);
    });
    return player.on('timeupdate', function(t) {
      var percentProgress, progress;
      progress = t.percent;
      if (parseFloat(progress) < 0.25) {
        percentProgress = 0.00;
      } else if (parseFloat(progress) < 0.50) {
        percentProgress = 25.00;
      } else if (parseFloat(progress) < 0.75) {
        percentProgress = 75.00;
      } else if (parseFloat(progress) < 0.90) {
        percentProgress = 75.00;
      } else if (parseFloat(progress) < 1) {
        percentProgress = 90.00;
      }
      if (lastUpdatePercent !== percentProgress && parseFloat(progress) !== 1) {
        dataLayerPush(percentProgress + "%", title);
      }
      return lastUpdatePercent = percentProgress;
    });
  });
}