JavaScript Event-Tracking

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();
  a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXX-X', 'auto');
ga('require', 'displayfeatures');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');
 
// activate GA event tracking
// Copyright 2016 Udo Schmal www.gocher.me
// http://www.gocher.me/Event-Tracking
(function(){
  var s=document.createElement('script');
  s.src='http://www.gocher.me/code/ga.js';
  document.body.appendChild(s);})();

/*jslint indent: 2, white: true, browser: true, devel: true, plusplus: true, regexp: true */
'use strict';
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();
  a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXX-X', 'auto');
ga('require', 'displayfeatures');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');

function ready(f) {
  if (/complete|loaded/i.test(document.readyState)) {
    f();
  } else {
    setTimeout("ready("+f+")",9);
  }
}
function Analyse() {
  this.scrollTrue = false;
  this.scroll25 = false;
  this.scroll50 = false;
  this.scroll75 = false;
  this.scroll100 = false;
  this.winHeight = null;
  this.docHeight = null;
  this.totalTime = 0;  
  this.startTime = null;
  this.hidden = null;
}
Analyse.prototype = {
  addListener: function (target, eventName, listener) {
    if (target.addEventListener) {
      target.addEventListener(eventName, listener, false);
    } else if (target.attachEvent) {
      target.attachEvent("on"+eventName, listener);
    } else {
      target["on"+eventName] = listener;
    }
  },
  send: function (type, category, action, label, value) {
    // console ouput
    console.log("send('" + type + "', '" + category + "', '" + action + "', '" + label + "', '" + value + "');");
    // google analytics output
    ga('send', type, category, action, label, value);
/*
    // own analyser output
    var xhr;
    try {
      xhr = new XMLHttpRequest(); 
      if (xhr) {
        xhr.onreadystatechange = function (){};
        xhr.open('post', window.location.pathname);
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        xhr.send('cmd=' + type + '&category=' + category + '&action=' + action + '&label=' + label + '&value=' + value );
      }
    } catch (e) { };
*/
  },
  click: function (el) {
    var base, baseHref, href, extension, isThisDomain, category = null, action = null, label = null;
    switch (el.tagName.toLowerCase()) {
    case 'a':
      base = document.getElementsByTagName('base');
      baseHref = (base.length > 0 ? baseHref = base[0].href : window.location.protocol + "://" + window.location.host + "/");
      href = el.getAttribute('href');
      if (href === undefined) { 
        href = "";
      }
      isThisDomain = href.match(document.domain.split('.').reverse()[1] + '.' + document.domain.split('.').reverse()[0]);
      if (!href.match(/^javascript:/i)) {
        if (href.match(/^mailto\:/i)) {
          category = "email";
          action = "click";
          label = href.replace(/^mailto\:/i, '');
        } else if (href.match(/^#/i)) {
          category = "internal";
          action = "click";
          label = href.replace(/^#/i, '');
        } else if (href.match(/\.(zip|exe|dmg|pdf|doc.*|xls.*|ppt.*|mp3|txt|rar|wma|mov|avi|wmv|flv|wav)$/i)) {
          extension = (/[.]/.exec(href)) ? /[^.]+$/.exec(href) : undefined;
          category = "download";
          action = "click-" + extension[0].toLowerCase();
          label = href.replace(/ /g, "-");
        } else if (href.match(/^https?\:/i) && !isThisDomain) {
          category = "external";
          action = "click";
          label = href.replace(/^https?\:\/\//i, '');
        } else if (href.match(/^tel\:/i)) {
          category = "telephone";
          action = "click";
          label = href.replace(/^tel\:/i, '');
        }
      }
      break;
    case 'button':
      category = "button";
      action = "click";
      label = (el.getAttribute('id') ?  el.getAttribute('id') + ' - ' : '') + el.textContent || el.innerText;
      break;
    case 'input':
      category = "input-" + el.getAttribute('type');
      action = "click";
      label = (el.getAttribute('id') ?  el.getAttribute('id') + ' - ' : '') + el.value;
      break;
    }
    if ((category !== null) && (action !== null)) {
      this.send('event', category, action, encodeURIComponent(label), 1);
      if ((el.tagName === 'a') && (el.getattribute('target') === undefined || el.getattribute('target').tolowercase() !== '_blank')) {
        setTimeout(function() { location.href = href; }, 400);
        return false;
      }
    }
  },
  resize: function () {
    var body = document.body, doc = document.documentElement;
    this.winHeight = window.innerHeight || doc.clientHeight || body.clientHeight;
    this.docHeight = Math.max(body.scrollHeight, body.offsetHeight, doc.clientHeight, doc.scrollHeight, doc.offsetHeight);
  },
  scroll: function () {
    var scrollPos = 0, scrollPer;
    if (typeof(window.pageYOffset) === 'number') {
      //Netscape compliant
      scrollPos = window.pageYOffset;
    } else if (document.body && document.body.scrollTop) {
      //DOM compliant
      scrollPos = document.body.scrollTop;
    } else if (document.documentElement && document.documentElement.scrollTop) {
      //IE6 standards compliant mode
      scrollPos = document.documentElement.scrollTop;
    }
    scrollPer = (scrollPos / (this.docHeight - this.winHeight)) * 100;
    if ((scrollPer > 90) && !this.scroll100) {
      this.scroll100 = true;
      this.send("event", "Scroll Depth", "Percentage", "100%", 1);
    } else if ((scrollPer > 75) && !this.scroll75) {
      this.scroll75 = true;
      this.send("event", "Scroll Depth", "Percentage", "75%", 1);
    } else if ((scrollPer > 50) && !this.scroll50) {
      this.scroll50 = true;
      this.send("event", "Scroll Depth", "Percentage", "50%", 1);
    } else if ((scrollPer > 25) && !this.scroll25) {
      this.scroll25 = true;
      this.send("event", "Scroll Depth", "Percentage", "25%", 1);
    } else if ((scrollPer > 120) && !this.scrollTrue) {
      this.scrollTrue = true;
      this.send("event", "Scroll Depth", "Percentage", "Baseline", 1);
    }
  },
  unload: function () {
    var diffTime = 0;
    if (this.startTime !== null) {
      diffTime = new Date().getTime() - this.startTime;
    }
    this.send("event", "Time on Page", "leave", window.location.pathname, this.totalTime + diffTime);
  },
  visibilityChange: function () {
    if (document[this.hidden]) {
      var diffTime = new Date().getTime() - this.startTime;
      this.totalTime = this.totalTime + diffTime;
      this.startTime = null;
      this.send("event", "Time on Page", "hide", window.location.pathname, diffTime);
    } else {
      this.startTime = new Date().getTime();
      this.send("event", "Time on Page", "show", window.location.pathname, this.totalTime);
    }
  },
  play: function (el) {
    var label = el.currentSrc.replace(/^https?\:\/\//i, '') || el.id;
    this.send('event', el.tagName.toLowerCase(), 'play', label, (el.currentTime * 1000).toFixed(0));
  },
  pause: function (el) {
    var label = el.currentSrc.replace(/^https?\:\/\//i, '') || el.id;
    this.send('event', el.tagName.toLowerCase(), 'pause', label, (el.currentTime * 1000).toFixed(0));
  },
  ended: function (el) {
    var label = el.currentSrc.replace(/^https?\:\/\//i, '') || el.id;
    this.send('event', el.tagName.toLowerCase(), 'ended', label, (el.currentTime * 1000).toFixed(0));
  },
  iterate:  function (el) {
    var self = this, childs;
    el = el || document.getElementsByTagName("body")[0];
    if (el.nodeType === 1) {
      switch (el.tagName.toLowerCase()) {
        case "a": // ini link click tracking
          if (el.getAttribute('href')) {
            if ((el.getAttribute('href') !== undefined) && (el.getAttribute('href').indexOf('javascript:') === -1)) {
              this.addListener(el, 'click', function (event) { self.click(this); });
            }
          }
          break;
        case "button": // init button click tracking
          this.addListener(el, 'click', function (event) { self.click(this); });
          break;
        case "input": // init input type button click tracking
          if (el.getAttribute('type').match(/(button|image|reset|submit)$/i)) {
            this.addListener(el, 'click', function (event) { self.click(this); });
          }
          break;
        case "video": // init video  tracking
          this.addListener(el, "play", function (event) { self.play(this); });
          this.addListener(el, "pause", function (event) { self.pause(this); });
          this.addListener(el, "ended", function (event) { self.ended(this); });
          break;
        case "audio": // init video & audio tracking
          this.addListener(el, "play", function (event) { self.play(this); });
          this.addListener(el, "pause", function (event) { self.pause(this); });
          this.addListener(el, "ended", function (event) { self.ended(this); });
          break;
      }
      childs = el.firstChild;
      while (childs !== null) {
        if (childs.nodeType === 1) {
          this.iterate(childs);
        }
        childs = childs.nextSibling;
      }
    }
  },
  init: function () {
    this.startTime = new Date().getTime();
    var self = this, el, els, visibilityChange, i;
    // init scroll tracking
    this.resize();
    this.addListener(window, 'resize', function () { self.resize(); });
    this.addListener(window, 'scroll', function () { self.scroll(); });
    // init time on page tracking
    if (document.hidden !== undefined) {
      this.hidden = "hidden";
      visibilityChange = "visibilitychange";
    } else if (document.mozHidden !== undefined) {
      this.hidden = "mozHidden";
      visibilityChange = "mozvisibilitychange";
    } else if (document.msHidden !== undefined) {
      this.hidden = "msHidden";
      visibilityChange = "msvisibilitychange";
    } else if (document.webkitHidden !== undefined) {
      this.hidden = "webkitHidden";
      visibilityChange = "webkitvisibilitychange";
    }
    this.addListener(document, visibilityChange, function () { self.visibilityChange(); }); 
    this.addListener(window, 'unload', function () { self.unload(); });
    this.send("event", "Time on Page", "show", window.location.pathname, this.totalTime);
    this.iterate();
  }
};

ready(function(event) {
  var analyse = new Analyse();
  analyse.init();
});