Track Youtube Views By Visitor (Like Wistia!)

index.es6

// download youtube API by constructing script tag and inserting to dom
const el = document.getElementsByTagName('script')[0];
const script = document.createElement('script');
script.src = 'https://www.youtube.com/iframe_api';
el.parentNode.insertBefore(script, el);

// take an existing youtube player <iframe> 
// and decorates with a state change handler
// that will call track accordingly
let player;
const onYouTubeIframeAPIReady = () => {
  player = new YT.Player('iframe#id', { // change this selector!
    events: {
      onStateChange({ data: { YT: { PlayerState }}}) {
        const { video_id: id, title } = player.getVideoData();
        const duration = player.getDuration();
        const time = player.getCurrentTime();
        switch (PlayerState) {
          case PLAYING:
            analytics.track('Played Video', { duration, title, id });
            break;
          case PAUSED:
            analytics.track('Paused Video', { duration, title, id });
          case ENDED:
            analytics.track('Finished Video', { duration, title, id });
            break;
          default:
            return;
        }
      }
    }
  });
}

// parse email and user_id parameters from querystring

const { email, user_id } // or whatever :)
  = parseQuery(document.location.search);

analytics.identify(user_id, { email });

// helper function to parse querystring
// component/querystring#parse
// Author:TJ Holowaychuck

const parseQuery = (str = '') => {
  if ('string' != typeof str) return {};
  str = trim(str);
  if ('' == str) return {};
  if ('?' == str.charAt(0)) str = str.slice(1);
  
  let obj = {};
  let pairs = str.split('&');
  
  for (let i of pairs) {
    let parts = pairs[i].split('=');
    let key = decode(parts[0]);
    let m;

    if (m = pattern.exec(key)) {
      obj[m[1]] = obj[m[1]] || [];
      obj[m[1]][m[2]] = decode(parts[1]);
      continue;
    }

    obj[parts[0]] = null == parts[1] ? '' : decode(parts[1]);
  }

  return obj;
};

// safely decode URI component
const decode = (str = '') => {
  try {
    return decodeURIComponent(str.replace(/\+/g, ' '));
  } catch (e) {
    return str;
  }
}

// safely trim string
const trim = (str = '') => {
  if (str.trim) return str.trim();
  return str.replace(/^\s*|\s*$/g, '');
}

index.js

// download youtube API by constructing script tag and inserting to dom
'use strict';

var el = document.getElementsByTagName('script')[0];
var script = document.createElement('script');
script.src = 'https://www.youtube.com/iframe_api';
el.parentNode.insertBefore(script, el);

// take an existing youtube player <iframe>
// and decorates with a state change handler
// that will call track accordingly
var player = undefined;
var onYouTubeIframeAPIReady = function onYouTubeIframeAPIReady() {
  player = new YT.Player('iframe#id', { // change this selector!
    events: {
      onStateChange: function onStateChange(event) {
        var _player$getVideoData = player.getVideoData();

        var id = _player$getVideoData.video_id;
        var title = _player$getVideoData.title;

        var duration = player.getDuration();
        var time = player.getCurrentTime();
        var PlayerState = event.data.YT.PlayerState;

        switch (PlayerState) {
          case PLAYING:
            analytics.track('Played Video', { duration: duration, title: title, id: id });
            break;
          case PAUSED:
            analytics.track('Paused Video', { paused_at: paused_at, duration: duration, title: title, id: id });
          case ENDED:
            analytics.track('Finished Video', { duration: duration, title: title, id: id });
            break;
          default:
            return;
        }
      }
    }
  });
};

// parse email and user_id parameters from querystring

var _parseQuery = parseQuery(document.location.search);

var email = _parseQuery.email;
var user_id = _parseQuery.user_id;

// identify with those params! :)

analytics.identify(user_id, { email: email });

// helper function to parse querystring
// component/querystring#parse
// Author:TJ Holowaychuck

var parseQuery = function parseQuery() {
  var str = arguments.length <= 0 || arguments[0] === undefined ? '' : arguments[0];

  if ('string' != typeof str) return {};
  str = trim(str);
  if ('' == str) return {};
  if ('?' == str.charAt(0)) str = str.slice(1);

  var obj = {};
  var pairs = str.split('&');

  var _iteratorNormalCompletion = true;
  var _didIteratorError = false;
  var _iteratorError = undefined;

  try {
    for (var _iterator = pairs[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
      var i = _step.value;

      var parts = pairs[i].split('=');
      var key = decode(parts[0]);
      var m = undefined;

      if (m = pattern.exec(key)) {
        obj[m[1]] = obj[m[1]] || [];
        obj[m[1]][m[2]] = decode(parts[1]);
        continue;
      }

      obj[parts[0]] = null == parts[1] ? '' : decode(parts[1]);
    }
  } catch (err) {
    _didIteratorError = true;
    _iteratorError = err;
  } finally {
    try {
      if (!_iteratorNormalCompletion && _iterator['return']) {
        _iterator['return']();
      }
    } finally {
      if (_didIteratorError) {
        throw _iteratorError;
      }
    }
  }

  return obj;
};

// safely decode URI component
var decode = function decode() {
  var str = arguments.length <= 0 || arguments[0] === undefined ? '' : arguments[0];

  try {
    return decodeURIComponent(str.replace(/\+/g, ' '));
  } catch (e) {
    return str;
  }
};

// safely trim string
var trim = function trim() {
  var str = arguments.length <= 0 || arguments[0] === undefined ? '' : arguments[0];

  if (str.trim) return str.trim();
  return str.replace(/^\s*|\s*$/g, '');
};