docbrown/app/assets/javascripts/initializers/initializeBaseTracking.js.erb

function initializeBaseTracking() {
  var wait = 0;
  var addedGA = false;
  var gaTrackingCode = document.body.dataset.gaTracking;
  if (gaTrackingCode) {
    var waitingOnGA = setInterval(function() {
      if (!addedGA) {
        (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');
      }
      addedGA = true;
      wait++;
      if (window.ga && ga.create) {
        ga('create', gaTrackingCode, 'auto');
        ga('set', 'anonymizeIp', true);
        ga('send', 'pageview', location.pathname + location.search);
        clearInterval(waitingOnGA);
      }
      if (wait > 85) {
        clearInterval(waitingOnGA);
        fallbackActivityRecording();
      }
    }, 25);
    eventListening();
    trackCustomImpressions();
  }
}

function fallbackActivityRecording() {
  var tokenMeta = document.querySelector("meta[name='csrf-token']")
  if (!tokenMeta) {
    return
  }
  var csrfToken = tokenMeta.getAttribute('content')
  var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  var screenW = window.screen.availWidth;
  var screenH = window.screen.availHeight;
  var dataBody = {
    path: location.pathname + location.search,
    user_language: navigator.language,
    referrer: document.referrer,
    user_agent: navigator.userAgent,
    viewport_size: h + 'x' + w,
    screen_resolution: screenH + 'x' + screenW,
    document_title: document.title,
    document_encoding: document.characterSet,
    document_path: location.pathname + location.search,
  };
  window.fetch('/fallback_activity_recorder', {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'X-CSRF-Token': csrfToken,
    },
    body: JSON.stringify(dataBody),
    credentials: 'same-origin'
  });
}

function eventListening(){
  var registerNowButt = document.getElementById("cta-comment-register-now-link");
  if (registerNowButt) {
    registerNowButt.onclick = function(){
      ga('send', 'event', 'click', 'register-now-click', null, null);
    }
  }
}

function trackCustomImpressions() {
  setTimeout(function(){
    var ArticleElement = document.getElementById('article-body') || document.getElementById('comment-article-indicator');
    var tokenMeta = document.querySelector("meta[name='csrf-token']")
    var isBot = /bot|google|baidu|bing|msn|duckduckbot|teoma|slurp|yandex/i.test(navigator.userAgent) // is crawler
    var windowBigEnough =  window.innerWidth > 1023

    // Sidebar HTML variant tracking
    var stickyNav = document.getElementById('article-show-primary-sticky-nav');
    var sidebarHTMLVariant = document.getElementById('html-variant-article-show-sidebar');
    if (sidebarHTMLVariant && ArticleElement && tokenMeta && !isBot && windowBigEnough) {
      var dataBody = {
        html_variant_id: sidebarHTMLVariant.dataset.variantId,
        article_id: ArticleElement.dataset.articleId,
      };
      var csrfToken = tokenMeta.getAttribute('content');
      trackHTMLVariantTrial(dataBody, csrfToken)
      var successLinks = stickyNav.querySelectorAll('a,button'); //track all links and button clicks within nav
      for(var i = 0; i < successLinks.length; i++)
      {
        successLinks[i].addEventListener('click', function() { trackHtmlVariantSuccess(dataBody, csrfToken) });
      }
    }

    // Below article HTML variant tracking
    var belowArticleHTMLVariant = document.getElementById('html-variant-article-show-below-article');
    if (belowArticleHTMLVariant && ArticleElement && tokenMeta && !isBot && windowBigEnough) {
      var dataBody = {
        html_variant_id: belowArticleHTMLVariant.dataset.variantId,
        article_id: ArticleElement.dataset.articleId,
      };
      var csrfToken = tokenMeta.getAttribute('content');
      trackHTMLVariantTrial(dataBody, csrfToken)
      var successLinks = belowArticleHTMLVariant.querySelectorAll('a,button'); //track all links and button clicks within nav
      for(var i = 0; i < successLinks.length; i++)
      {
        successLinks[i].addEventListener('click', function() { trackHtmlVariantSuccess(dataBody, csrfToken) });
      }
    }

    // page view
    if (ArticleElement && tokenMeta && !isBot) {
      var randomNumber = Math.floor(Math.random() * 10); // 1 in 10; Only track 1 in 10 impressions
      if (!checkUserLoggedIn() && randomNumber != 1) {
        return;
      }
      var dataBody = {
        article_id: ArticleElement.dataset.articleId,
        referrer: document.referrer,
        user_agent: navigator.userAgent,
      };
      var csrfToken = tokenMeta.getAttribute('content');
      trackPageView(dataBody, csrfToken);
      var timeOnSiteCounter = 0;
      var timeOnSiteInterval = setInterval(function(){
        timeOnSiteCounter++
        var ArticleElement = document.getElementById('article-body') || document.getElementById('comment-article-indicator');
        if (ArticleElement && checkUserLoggedIn()) {
          trackFifteenSecondsOnPage(ArticleElement.dataset.articleId, csrfToken);
        } else {
          clearInterval(timeOnSiteInterval);
        }
        if ( timeOnSiteCounter > 118 ) {
          clearInterval(timeOnSiteInterval);
        }
      }, 15000)
    }

    // display add
    var displayAds = document.querySelectorAll('[data-display-unit]');
    if (displayAds.length > 0
      && tokenMeta
      && !isBot
      && windowBigEnough
      && checkUserLoggedIn()) {
        var csrfToken = tokenMeta.getAttribute('content');
        displayAds.forEach(unit => {
          trackAdImpression(csrfToken, unit);
          unit.removeEventListener('click', trackAdClick, false );
          unit.addEventListener('click', function(e) { trackAdClick(csrfToken, e.target) });
        });
      }
  }, 1800)
}

function trackHTMLVariantTrial(dataBody, csrfToken) {
  var randomNumber = Math.floor(Math.random() * 10); // 1 in 10; Only track 1 in 10 impressions
  if (randomNumber === 1) {
    window.fetch('/html_variant_trials', {
      method: 'POST',
      headers: {
        'X-CSRF-Token': csrfToken,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(dataBody),
      credentials: 'same-origin',
    });
  }
}

function trackHtmlVariantSuccess(dataBody, csrfToken) {
  window.fetch('/html_variant_successes', {
    method: 'POST',
    headers: {
      'X-CSRF-Token': csrfToken,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(dataBody),
    credentials: 'same-origin',
  })
}

function trackPageView(dataBody, csrfToken) {
  window.fetch('/page_views', {
    method: 'POST',
    headers: {
      'X-CSRF-Token': csrfToken,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(dataBody),
    credentials: 'same-origin',
  })
}

function trackFifteenSecondsOnPage(articleId, csrfToken) {
  window.fetch('/page_views/' + articleId, {
    method: 'PATCH',
    headers: {
      'X-CSRF-Token': csrfToken,
      'Content-Type': 'application/json',
    },
    credentials: 'same-origin',
  }).catch((error) => console.error(error))
}

function trackAdImpression(token, adBox) {
  var dataBody = {
    display_ad_event: {
      display_ad_id: adBox.dataset.id,
      context_type: "<%= DisplayAdEvent::CONTEXT_TYPE_HOME %>",
      category: "<%= DisplayAdEvent::CATEGORY_IMPRESSION %>",
    }
  }
  window.fetch('/display_ad_events', {
    method: 'POST',
    headers: {
      'X-CSRF-Token': token,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(dataBody),
    credentials: 'same-origin',
  }).catch((error) => console.error(error))
}

function trackAdClick(token, clickedElement) {
  var adBox = clickedElement.closest('[data-display-unit]');
  if (!adClicked) {
    var dataBody = {
      display_ad_event: {
        display_ad_id: adBox.dataset.id,
        context_type: "<%= DisplayAdEvent::CONTEXT_TYPE_HOME %>",
        category: "<%= DisplayAdEvent::CATEGORY_CLICK %>",
      }
    }
    window.fetch('/display_ad_events', {
      method: 'POST',
      headers: {
        'X-CSRF-Token': token,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(dataBody),
      credentials: 'same-origin',
    })
  }
  adClicked = true;
}