ajax-event-tracking-lunarmetrics.html

<!--- jQuery AJAX Form Listener --->
<!--- Vanilla verison below --->
<script id="gtm-jq-ajax-listen" type="text/javascript">
 (function() {

 'use strict';
 var $;
 var n = 0;
 init();

 function init(n) {

 // Ensure jQuery is available before anything
 if (typeof jQuery !== 'undefined') {
 
 // Define our $ shortcut locally
 $ = jQuery;
 bindToAjax();

 // Check for up to 10 seconds
 } else if (n < 20) {
 
 n++;
 setTimeout(init, 500);

 }

 }

 function bindToAjax() {

 $(document).bind('ajaxComplete', function(evt, jqXhr, opts) {

 // Create a fake a element for magically simple URL parsing
 var fullUrl = document.createElement('a');
 fullUrl.href = opts.url;

 // IE9+ strips the leading slash from a.pathname because who wants to get home on time Friday anyways
 var pathname = fullUrl.pathname[0] === '/' ? fullUrl.pathname : '/' + fullUrl.pathname;
 // Manually remove the leading question mark, if there is one
 var queryString = fullUrl.search[0] === '?' ? fullUrl.search.slice(1) : fullUrl.search;
 // Turn our params and headers into objects for easier reference
 var queryParameters = objMap(queryString, '&', '=', true);
 var headers = objMap(jqXhr.getAllResponseHeaders(), '\n', ':');

 // Blindly push to the dataLayer because this fires within GTM
 dataLayer.push({
 'event': 'ajaxComplete',
 'attributes': {
 // Return empty strings to prevent accidental inheritance of old data
 'type': opts.type || '',
 'url': fullUrl.href || '',
 'queryParameters': queryParameters,
 'pathname': pathname || '',
 'hostname': fullUrl.hostname || '',
 'protocol': fullUrl.protocol || '',
 'fragment': fullUrl.hash || '',
 'statusCode': jqXhr.status || '',
 'statusText': jqXhr.statusText || '',
 'headers': headers,
 'timestamp': evt.timeStamp || '',
 'contentType': opts.contentType || '',
 // Defer to jQuery's handling of the response
 'response': (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || '')
 }
 });

 });

 }

 function objMap(data, delim, spl, decode) {

 var obj = {};

 // If one of our parameters is missing, return an empty object
 if (!data || !delim || !spl) {

 return {};

 }

 var arr = data.split(delim);
 var i;

 if (arr) {

 for (i = 0; i < arr.length; i++) {

 // If the decode flag is present, URL decode the set
 var item = decode ? decodeURIComponent(arr[i]) : arr[i];
 var pair = item.split(spl);

 var key = trim_(pair[0]);
 var value = trim_(pair[1]);

 if (key && value) {

 obj[key] = value;

 }

 }

 }

 return obj;

 }

 // Basic .trim() polyfill
 function trim_(str) {

 if (str) {

 return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');

 }

 }


 })();
 /*
 * v0.1.0
 * Created by the Google Analytics consultants at http://www.lunametrics.com
 * Written by @notdanwilkerson
 * Documentation: http://www.lunametrics.com/blog/2015/08/27/ajax-event-listener-google-tag-manager/
 * Licensed under the Creative Commons 4.0 Attribution Public License
 */
</script>

<!--- Vanilla JS AJAX Form Listener --->

<script id="gtm-ajax-listener" type="text/javascript">
(function () {
  'use strict';

  var originalOpen = window.XMLHttpRequest.prototype.open,
    originalSend = window.XMLHttpRequest.prototype.send;

  function trimSpecialChars(str) {
    if (str) {
      return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
    }
  }

  function objMap(data, delimiter, splitSeparator, decode) {
    if (!data) {
      return {};
    }

    var obj = {};
    var arr = data.split(delimiter);
    for (var i = 0; i < arr.length; i++) {
      var item = decode ? decodeURIComponent(arr[i]) : arr[i];
      var pair = item.split(splitSeparator);

      var key = trimSpecialChars(pair[0]);
      var value = trimSpecialChars(pair[1]);

      if (key && value) {
        obj[key] = value;
      }
    }

    return obj;
  }

  function getUrlSegments(url) {
    var fakeElement = document.createElement('a');
    fakeElement.href = url;

    // IE9+ strips the leading slash from a.pathname
    var pathName = fakeElement.pathname[0] === '/' ? fakeElement.pathname : '/' + fakeElement.pathname;
    var queryString = fakeElement.search[0] === '?' ? fakeElement.search.slice(1) : fakeElement.search;
    var queryParameters = objMap(queryString, '&', '=', true);

    return {
      fullUrl: fakeElement,
      hostName: fakeElement.hostname,
      protocol: fakeElement.protocol,
      pathName: pathName,
      queryString: queryString,
      queryParameters: queryParameters,
      fragment: fakeElement.hash
    };
  }

  function parseJSON(text) {
    try {
      return JSON.parse(text);
    } catch (err) {
      return false;
    }
  }

  function pushEvent(xhr) {
    var urlSegments = getUrlSegments(xhr.requestUrl);
    var headers = objMap(xhr.getAllResponseHeaders(), '\n', ':');

    var responseJSON = parseJSON(xhr.responseText);

    dataLayer.push({
      event: 'ajaxComplete',
      attributes: {
        // Return empty strings to prevent accidental inheritance of old data
        'type': xhr.method || '',
        'url': urlSegments.fullUrl || '',
        'queryParameters': urlSegments.queryParameters,
        'pathname': urlSegments.pathName || '',
        'hostname': urlSegments.hostName || '',
        'protocol': urlSegments.protocol || '',
        'fragment': urlSegments.fragment || '',
        'statusCode': xhr.status || '',
        'statusText': xhr.statusText || '',
        'headers': headers,
        'timestamp': (new Date).getTime() || '',
        'contentType': headers['content-type'] || '',
        'response': (responseJSON ||
          ((xhr.responseType === '' || xhr.responseType === 'document') && xhr.responseXML) || xhr.responseText || '')
      }
    });
  }

  function openRequest() {
    this.method = arguments[0];
    this.requestUrl = arguments[1];
    originalOpen.apply(this, arguments);
  }

  function sendRequest() {
    var originalOnReadyStateChange = this.onreadystatechange || null;

    this.onreadystatechange = function () {
      if (this.readyState === 4) {
        pushEvent(this);
      }
      if (originalOnReadyStateChange) {
        return originalOnReadyStateChange.apply(this, arguments);
      }
    };

    return originalSend.apply(this, arguments);
  }

  window.XMLHttpRequest.prototype.open = openRequest;
  window.XMLHttpRequest.prototype.send = sendRequest;

})();
/*
 * v1.0.0
 * Modified to work without JQuery or any dependencies by Marko Sulamägi https://gtm.marxdev.com
 * Original version created by the Google Analytics consultants at http://www.lunametrics.com
 *
 * Documentation: https://gtm.marxdev.com
 * Licensed under the MIT License
 */
</script>