feat: Support seamless integration with amplitude experiment SDK (#457)

Author: bgiori

.gitignore

@@ -19,3 +19,6 @@ amplitude.umd.min.js
 amplitude.native.js
 amplitude.nocompat.js
 amplitude.nocompat.min.js
+
+# For WebStorm IDE
+.idea/

package.json

@@ -19,7 +19,8 @@
     "@amplitude/utils": "^1.0.5",
     "@babel/runtime": "^7.3.4",
     "blueimp-md5": "^2.10.0",
-    "query-string": "5"
+    "query-string": "5",
+    "@amplitude/analytics-connector": "1.0.0"
   },
   "devDependencies": {
     "@amplitude/eslint-plugin-amplitude": "^1.0.1",
@@ -56,13 +57,13 @@
     "mocha": "^4.0.1",
     "prettier": "^2.2.1",
     "requirejs": "^2.3.6",
-    "rollup": "^1.4.1",
-    "rollup-plugin-babel": "^4.3.2",
-    "rollup-plugin-commonjs": "^9.2.1",
-    "rollup-plugin-json": "^4.0.0",
-    "rollup-plugin-legacy": "^1.0.0",
-    "rollup-plugin-node-resolve": "^4.0.1",
-    "rollup-plugin-replace": "^2.1.0",
+    "rollup": "^2.26.3",
+    "@rollup/plugin-babel": "^5.2.0",
+    "@rollup/plugin-commonjs": "^15.0.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@rollup/plugin-replace": "^2.3.3",
+    "@rollup/plugin-legacy": "^2.2.0",
     "rollup-plugin-uglify": "^6.0.2",
     "semantic-release": "^17.1.1",
     "sinon": "^7.0.0",

rollup.config.js

@@ -1,8 +1,8 @@
-import resolve from 'rollup-plugin-node-resolve';
-import commonjs from 'rollup-plugin-commonjs';
-import replace from 'rollup-plugin-replace';
-import babel from 'rollup-plugin-babel';
-import json from 'rollup-plugin-json';
+import babel from '@rollup/plugin-babel';
+import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
+import resolve from '@rollup/plugin-node-resolve';
+import replace from '@rollup/plugin-replace';
 
 export default {
   input: 'src/index.js',
@@ -16,18 +16,22 @@ export default {
   },
   plugins: [
     json(),
-    babel({
-      exclude: 'node_modules/**',
-      plugins: ['@babel/plugin-proposal-object-rest-spread'],
-    }),
     resolve({
       browser: true,
     }),
     replace({
+      preventAssignment: true,
       BUILD_COMPAT_SNIPPET: 'true',
       BUILD_COMPAT_LOCAL_STORAGE: 'true',
       BUILD_COMPAT_2_0: 'true',
     }),
     commonjs(),
+    babel({
+      babelHelpers: 'bundled',
+      exclude: 'node_modules/**',
+      plugins: [
+        '@babel/plugin-proposal-object-rest-spread'
+      ],
+    }),
   ],
 };

rollup.esm.js

@@ -1,7 +1,7 @@
-import commonjs from 'rollup-plugin-commonjs';
-import replace from 'rollup-plugin-replace';
-import babel from 'rollup-plugin-babel';
-import json from 'rollup-plugin-json';
+import commonjs from '@rollup/plugin-commonjs';
+import replace from '@rollup/plugin-replace';
+import babel from '@rollup/plugin-babel';
+import json from '@rollup/plugin-json';
 
 export default {
   input: 'src/index.js',
@@ -12,21 +12,21 @@ export default {
   },
   plugins: [
     json(),
-    babel({
-      exclude: 'node_modules/**',
-      plugins: [
-        '@babel/plugin-transform-runtime',
-        '@babel/plugin-proposal-object-rest-spread'
-      ],
-      runtimeHelpers: true
-    }),
     replace({
+      preventAssignment: true,
       BUILD_COMPAT_SNIPPET: 'false',
       BUILD_COMPAT_LOCAL_STORAGE: 'true',
       BUILD_COMPAT_2_0: 'true',
     }),
     commonjs({
       include: "node_modules/**"
     }),
+    babel({
+      babelHelpers: 'bundled',
+      exclude: 'node_modules/**',
+      plugins: [
+        '@babel/plugin-proposal-object-rest-spread'
+      ],
+    }),
   ],
 };

rollup.snippet-tests.js

@@ -1,5 +1,5 @@
 import config from './rollup.config.js';
-import legacy from 'rollup-plugin-legacy';
+import legacy from '@rollup/plugin-legacy';
 
 config.plugins.push(legacy({
   './amplitude-snippet.min.js': 'amplitude',

rollup.umd.js

@@ -1,8 +1,8 @@
-import resolve from 'rollup-plugin-node-resolve';
-import commonjs from 'rollup-plugin-commonjs';
-import replace from 'rollup-plugin-replace';
-import babel from 'rollup-plugin-babel';
-import json from 'rollup-plugin-json';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import replace from '@rollup/plugin-replace';
+import babel from '@rollup/plugin-babel';
+import json from '@rollup/plugin-json';
 
 export default {
   input: 'src/index.js',
@@ -16,18 +16,22 @@ export default {
   },
   plugins: [
     json(),
-    babel({
-      exclude: 'node_modules/**',
-      plugins: ['@babel/plugin-proposal-object-rest-spread'],
-    }),
     resolve({
       browser: true,
     }),
     replace({
+      preventAssignment: true,
       BUILD_COMPAT_SNIPPET: 'true',
       BUILD_COMPAT_LOCAL_STORAGE: 'true',
       BUILD_COMPAT_2_0: 'true',
     }),
     commonjs(),
+    babel({
+      babelHelpers: 'bundled',
+      exclude: 'node_modules/**',
+      plugins: [
+        '@babel/plugin-proposal-object-rest-spread'
+      ],
+    }),
   ],
 };

src/amplitude-client.js

@@ -21,6 +21,8 @@ import { AmplitudeServerZone, getEventLogApi } from './server-zone';
 import ConfigManager from './config-manager';
 import GlobalScope from './global-scope';
 
+import { AnalyticsConnector } from '@amplitude/analytics-connector';
+
 /**
  * AmplitudeClient SDK API - instance constructor.
  * The Amplitude class handles creation of client instances, all you need to do is call amplitude.getInstance()
@@ -56,6 +58,9 @@ var AmplitudeClient = function AmplitudeClient(instanceName) {
   this._sessionId = null;
   this._isInitialized = false;
 
+  // used to integrate with experiment SDK (client-side exposure tracking & real-time user properties)
+  this._connector = null;
+
   this._userAgent = (navigator && navigator.userAgent) || null;
 };
 
@@ -80,6 +85,9 @@ AmplitudeClient.prototype.init = function init(apiKey, opt_userId, opt_config, o
   }
 
   try {
+    // used to integrate with experiment SDK (client-side exposure tracking & real-time user properties)
+    this._connector = AnalyticsConnector.getInstance(this._instanceName);
+
     _parseConfig(this.options, opt_config);
     if (
       (isBrowserEnv() || utils.isWebWorkerEnvironment()) &&
@@ -263,6 +271,21 @@ AmplitudeClient.prototype.init = function init(apiKey, opt_userId, opt_config, o
         );
       }
     }
+
+    // Sets an event receiver to receive and forward exposure events from the experiment SDK.
+    this._connector.eventBridge.setEventReceiver((event) => {
+      this._logEvent(event.eventType, event.eventProperties, event.userProperties);
+    });
+
+    // Set the user ID and device ID in the core identity store to enable fetching variants.
+    const editor = this._connector.identityStore.editIdentity();
+    if (this.options.deviceId) {
+      editor.setDeviceId(this.options.deviceId);
+    }
+    if (this.options.userId) {
+      editor.setUserId(this.options.userId);
+    }
+    editor.commit();
   } catch (err) {
     utils.log.error(err);
     if (opt_config && type(opt_config.onError) === 'function') {
@@ -925,6 +948,12 @@ AmplitudeClient.prototype.setUserId = function setUserId(userId, startNewSession
     }
 
     _saveCookieData(this);
+
+    // Update core identity store to propagate new user info
+    // to experiment SDK and trigger a fetch if the ID has changed.
+    if (this._connector) {
+      this._connector.identityStore.editIdentity().setUserId(this.options.userId).commit();
+    }
   } catch (e) {
     utils.log.error(e);
   }
@@ -1054,6 +1083,12 @@ AmplitudeClient.prototype.setDeviceId = function setDeviceId(deviceId) {
     if (!utils.isEmptyString(deviceId)) {
       this.options.deviceId = '' + deviceId;
       _saveCookieData(this);
+
+      // Update core identity store to propagate new user info
+      // to experiment SDK and trigger a fetch if the ID has changed.
+      if (this._connector) {
+        this._connector.identityStore.editIdentity().setDeviceId(this.options.deviceId).commit();
+      }
     }
   } catch (e) {
     utils.log.error(e);
@@ -1395,6 +1430,15 @@ AmplitudeClient.prototype._logEvent = function _logEvent(
 
     this._sendEventsIfReady();
 
+    // In the case of an identify event, update the core user store so the experiment SDK can fetch new variants and
+    // utilize user properties in real time.
+    if (eventType === Constants.IDENTIFY_EVENT && this._connector) {
+      this._connector.identityStore
+        .editIdentity()
+        .updateUserProperties(utils.truncate(utils.validateProperties(userProperties)))
+        .commit();
+    }
+
     return eventId;
   } catch (e) {
     utils.log.error(e);