JavaScript Event-Tracking

//coding: utf-8
(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
// https://www.gocher.me/Event-Tracking
(function(){
  var s=document.createElement('script');
  s.src='/code/tracking.js';
  document.body.appendChild(s);})();

//coding: utf-8
var _paq = window._paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function (matomo_url, matomo_siteId)
  _paq.push(['setTrackingUrl', matomo_url + 'matomo.php']);
  _paq.push(['setSiteId', matomo_siteId]);
  var script = document.createElement('script');
  script.async = true;
  script.defer = true;
  script.src = matomo_url + 'piwik.js';
  document.body.appendChild(script);
}) ('https://matomo.mydomain.de/', 1);

// activate Matomo event tracking
// Copyright 2019 Udo Schmal www.gocher.me
// https://www.gocher.me/Event-Tracking
(function(){
  var s=document.createElement('script');
  s.src='/code/tracking.js';
  document.body.appendChild(s);})();

// coding: utf-8
/** Created by: Udo Schmal | https://www.gocher.me/ */

/* Extend tracking with events:
 * time on page
 * scroll depth
 * video/audio play, pause, ended
 * button/input/link click (downloads, external links, internal jump to anchor, emails, phone)
 */

// my analytics
// send event to own analyser
/*
function mya(type, category, action, label, value) {
  var xhr;
  try {
    xhr = new XMLHttpRequest();
    if (xhr) {
      xhr.onreadystatechange = function (){};
      // on my server each location can get analytics events
      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) { };
}
*/

(function() {
  'use strict';
  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;
    var base = document.getElementsByTagName('base');
    this.baseHref = (base.length > 0 ? base[0].href : window.location.protocol + '//' + window.location.host);
  }

  Analyse.prototype = {
    send: function (type, category, action, label, value) {
      // console output
      console.log('send("' + type + '", "' + category + '", "' + action + '", "' + label + '", "' + value + '");');
      if (ga) {
        // send events to google analytics
        ga('send', type, category, action, label, value);
      } else if (_paq) {
        // send events to matomo
        _paq.push(['trackEvent', action, label, category, value]);
      } else if (mya) {
        // send events to own analytics
        mya(type, category, action, label, value);
      }
    },
    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 = (typeof(window.pageYOffset) == 'number') ? window.pageYOffset : doc.scrollTop;
      var 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);
      }
    },
    timeOnPage: function (event) {
      var type = event.type, value = 0;
      if (type === 'unload') {
        var diffTime = (this.startTime ? new Date().getTime() - this.startTime : 0);
        value = Math.round((this.totalTime + diffTime) / 1000);
      } else {
        if (document.hidden) {
          var diffTime = (this.startTime ? new Date().getTime() - this.startTime : 0);
          this.totalTime = this.totalTime + diffTime;
          this.startTime = null;
          type = 'hide';
        } else {
          this.startTime = new Date().getTime();
          type = 'show';
        }
      }
      this.send('event', 'Time on Page', type, window.location.pathname, value);
    },
    click: function (event) {
      var el = event.target;
      var href, path, isThisDomain, category = null, label = null;
      switch (el.tagName.toLowerCase()) {
      case 'a':
        href = el.getAttribute('href');
        if (href === undefined) {
          href = "";
        } else {
          path = href.split('?')[0];
          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';
              label = path.replace(/^mailto\:/i, '');
            } else if (href.match(/^#/i)) {
              category = 'internal';
              label = href.replace(/^#/i, '');
            } else if (path.match(/\.(zip|7z|exe|dmg|pdf|docx?|xlsx?|pptx?|mp3|txt|rar|wma|mov|avi|wmv|flv|wav|vcf)$/i)) {
              category = 'download';
              label = path.replace(/ /g, "-");
            } else if (href.match(/^https?\:/i) && !isThisDomain) {
              category = 'external';
              label = href.replace(/^https?\:\/\//i, '');
            } else if (href.match(/^tel\:/i)) {
              category = 'telephone';
              label = href.replace(/^tel\:/i, '');
            }
          }
        }
        break;
      case 'button':
        category = 'button[' + el.getAttribute('type') + ']';
        label = (el.getAttribute('id') ?  el.getAttribute('id') + ' - ' : '') + el.textContent || el.innerText;
        break;
      case 'input':
        category = 'input[' + el.getAttribute('type') + ']';
        label = (el.getAttribute('id') ?  el.getAttribute('id') + ' - ' : '') + el.value;
        break;
      }
      if (category !== null) {
        this.send('event', category, event.type, label, 1);
        if ((el.tagName === 'a') && (el.getattribute('target') === undefined || el.getattribute('target').tolowercase() !== '_blank')) {
          setTimeout(function() { location.href = href; }, 400);
          return false;
        }
      }
    },
    mediaEvent: function (event) {
      var el = event.target;
      var src = el.currentSrc;
      src = src.replace(this.baseHref, '');
      src = src.replace(/^https?\:\/\//i, '');
      this.send('event', el.tagName.toLowerCase(), event.type, src || el.id, Math.round(el.currentTime));
    },
    iterate:  function (el) {
      var self = this, childs;
      el = el || document.body;
      if (el.nodeType === 1) {
        switch (el.tagName.toLowerCase()) {
          case "a": // init link click tracking
            if (el.getAttribute('href')) {
              if ((el.getAttribute('href') !== undefined) && (el.getAttribute('href').indexOf('javascript:') === -1)) {
                el.addEventListener('click', function (event) { self.click(event); }, false);
              }
            }
            break;
          case "button": // init button click tracking
            el.addEventListener('click', function (event) { self.click(event); }, false);
            break;
          case "input": // init input type button click tracking
            if (el.getAttribute('type').match(/(button|image|reset|submit)$/i)) {
              el.addEventListener('click', function (event) { self.click(event); }, false);
            }
            break;
          case "video": // init video  tracking
          case "audio": // init video & audio tracking
            el.addEventListener('play', function (event) { self.mediaEvent(event); }, false);
            el.addEventListener('pause', function (event) { self.mediaEvent(event); }, false);
            el.addEventListener('ended', function (event) { self.mediaEvent(event); }, false);
            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;
      // init scroll depth tracking
      this.resize();
      window.addEventListener('resize', function () { self.resize(); }, false);
      window.addEventListener('scroll', function () { self.scroll(); }, false);
      // init time on page tracking
      document.addEventListener('visibilitychange', function (event) { self.timeOnPage(event); }, false);
      window.addEventListener('unload', function (event) { self.timeOnPage(event); }, false);
      this.iterate();
    }
  };

  var analyse = new Analyse();
  analyse.init();

})();