GTM Vimeo tracking code v2.2

GTM Vimeo tracking v2.2.html

<!--
Google Analytics Tag Manager (V2) custom HTML tag for Vimeo video tracking

Copyright 2016, Cardinal Path, Inc.

Original author: Bill Tripple <[email protected]>
Revised by: Bogdan Bistriceanu <[email protected]>
Updated by: Julius Fedorovicius <[email protected]> and Richard Outram <[email protected]> and Campbell McGuiness <[email protected]>

Version 2.2
-->
<script>
  var dataLayer = (typeof (dataLayer) !== 'undefined' && dataLayer instanceof Array) ? dataLayer : [];
  var videoLabels = [];
  var lastP = [];

  //we declare variables that will hold information about the video being played
  var _playerTitle = {}, _playerAuthor = {}, _playerAuthorURL = {}, _playerUploadDate = {};

  try {
    init();
  }
  catch (err) {
    dataLayer.push({
      'event': 'gtm.error',
      'errorMessage': e.message,
      'tag': 'Vimeo Video Listener',
    });
  }

  function init() {
    try {
      var player = document.getElementsByTagName('iframe');
      for (i = 0; i < player.length; ++i) {
        var url = player[i].getAttribute('src');

        if (/player\.vimeo\.com\/video/.test(url)) { // vimeo iframe found
          if (!player[i].hasAttribute('id')) { // id attribute missing
            player[i].setAttribute('id', 'vimeo_id_' + i); // add id attribute
          }
          var urlUpdated = false;
          if (!/api=/.test(url)) { // check to see if api parameter is in src attribute
            url = updateUrl(url, 'api', 1);
            urlUpdated = true;
          }

          if (!/player_id=/.test(url)) { // check if player_id is in src attribute
            url = updateUrl(url, 'player_id', player[i].getAttribute('id'));
            urlUpdated = true;
          }
          if (urlUpdated) { // repopulate src attribute with added parameters
            player[i].setAttribute('src', url);
          }
          videoLabels[i]=player[i].getAttribute('src');
        }
      }

      // Listen for messages from the player
      if (window.addEventListener) {
        window.addEventListener('message', onMessageReceived, false);
      }
      else {
        window.attachEvent('onmessage', onMessageReceived, false);
      }
    }
    catch (err) {
    }
  }

  function updateUrl(url, param, value) {
    try {
      return url + ((/\?/.test(url)) ? '&' : '?') + param + '=' + value;
    }
    catch (err) {
    }
  }

  // Handle messages received from the player
  function onMessageReceived(e) {
    try {
      var data = e.data;

      if (typeof data === 'string') {
        data = JSON.parse(data);
      }

      switch (data.event) {
        case 'ready':
          onReady(data);
          break;
        case 'play':
          onPlay(data);
          break;
        case 'pause':
          onPause(data);
          break;
        case 'timeupdate':
          onPlayProgress(data);
          break;
      }
    }
    catch (err) {
    }
  }

  // Helper function for sending a message to the player
  function post(action, value) {
    try {
      var data = {
        method: action,
      };

      if (value) {
        data.value = value;
      }

      var message = JSON.stringify(data);
      var player = document.getElementsByTagName('iframe');
      var url;
      var prot;


      for (i = 0; i < player.length; ++i) {
        url = player[i].getAttribute('src');

        if (/player\.vimeo\.com\/video/.test(url)) {
          // Check if protocol exists
          prot = player[i].getAttribute('src').split('?')[0].split('//')[0];

          // If protocol doesn't exist, then need to append to "url"
          if (!prot) {
            url = 'https:' + player[i].getAttribute('src').split('?')[0];
          }
          player[i].contentWindow.postMessage(data, url);
        }
      }
    }
    catch (err) {
    }
  }


  function getLabel(id) {
    try {
      return videoLabels[id].split('?')[0].split('/').pop();
    }
    catch (err) {
    }
  }

  function getTitle(id) {
    return _playerTitle[getLabel(id)] || getLabel(id);
  }

  //our function that will use the Vimeo oEmbed API to retrieve additional information about the video
  function getVimeoInfo(url, callback) {

    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    document.getElementsByTagName('body')[0].appendChild(script);
  }

  //the callback function which takes the data received from the Vimeo oEmbed API and places it into the corresponding objects
  function vimeoCallback(e) {
    //console.log(e);
    _playerTitle[e['video_id']] = e['title'];
    _playerAuthor[e['video_id']] = e['author_name'];
    _playerAuthorURL[e['video_id']] = e['author_url'];
    _playerUploadDate[e['video_id']] = e['upload_date'];
  }

  function onReady(data) {
    try {
      //execute our function which queries the Vimeo oEmbed API once the embedded videos are "ready"
      getVimeoInfo('https://vimeo.com/api/oembed.json?url=https://vimeo.com/' + getLabel(data.player_id) + '&callback=vimeoCallback', vimeoCallback);

      post('addEventListener', 'play');
      post('addEventListener', 'pause');
      post('addEventListener', 'finish');
      post('addEventListener', 'playProgress');
    }
    catch (err) {
    }
  }

  function onPlay(data) {
    try {
      var t = data.data.duration - data.data.seconds <= 1.5 ? 1 : (Math.floor(data.data.seconds / data.data.duration * 4) / 4).toFixed(2);
      dataLayer.push({
        event: 'video',
        video_action: 'play',
        video_url: 'https://vimeo.com/' + getLabel(data.player_id),
        video_percent: data.data.percent.toFixed(2) * 100,
        video_title: getTitle(data.player_id)
      });
    }
    catch (err) {
    }
  }

  function onPause(data) {
    try {
      var t = data.data.duration - data.data.seconds <= 1.5 ? 1 : (Math.floor(data.data.seconds / data.data.duration * 4) / 4).toFixed(2);
      dataLayer.push({
        event: 'video',
        video_action: 'pause',
        video_url: 'https://vimeo.com/' + getLabel(data.player_id),
        video_percent: data.data.percent.toFixed(2) * 100,
        video_title: getTitle(data.player_id)
      });
    }
    catch (err) {
    }
  }

  // Track progress: 25%, 50%, 75%, 100%
  function onPlayProgress(data) {
    try {
      var t = data.data.duration - data.data.seconds <= 1.5 ? 1 : (Math.floor(data.data.seconds / data.data.duration * 4) / 4).toFixed(2);
      if (!lastP[data.player_id] || t > lastP[data.player_id]) {
        lastP[data.player_id] = t;
        if (parseFloat(t) != 0) {
          dataLayer.push({
            event: 'video',
            video_action: 'progress',
            video_url: 'https://vimeo.com/' + getLabel(data.player_id),
            video_percent: t * 100,
            video_title: getTitle(data.player_id)
          });
        }
      }
    }
    catch (err) {
    }
  }
</script>