Search code examples
javascriptgoogle-analyticsanalyticssegment-io

Issues with SegmentIO open source version setup of analytics.js


I am switching from SegmentIO to their open source version. I used this blog post as a guide but it's not tracking. Anyone see issue with this code:

  window.analytics || (window.analytics = []);
  window.analytics.methods = ['identify', 'track', 'trackLink', 'trackForm', 'trackClick', 'trackSubmit', 'page', 'pageview', 'ab', 'alias', 'ready', 'group', 'on', 'once', 'off'];
  window.analytics.factory = function (method) {
    return function () {
      var args = Array.prototype.slice.call(arguments);
      args.unshift(method);
      window.analytics.push(args);
      return window.analytics;
    };
  };
for (var i = 0; i < window.analytics.methods.length; i++) {
  var method = window.analytics.methods[i];
  window.analytics[method] = window.analytics.factory(method);
}

analytics.load = function(callback) {
  var script = document.createElement('script');
  script.async = true;
  script.type = 'text/javascript';
 script.src = 'https://assets.gonegreenstore.com.s3.amazonaws.com/js/analytics.min.js';
  script.addEventListener('load', function (e) {
    if(typeof callback === 'function') {
      callback(e);
    }
  }, false);
  var firstScript = document.getElementsByTagName('script')[0];
  firstScript.parentNode.insertBefore(script, firstScript);
};

// Continues from above
analytics.load(function () {
  analytics.initialize({
    'Google Analytics': {
       trackingId: 'UA-40148609-3'
     }        
  });
});

analytics.page();

Solution

  • Ok code from blog was either wrong or outdated. Turns out you can't really load the open source version async out of the box. I have modified code to make it work.

    Gist: https://gist.github.com/cyberwombat/11008970

    // Create a dummy analytics object until real loaded
    window.analytics || (window.analytics = []);
    window.analytics.methods = ['identify', 'track', 'trackLink', 'trackForm', 'trackClick', 'trackSubmit', 'page', 'pageview', 'ab', 'alias', 'ready', 'group', 'on', 'once', 'off'];
    window.analytics.factory = function(method) {
      return function() {
        var args = Array.prototype.slice.call(arguments);
        args.unshift(method);
        window.analytics.push(args);
        return window.analytics;
      };
    };
    for (var i = 0; i < window.analytics.methods.length; i++) {
      var method = window.analytics.methods[i];
      window.analytics[method] = window.analytics.factory(method);
    }
    
    // Load analytics async
    analytics.load = function(callback) {
      if (document.getElementById('analytics-js')) return;
    
      // We make a copy if our dummy object
      window.a = window.analytics;
      var script = document.createElement('script');
      script.async = true;
      script.id = 'analytics-js';
      script.type = 'text/javascript';
      script.src = ('https:' === document.location.protocol ? 'https://' : 'http://') + 'path/to/your/analytics.min.js';
      script.addEventListener('load', function(e) {
        if (typeof callback === 'function') {
          callback(e);
        }
      }, false);
      var first = document.getElementsByTagName('script')[0];
      first.parentNode.insertBefore(script, first);
    };
    
    analytics.load(function() {
    
      // On load init our integrations
      analytics.initialize({
        'Google Analytics': {
          trackingId: 'UA-XXXXXX-1'
        }
      });  
      // Now copy whatever we applied to our dummy object to the real analytics
      while (window.a.length > 0) {
        var item = window.a.shift();
        var method = item.shift();
        if (analytics[method]) analytics[method].apply(analytics, item);
      }
    });
    
    analytics.page();