Debug Fields Script Reference

debug-fields.js

/**
 * Debug Fields
 *
 * Standard debug fields used with Google Tag Manager and Google Analytics.
 * This can be implemented in your codebase (recommended) or in Google Tag
 * Manager if access is limited.
 */


/**
 * Utilities
 *
 * These can be added to your codebase, or in Google Tag Manager in every Custom HTML Tag that uses them.
 * If using Google Tag Manager, avoid using a single, setup Tag that creates global functions on page load.
 * In my experience, this always creates race conditions, even when you set the firing order.
 */

// IDs

function generateId() {
  return Math.random().toString(16).slice(2);
}

// Cookies

function getCookie(name) {
  name = name + '=';
  var value = '';
  var cookies = document.cookie.split(';');
  for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i];
    cookie = cookie.trim();
    if (cookie.includes(name)) {
      value = cookie.substring(name.length, cookie.length);
      break;
    }
  }
  return value;
}

function getGoogleClientId() {
  var value = '';
  var gaCookie = getCookie('_ga');
  if (gaCookie.length) {
    //_ga cookie is made of four fields, only the last two are used for the Google client ID
    // https://stackoverflow.com/questions/16102436/what-are-the-values-in-ga-cookie#answer-16107194
    value = gaCookie.split('.').slice(2).join('.');
  }
  return value;
}

function getTopLevelDomain() {
  var hostnameParts = window.location.hostname.split('.');
  var topLevelDomain = hostnameParts.slice(hostnameParts.length - 2).join('.');
  return topLevelDomain;
}

function setCookie(name, value, days) {
  if (typeof days !== 'number') days = 365;
  var topLevelDomain = getTopLevelDomain();
  var date = new Date();
  var daysInMilliseconds = days * 24 * 60 * 60 * 1000;
  date.setTime(date.getTime() + daysInMilliseconds);
  var cookieString = name+'='+value+'; expires='+date.toUTCString()+'; path=/;';
  if (topLevelDomain !== 'localhost') {
    cookieString += 'domain=.'+topLevelDomain;
  }
  document.cookie = cookieString;
}

function setSessionCookie(name, value) {
  // Set cookies with a 30 minute expiration
  // 30 minute session is standard for web analytics such as Google and Adobe
  // setCookie expects expiration in days, so .02 is half an hour
  setCookie(name, value, 0.02);
}


/**
 * Fields
 */

// Timestamp
// This is generated uniquely for every hit.
// Create a Custom Javascript, Google Tag Manager Variable with this code.

function() {
  // Get local time as ISO string with offset at the end
  var now = new Date();
  var tzo = -1 * now.getTimezoneOffset();
  var dif = tzo >= 0 ? '+' : '-';
  var pad = function(num, ms) {
    var norm = Math.floor(Math.abs(num));
    if (ms) return (norm < 10 ? '00' : norm < 100 ? '0' : '') + norm;
    return (norm < 10 ? '0' : '') + norm;
  }
  return now.getFullYear()
    + '-' + pad(now.getMonth()+1)
    + '-' + pad(now.getDate())
    + 'T' + pad(now.getHours())
    + ':' + pad(now.getMinutes())
    + ':' + pad(now.getSeconds())
    + '.' + pad(now.getMilliseconds(), true)
    + dif + pad(tzo / 60)
    + ':' + pad(tzo % 60);
}

// Event ID
// This is generated uniquely for every hit.
// Create a Custom Javascript Variable in Google Tag Manager with this code.

function () {
  return Math.random().toString(16).slice(2);
}

// Pageview ID
// This is generated uniquely for every pageview, and stored in a window variable.
// You can do this in your codebase, or with a Custom HTML Tag in Google Tag Manager with this code.
// Then use a JavaScript Value Variable to capture this data.

// Custom HTML Tag - fire on pageview or history change
/*<script>*/
(function() {
  window.pageviewId = Math.random().toString(16).slice(2);
})();
/*</script>*/

// JavaScript Value Variable
window.pageviewId

// Session ID
// This is generated for every session and stored in a cookie for 30 minutes.
// You can do this in your codebase, or with a Custom HTML Tag in Google Tag Manager with this code.
// Then use a 1st Party Cookie Variable to capture this data.

// Custom HTML Tag - fire on pageview or history change
/*<script>*/
(function() {
  function getCookie(name) {
    name = name + '=';
    var value = '';
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
      var cookie = cookies[i];
      cookie = cookie.trim();
      if (cookie.includes(name)) {
        value = cookie.substring(name.length, cookie.length);
        break;
      }
    }
    return value;
  }
  
  function getTopLevelDomain() {
    var hostnameParts = window.location.hostname.split('.');
    var topLevelDomain = hostnameParts.slice(hostnameParts.length - 2).join('.');
    return topLevelDomain;
  }
  
  function setCookie(name, value, days) {
    if (typeof days !== 'number') days = 365;
    var topLevelDomain = getTopLevelDomain();
    var date = new Date();
    var daysInMilliseconds = days * 24 * 60 * 60 * 1000;
    date.setTime(date.getTime() + daysInMilliseconds);
    var cookieString = name+'='+value+'; expires='+date.toUTCString()+'; path=/;';
    if (topLevelDomain !== 'localhost') {
      cookieString += 'domain=.'+topLevelDomain;
    }
    document.cookie = cookieString;
  }

  function setSessionCookie(name, value) {
    setCookie(name, value, 0.02);
  }

  var cookieName = 'etc_sid';
  var existing = getCookie(cookieName);
  if (existing) {
    // Refresh cookie
    setSessionCookie(cookieName, existing);
  } else {
    var sessionId = Math.random().toString(16).slice(2);
    setSessionCookie(cookieName, sessionId);
  }
})();
/*</script>*/

// 1st Party Cookie Value Variable
etc_sid

// User ID
// This is generated for every user and stored in a cookie for 2 years.
// You can do this in your codebase, or with a Custom HTML Tag in Google Tag Manager with this code.
// Then use a 1st Party Cookie Variable to capture this data.

// Custom HTML Tag - fire on pageview or history change
/*<script>*/
(function() {
  function getCookie(name) {
    name = name + '=';
    var value = '';
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
      var cookie = cookies[i];
      cookie = cookie.trim();
      if (cookie.includes(name)) {
        value = cookie.substring(name.length, cookie.length);
        break;
      }
    }
    return value;
  }
  
  function getTopLevelDomain() {
    var hostnameParts = window.location.hostname.split('.');
    var topLevelDomain = hostnameParts.slice(hostnameParts.length - 2).join('.');
    return topLevelDomain;
  }
  
  function setCookie(name, value, days) {
    if (typeof days !== 'number') days = 365;
    var topLevelDomain = getTopLevelDomain();
    var date = new Date();
    var daysInMilliseconds = days * 24 * 60 * 60 * 1000;
    date.setTime(date.getTime() + daysInMilliseconds);
    var cookieString = name+'='+value+'; expires='+date.toUTCString()+'; path=/;';
    if (topLevelDomain !== 'localhost') {
      cookieString += 'domain=.'+topLevelDomain;
    }
    document.cookie = cookieString;
  }

  var cookieName = 'etc_uid';
  var existing = getCookie(cookieName);
  if (existing) {
    // Refresh cookie
    setCookie(cookieName, existing, 730);
  } else {
    var userId = Math.random().toString(16).slice(2);
    setCookie(cookieName, userId, 730);
  }
})();
/*</script>*/

// 1st Party Cookie Value Variable
etc_uid

// Google Analytics ID
// This is created by Google and stored in a cookie.
// You can access the value directly using a Custom JavaScript Variable.

function() {
  function getCookie(name) {
    name = name + '=';
    var value = '';
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
      var cookie = cookies[i];
      cookie = cookie.trim();
      if (cookie.includes(name)) {
        value = cookie.substring(name.length, cookie.length);
        break;
      }
    }
    return value;
  }

  function getGoogleClientId() {
    var value = '';
    var gaCookie = getCookie('_ga');
    if (gaCookie.length) {
      //_ga cookie is made of four fields, only the last two are used for the Google client ID
      // https://stackoverflow.com/questions/16102436/what-are-the-values-in-ga-cookie#answer-16107194
      value = gaCookie.split('.').slice(2).join('.');
    }
    return value;
  }
  
  return getGoogleClientId();
}

// Page Full URL
// This can be accessed from the existing window variables
// using a JavaScript Value Variable.

window.location.href