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" width="640" height="390" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<br/>
<ul id="events">
</ul>

JavaScript

var dataLayerPush, iframe, lastUpdatePercent, player, sparklineDebug;

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

sparklineDebug = false;

iframe = document.querySelector('iframe[src*="vimeo"]');

player = new Vimeo.Player(iframe);

lastUpdatePercent = null;

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

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