added instructions for requirejs and a test page

djih · djih · commit 51b530dcd399 · 2016-02-15T18:15:06.000-08:00
diff --git a/README.md b/README.md
@@ -25,6 +25,8 @@ Amplitude-Javascript
         </script>
     ```
 
+    Note: if you are using [RequireJS](http://requirejs.org/), follow these [alternate instructions](https://github.com/amplitude/Amplitude-Javascript#loading-with-requirejs) for Step 2.
+
 3. Replace `YOUR_API_KEY_HERE` with the API Key given to you.
 4. To track an event anywhere on the page, call:
 
@@ -344,11 +346,27 @@ var trackClickLinkA = function() {
 };
 ```
 
+In the case that `optOut` is true, then no event will be logged, but the callback will be called. In the case that `batchEvents` is true, if the batch requirements `eventUploadThreshold` and `eventUploadPeriodMillis` are not met when `logEvent` is called, then no request is sent, but the callback is still called. In these cases, the callback will be called with an input status of 0 and response 'No request sent'.
+
 ### Init Callbacks ###
-You can also pass a callback function to init, which will get called after the SDK finishes its asynchronous loading. *Note: no values are passed to the init callback function*:
+You can also pass a callback function to init, which will get called after the SDK finishes its asynchronous loading. *Note: the Amplitude instance is passed to the callback function as an argument*:
 
 ```javascript
-amplitude.getInstance().init('YOUR_API_KEY_HERE', 'USER_ID_HERE', null, callback_function);
+amplitude.getInstance().init('YOUR_API_KEY_HERE', 'USER_ID_HERE', null, function(instance) {
+  console.log(instance.options.deviceId);  // access the instance's deviceId after initialization
+});
 ```
 
-In the case that `optOut` is true, then no event will be logged, but the callback will be called. In the case that `batchEvents` is true, if the batch requirements `eventUploadThreshold` and `eventUploadPeriodMillis` are not met when `logEvent` is called, then no request is sent, but the callback is still called. In these cases, the callback will be called with an input status of 0 and response 'No request sent'.
+### Loading with RequireJS ###
+If you are using [RequireJS](http://requirejs.org/) to load your Javascript files, you can also use it to load the Amplitude Javascript SDK script directly instead of using our loading snippet. On every page that uses analytics, paste the following Javascript code between the `<head>` and `</head>` tags:
+
+```html
+  <script src='scripts/require.js'></script>  <!-- loading RequireJS -->
+  <script>
+    require(['https://d24n15hnbwhuhn.cloudfront.net/libs/amplitude-2.9.0-min.gz.js'], function(amplitude) {
+      amplitude.init('YOUR_API_KEY_HERE');
+      window.amplitude = amplitude;  // You can bind the amplitude object to window if you want to use it directly.
+      amplitude.logEvent('Clicked Link A');
+    });
+  </script>
+```
diff --git a/amplitude.js b/amplitude.js
@@ -158,11 +158,11 @@ Amplitude.prototype.runQueuedFunctions = function () {
  *  Maintain mapping of old functions to new instance methods
  */
 Amplitude.prototype.init = function(apiKey, opt_userId, opt_config, callback) {
-  this.getInstance().init(apiKey, opt_userId, opt_config, function() {
+  this.getInstance().init(apiKey, opt_userId, opt_config, function(instance) {
     // make options such as deviceId available for callback functions
-    this.options = this.getInstance().options;
+    this.options = instance.options;
     if (callback && type(callback) === 'function') {
-      callback();
+      callback(instance);
     }
   }.bind(this));
 };
@@ -396,7 +396,7 @@ AmplitudeClient.prototype.init = function(apiKey, opt_userId, opt_config, callba
   }
 
   if (callback && type(callback) === 'function') {
-    callback();
+    callback(this);
   }
 };
 
diff --git a/amplitude.min.js b/amplitude.min.js
diff --git a/src/amplitude-client.js b/src/amplitude-client.js
@@ -147,7 +147,7 @@ AmplitudeClient.prototype.init = function(apiKey, opt_userId, opt_config, callba
   }
 
   if (callback && type(callback) === 'function') {
-    callback();
+    callback(this);
   }
 };
 
diff --git a/src/amplitude.js b/src/amplitude.js
@@ -49,11 +49,11 @@ Amplitude.prototype.runQueuedFunctions = function () {
  *  Maintain mapping of old functions to new instance methods
  */
 Amplitude.prototype.init = function(apiKey, opt_userId, opt_config, callback) {
-  this.getInstance().init(apiKey, opt_userId, opt_config, function() {
+  this.getInstance().init(apiKey, opt_userId, opt_config, function(instance) {
     // make options such as deviceId available for callback functions
-    this.options = this.getInstance().options;
+    this.options = instance.options;
     if (callback && type(callback) === 'function') {
-      callback();
+      callback(instance);
     }
   }.bind(this));
 };
diff --git a/test/browser/amplitudejs-requirejs.html b/test/browser/amplitudejs-requirejs.html
@@ -0,0 +1,68 @@
+<html>
+<!--<script src="src/amplitude-snippet.js" type="text/javascript"></script>-->
+<script src='require.js' type='text/javascript'></script>
+<script>
+    require(['../../amplitude.js'], function(amplitude) {
+      amplitude.init('a2dbce0e18dfe5f8e74493843ff5c053', null, {includeReferrer: true}, function() {
+        alert(amplitude.options.deviceId);
+      });
+
+      window.amplitude = amplitude;
+    });
+
+    var setUserId = function() {
+        var userId = prompt('Input userId', 'user01');
+        amplitude.setUserId(userId);
+    };
+    var setEventUploadThreshold = function() {
+        var eventUploadThreshold = parseInt(prompt('Input eventUploadThreshold', 5));
+        amplitude.options.eventUploadThreshold = eventUploadThreshold;
+    };
+    var logEvent = function() {
+        var event = prompt('Input event type', 'clicked');
+        amplitude.logEvent(event);
+    };
+    var setCity = function() {
+        var city = prompt('Input city', 'San Francisco, CA');
+        amplitude.setUserProperties({city: city});
+    };
+    var addToPhotoCount = function() {
+        var photoCount = parseInt(prompt('Input amount to increment photo count by', '2'), 10);
+        amplitude.identify(new amplitude.Identify().add('photoCount', photoCount));
+    };
+    var clickOnLinkA = function() {
+        amplitude.logEvent('Clicked on link A', null, function() { window.location='https://www.google.com'; });
+    };
+    var setPhotoCount = function() {
+        var photoCount = parseInt(prompt('Input photo count to set', '2'), 10);
+        amplitude.identify(new amplitude.Identify().set('photoCount', photoCount));
+    };
+    var setOncePhotoCount = function() {
+        var photoCount = parseInt(prompt('Input photo count to setOnce', '2'), 10);
+        amplitude.identify(new amplitude.Identify().setOnce('photoCount', photoCount));
+    };
+</script>
+
+<body>
+<h3>Amplitude JS Test with RequireJS</h3>
+<ul>
+    <li><a href="javascript:setUserId();">Set user ID</a></li>
+    <li><a href="javascript:amplitude.setOptOut(!amplitude.options.optOut);">Toggle opt out</a></li>
+    <li><a href="javascript:logEvent();">Log event</a></li>
+    <li><a href="javascript:amplitude.logEvent('clicked button', {color: 'red;', shape: 'triangle', sides: 3});">Log
+        event with event properties</a></li>
+    <li><a href="javascript:amplitude.setUserProperties({age: 30, city: 'San Francisco, CA'});">Set user properties</a></li>
+    <li><a href="javascript:amplitude.options.batchEvents = !amplitude.options.batchEvents;">Toggle batch events</a></li>
+    <li><a href="javascript:setEventUploadThreshold();">Set event upload threshold</a></li>
+    <li><a href="javascript:clickOnLinkA();">Click on link A</a></li>
+    <br><br>Testing Identify calls<br>
+    <li><a href="javascript:addToPhotoCount();">Add to photo count</a></li>
+    <li><a href="javascript:amplitude.identify(new amplitude.Identify().unset('photoCount'));">Unset photo count</a></li>
+    <li><a href="javascript:setPhotoCount();">Set photo count</a></li>
+    <li><a href="javascript:setOncePhotoCount();">Set photo count once</a></li>
+    <li><a href="javascript:setCity();">Set city via setUserProperties</a></li>
+    <li><a href="javascript:amplitude.clearUserProperties();">Clear all user properties</a></li>
+    <br><br>
+    <li><a href="/test/browser/amplitudejs2.html">Go to second page</a></li>
+</body>
+</html>
diff --git a/test/browser/require.js b/test/browser/require.js

Original file line number	Diff line number	Diff line change
`@@ -147,7 +147,7 @@ AmplitudeClient.prototype.init = function(apiKey, opt_userId, opt_config, callba`
`147`	`147`	`}`
`148`	`148`
`149`	`149`	`if (callback && type(callback) === 'function') {`
`150`		`- callback();`
	`150`	`+ callback(this);`
`151`	`151`	`}`
`152`	`152`	`};`
`153`	`153`