run queued functions after script is loaded

Author: djih

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## Unreleased
 
 * Add support for user properties operations (set, setOnce, add, unset).
+* Fix bug to run queued functions after script element is loaded and set to window.
 
 ## 2.4.1 (September 21, 2015)
 

README.md

@@ -10,12 +10,13 @@ Amplitude-Javascript
         <script type="text/javascript">
           (function(t,e){var n=t.amplitude||{};var r=e.createElement("script");r.type="text/javascript";
           r.async=true;r.src="https://d24n15hnbwhuhn.cloudfront.net/libs/amplitude-2.4.1-min.gz.js";
-          var s=e.getElementsByTagName("script")[0];s.parentNode.insertBefore(r,s);var i=function(){
-          this._q=[];return this};function a(t){i.prototype[t]=function(){this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));
-          return this}}var o=["add","set","setOnce","unset"];for(var c=0;c<o.length;c++){a(o[c]);
-          }n.Identify=i;n._q=[];function u(t){n[t]=function(){n._q.push([t].concat(Array.prototype.slice.call(arguments,0)));
-          }}var p=["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","setGlobalUserProperties","identify"];
-          for(var l=0;l<p.length;l++){u(p[l])}t.amplitude=n})(window,document);
+          r.onload=function(){t.amplitude.runQueuedFunctions()};var s=e.getElementsByTagName("script")[0];
+          s.parentNode.insertBefore(r,s);var i=function(){this._q=[];return this};function o(t){
+          i.prototype[t]=function(){this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));
+          return this}}var a=["add","set","setOnce","unset"];for(var u=0;u<a.length;u++){o(a[u]);
+          }n.Identify=i;n._q=[];function c(t){n[t]=function(){n._q.push([t].concat(Array.prototype.slice.call(arguments,0)));
+          }}var l=["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","setGlobalUserProperties","identify"];
+          for(var p=0;p<l.length;p++){c(l[p])}t.amplitude=n})(window,document);
 
           amplitude.init("YOUR_API_KEY_HERE");
         </script>

amplitude-snippet.min.js

@@ -1,8 +1,9 @@
 (function(t,e){var n=t.amplitude||{};var r=e.createElement("script");r.type="text/javascript";
 r.async=true;r.src="https://d24n15hnbwhuhn.cloudfront.net/libs/amplitude-2.4.1-min.gz.js";
-var s=e.getElementsByTagName("script")[0];s.parentNode.insertBefore(r,s);var i=function(){
-this._q=[];return this};function a(t){i.prototype[t]=function(){this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));
-return this}}var o=["add","set","setOnce","unset"];for(var c=0;c<o.length;c++){a(o[c]);
-}n.Identify=i;n._q=[];function u(t){n[t]=function(){n._q.push([t].concat(Array.prototype.slice.call(arguments,0)));
-}}var p=["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","setGlobalUserProperties","identify"];
-for(var l=0;l<p.length;l++){u(p[l])}t.amplitude=n})(window,document);
+r.onload=function(){t.amplitude.runQueuedFunctions()};var s=e.getElementsByTagName("script")[0];
+s.parentNode.insertBefore(r,s);var i=function(){this._q=[];return this};function o(t){
+i.prototype[t]=function(){this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));
+return this}}var a=["add","set","setOnce","unset"];for(var u=0;u<a.length;u++){o(a[u]);
+}n.Identify=i;n._q=[];function c(t){n[t]=function(){n._q.push([t].concat(Array.prototype.slice.call(arguments,0)));
+}}var l=["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","setGlobalUserProperties","identify"];
+for(var p=0;p<l.length;p++){c(l[p])}t.amplitude=n})(window,document);

amplitude.js

@@ -96,14 +96,8 @@
 var Amplitude = require('./amplitude');
 
 var old = window.amplitude || {};
-var q = old._q || [];
 var instance = new Amplitude();
-
-// Apply the queued commands
-for (var i = 0; i < q.length; i++) {
-    var fn = instance[q[i][0]];
-    fn && fn.apply(instance, q[i].slice(1));
-}
+instance._q = old._q || [];
 
 // export the instance
 module.exports = instance;
@@ -165,6 +159,7 @@ var Amplitude = function() {
   this._unsentIdentifys = [];
   this._ua = new UAParser(navigator.userAgent).getResult();
   this.options = object.merge({}, DEFAULT_OPTIONS);
+  this._q = []; // queue for proxied functions before script load
 };
 
 Amplitude.prototype._eventId = 0;
@@ -265,6 +260,16 @@ Amplitude.prototype.init = function(apiKey, opt_userId, opt_config, callback) {
   }
 };
 
+Amplitude.prototype.runQueuedFunctions = function () {
+  for (var i = 0; i < this._q.length; i++) {
+    var fn = this[this._q[i][0]];
+    if (fn && type(fn) === 'function') {
+      fn.apply(this, this._q[i].slice(1));
+    }
+  }
+  this._q = []; // clear function queue after running
+};
+
 Amplitude.prototype._loadSavedUnsentEvents = function(unsentKey, queue) {
   var savedUnsentEventsString = localStorage.getItem(unsentKey);
   if (savedUnsentEventsString) {

amplitude.min.js

@@ -4,6 +4,7 @@
   as.type = 'text/javascript';
   as.async = true;
   as.src = 'https://d24n15hnbwhuhn.cloudfront.net/libs/amplitude-2.4.1-min.gz.js';
+  as.onload = function() { window.amplitude.runQueuedFunctions(); };
   var s = document.getElementsByTagName('script')[0];
   s.parentNode.insertBefore(as, s);
   var Identify = function() { this._q = []; return this; };

src/amplitude-snippet.js

@@ -53,6 +53,7 @@ var Amplitude = function() {
   this._unsentIdentifys = [];
   this._ua = new UAParser(navigator.userAgent).getResult();
   this.options = object.merge({}, DEFAULT_OPTIONS);
+  this._q = []; // queue for proxied functions before script load
 };
 
 Amplitude.prototype._eventId = 0;
@@ -153,6 +154,16 @@ Amplitude.prototype.init = function(apiKey, opt_userId, opt_config, callback) {
   }
 };
 
+Amplitude.prototype.runQueuedFunctions = function () {
+  for (var i = 0; i < this._q.length; i++) {
+    var fn = this[this._q[i][0]];
+    if (fn && type(fn) === 'function') {
+      fn.apply(this, this._q[i].slice(1));
+    }
+  }
+  this._q = []; // clear function queue after running
+};
+
 Amplitude.prototype._loadSavedUnsentEvents = function(unsentKey, queue) {
   var savedUnsentEventsString = localStorage.getItem(unsentKey);
   if (savedUnsentEventsString) {

src/amplitude.js

@@ -3,14 +3,8 @@
 var Amplitude = require('./amplitude');
 
 var old = window.amplitude || {};
-var q = old._q || [];
 var instance = new Amplitude();
-
-// Apply the queued commands
-for (var i = 0; i < q.length; i++) {
-    var fn = instance[q[i][0]];
-    fn && fn.apply(instance, q[i].slice(1));
-}
+instance._q = old._q || [];
 
 // export the instance
 module.exports = instance;

src/index.js

@@ -76,6 +76,39 @@ describe('Amplitude', function() {
     });
   });
 
+  describe('runQueuedFunctions', function() {
+    beforeEach(function() {
+      amplitude.init(apiKey);
+    });
+
+    afterEach(function() {
+      reset();
+    });
+
+    it('should run queued functions', function() {
+      assert.equal(amplitude._unsentCount(), 0);
+      assert.lengthOf(server.requests, 0);
+      var userId = 'testUserId'
+      var eventType = 'test_event'
+      var functions = [
+        ['setUserId', userId],
+        ['logEvent', eventType]
+      ];
+      amplitude._q = functions;
+      assert.lengthOf(amplitude._q, 2);
+      amplitude.runQueuedFunctions();
+
+      assert.equal(amplitude.options.userId, userId);
+      assert.equal(amplitude._unsentCount(), 1);
+      assert.lengthOf(server.requests, 1);
+      var events = JSON.parse(querystring.parse(server.requests[0].requestBody).e);
+      assert.lengthOf(events, 1);
+      assert.equal(events[0].event_type, eventType);
+
+      assert.lengthOf(amplitude._q, 0);
+    });
+  });
+
   describe('setUserProperties', function() {
     beforeEach(function() {
       amplitude.init(apiKey);

test/amplitude.js

@@ -7,6 +7,7 @@
       as.type = 'text/javascript';
       as.async = true;
       as.src = '/amplitude.js';
+      as.onload = function() { window.amplitude.runQueuedFunctions(); };
       var s = document.getElementsByTagName('script')[0];
       s.parentNode.insertBefore(as, s);
       var Identify = function() { this._q = []; return this; };
@@ -69,7 +70,9 @@
     }
 </script>
 <script>
-    amplitude.init('a2dbce0e18dfe5f8e74493843ff5c053');
+    amplitude.init('a2dbce0e18dfe5f8e74493843ff5c053', null, null, function() {
+        alert(amplitude.options.deviceId);
+    });
     amplitude.setVersionName('Web');
     amplitude.identify(new amplitude.Identify().add('photoCount', 1));
     amplitude.identify(new amplitude.Identify().add('photoCount', 1).set('gender', 'male').unset('karma'));