Issues with SegmentIO open source version setup of analytics.js

Question

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();

Answer 1

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();

Answer 2

you can use it like this:

npm install --save analytics.js

import analytics from 'analytics.js';

analytics.initialize({
    'Google Analytics': {
        trackingId: 'UA-XXXXXX-1',
    }
});
analytics.page();