From 30486c504672e830956ef090e2c2103ac7672c61 Mon Sep 17 00:00:00 2001
From: Brian Giori <brian.giori@amplitude.com>
Date: Mon, 6 Feb 2023 11:59:00 -0800
Subject: [PATCH] fix: device tracking with amplitude integration

---
 .../html-app/amplitude-integration/index.html |  10 +-
 examples/html-app/basic/index.html            |  11 +-
 .../amplitude-integration/src/index.tsx       |   4 +-
 examples/react-app/basic/src/index.tsx        |   2 +-
 packages/experiment-browser/src/factory.ts    |   6 +-
 .../src/integration/default.ts                |   9 +-
 .../test/defaultUserProvider.test.ts          | 183 ++++++++++++++++++
 7 files changed, 213 insertions(+), 12 deletions(-)
 create mode 100644 packages/experiment-browser/test/defaultUserProvider.test.ts

diff --git a/examples/html-app/amplitude-integration/index.html b/examples/html-app/amplitude-integration/index.html
index f4d06ea1..c9cd26f2 100644
--- a/examples/html-app/amplitude-integration/index.html
+++ b/examples/html-app/amplitude-integration/index.html
@@ -12,30 +12,30 @@
   -->
   <script type="text/javascript">
     !function(){"use strict";!function(e,t){var r=e.amplitude||{_q:[],_iq:[]};if(r.invoked)e.console&&console.error&&console.error("Amplitude snippet has been loaded.");else{r.invoked=!0;var n=t.createElement("script");n.type="text/javascript",n.crossOrigin="anonymous",n.async=!0,
-      n.src="https://unpkg.com/@amplitude/analytics-browser@1.5.4/lib/scripts/amplitude-min.js",n.onload=function(){e.amplitude.runQueuedFunctions||console.log("[Amplitude] Error: could not load SDK")};var s=t.getElementsByTagName("script")[0];function v(e,t){e.prototype[t]=function(){return this._q.push({name:t,args:Array.prototype.slice.call(arguments,0)}),this}}s.parentNode.insertBefore(n,s);for(var o=function(){return this._q=[],this},i=["add","append","clearAll","prepend","set","setOnce","unset","preInsert","postInsert","remove","getUserProperties"],a=0;a<i.length;a++)v(o,i[a]);r.Identify=o;for(var u=function(){return this._q=[],this},c=["getEventProperties","setProductId","setQuantity","setPrice","setRevenue","setRevenueType","setEventProperties"],l=0;l<c.length;l++)v(u,c[l]);r.Revenue=u;var p=["getDeviceId","setDeviceId","getSessionId","setSessionId","getUserId","setUserId","setOptOut","setTransport","reset"],d=["init","add","remove","track","logEvent","identify","groupIdentify","setGroup","revenue","flush"];function f(e){function t(t,r){e[t]=function(){var n={promise:new Promise((r=>{e._q.push({name:t,args:Array.prototype.slice.call(arguments,0),resolve:r})}))};if(r)return n}}for(var r=0;r<p.length;r++)t(p[r],!1);for(var n=0;n<d.length;n++)t(d[n],!0)}f(r),r.createInstance=function(){var e=r._iq.push({_q:[]})-1;return f(r._iq[e]),r._iq[e]},e.amplitude=r}}(window,document)}();
+      n.src="https://unpkg.com/@amplitude/analytics-browser@1.7.1/lib/scripts/amplitude-min.js",n.onload=function(){e.amplitude.runQueuedFunctions||console.log("[Amplitude] Error: could not load SDK")};var s=t.getElementsByTagName("script")[0];function v(e,t){e.prototype[t]=function(){return this._q.push({name:t,args:Array.prototype.slice.call(arguments,0)}),this}}s.parentNode.insertBefore(n,s);for(var o=function(){return this._q=[],this},i=["add","append","clearAll","prepend","set","setOnce","unset","preInsert","postInsert","remove","getUserProperties"],a=0;a<i.length;a++)v(o,i[a]);r.Identify=o;for(var u=function(){return this._q=[],this},c=["getEventProperties","setProductId","setQuantity","setPrice","setRevenue","setRevenueType","setEventProperties"],l=0;l<c.length;l++)v(u,c[l]);r.Revenue=u;var p=["getDeviceId","setDeviceId","getSessionId","setSessionId","getUserId","setUserId","setOptOut","setTransport","reset"],d=["init","add","remove","track","logEvent","identify","groupIdentify","setGroup","revenue","flush"];function f(e){function t(t,r){e[t]=function(){var n={promise:new Promise((r=>{e._q.push({name:t,args:Array.prototype.slice.call(arguments,0),resolve:r})}))};if(r)return n}}for(var r=0;r<p.length;r++)t(p[r],!1);for(var n=0;n<d.length;n++)t(d[n],!0)}f(r),r.createInstance=function(){var e=r._iq.push({_q:[]})-1;return f(r._iq[e]),r._iq[e]},e.amplitude=r}}(window,document)}();
 
     // TODO Replace API_KEY with your analytics api key.
-    amplitude.init('a6dd847b9d2f03c816d4f3f8458cdc1d');
+    amplitude.init('API_KEY');
 
     /**
      * User ID, device ID, and identified user properties are used by the
      * Experiment SDK in the fetch request.
      */
-    amplitude.setUserId('user@company.com');
+    amplitude.setUserId('test-resolve');
     amplitude.identify(new amplitude.Identify().set('premium', true));
   </script>
 
   <!--
     Install the Amplitude Experiment SDK via script tag.
   -->
-  <script src="https://unpkg.com/@amplitude/experiment-js-client@1.5.6/dist/experiment.umd.js"></script>
+  <script src="https://unpkg.com/@amplitude/experiment-js-client@1.7.0/dist/experiment.umd.js"></script>
   <script>
     /**
      * Initialize the experiment client with the Amplitude Analytics integration
      * and set a variable on the window.
      */
     // TODO Replace DEPLOYMENT_KEY with your own deployment
-    window.experiment = Experiment.Experiment.initializeWithAmplitudeAnalytics('client-QQEu7NCkqMmhdGdWl3Y4post5mZaVkCL', { debug: true });
+    window.experiment = Experiment.Experiment.initializeWithAmplitudeAnalytics('DEPLOYMENT_KEY', { debug: true });
   </script>
   </script>
   <body>
diff --git a/examples/html-app/basic/index.html b/examples/html-app/basic/index.html
index f42ddbe5..3d317674 100644
--- a/examples/html-app/basic/index.html
+++ b/examples/html-app/basic/index.html
@@ -6,7 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Experiment Example - Basic</title>
   </head>
-  <script src="https://unpkg.com/@amplitude/experiment-js-client@1.5.6/dist/experiment.umd.js"></script>
+  <script src="https://unpkg.com/@amplitude/experiment-js-client@1.7.0/dist/experiment.umd.js"></script>
   <script>
     /**
      * Initialize the experiment client and set a variable on the window.
@@ -27,7 +27,14 @@ <h2>Amplitude Experiment Browser Example - Basic</h2>
 
     <!-- TODO Replace FLAG_KEY with your flag key -->
     <button onclick="
-      const variants = window.experiment.variant('FLAG_KEY');
+      const variant = window.experiment.variant('space-permissions');
+      if (variant?.value === 'admin') {
+        // redirect to admin.amplitude.com
+      } else if (variant?.value === 'on') {
+        // redirect to ...
+      } else {
+        // off
+      }
       document.getElementById('output').innerText = JSON.stringify(variants);
     ">Variant</button>
 
diff --git a/examples/react-app/amplitude-integration/src/index.tsx b/examples/react-app/amplitude-integration/src/index.tsx
index a7ad920e..34fc0f83 100644
--- a/examples/react-app/amplitude-integration/src/index.tsx
+++ b/examples/react-app/amplitude-integration/src/index.tsx
@@ -8,7 +8,7 @@ import { Experiment } from '@amplitude/experiment-js-client';
 /**
  * Initialize the Amplitude Analytics SDK.
  */
-amplitude.init('a6dd847b9d2f03c816d4f3f8458cdc1d', 'user@company.com');
+amplitude.init('API_KEY', 'user@company.com');
 amplitude.identify(new amplitude.Identify().set('premium', true))
 
 /**
@@ -19,7 +19,7 @@ amplitude.identify(new amplitude.Identify().set('premium', true))
  * automatically be used by the Experiment SDK on fetch().
  */
 export const experiment = Experiment.initializeWithAmplitudeAnalytics(
-  'client-QQEu7NCkqMmhdGdWl3Y4post5mZaVkCL',
+  'DEPLOYMENT_KEY',
   { debug: true }
 );
 
diff --git a/examples/react-app/basic/src/index.tsx b/examples/react-app/basic/src/index.tsx
index e3852107..67576fdc 100644
--- a/examples/react-app/basic/src/index.tsx
+++ b/examples/react-app/basic/src/index.tsx
@@ -8,7 +8,7 @@ import { Experiment } from '@amplitude/experiment-js-client';
  * Initialize the Amplitude Experiment SDK and export the initialized client.
  */
 export const experiment = Experiment.initialize(
-  'client-QQEu7NCkqMmhdGdWl3Y4post5mZaVkCL',
+  'DEPLOYMENT_KEY',
   { debug: true }
 );
 
diff --git a/packages/experiment-browser/src/factory.ts b/packages/experiment-browser/src/factory.ts
index 0116725b..0bc68272 100644
--- a/packages/experiment-browser/src/factory.ts
+++ b/packages/experiment-browser/src/factory.ts
@@ -30,6 +30,7 @@ const initialize = (
     config = {
       userProvider: new DefaultUserProvider(
         connector.applicationContextProvider,
+        config?.userProvider,
       ),
       ...config,
     };
@@ -60,7 +61,10 @@ const initializeWithAmplitudeAnalytics = (
   const connector = AnalyticsConnector.getInstance(instanceName);
   if (!instances[instanceKey]) {
     config = {
-      userProvider: new ConnectorUserProvider(connector.identityStore),
+      userProvider: new DefaultUserProvider(
+        connector.applicationContextProvider,
+        new ConnectorUserProvider(connector.identityStore),
+      ),
       exposureTrackingProvider: new ConnectorExposureTrackingProvider(
         connector.eventBridge,
       ),
diff --git a/packages/experiment-browser/src/integration/default.ts b/packages/experiment-browser/src/integration/default.ts
index 0428c487..c765d0b3 100644
--- a/packages/experiment-browser/src/integration/default.ts
+++ b/packages/experiment-browser/src/integration/default.ts
@@ -5,11 +5,17 @@ import { ExperimentUser } from '../types/user';
 
 export class DefaultUserProvider implements ExperimentUserProvider {
   private readonly contextProvider: ApplicationContextProvider;
-  constructor(applicationContextProvider: ApplicationContextProvider) {
+  private readonly userProvider: ExperimentUserProvider | undefined;
+  constructor(
+    applicationContextProvider: ApplicationContextProvider,
+    userProvider?: ExperimentUserProvider,
+  ) {
     this.contextProvider = applicationContextProvider;
+    this.userProvider = userProvider;
   }
 
   getUser(): ExperimentUser {
+    const user = this.userProvider?.getUser() || {};
     const context = this.contextProvider.getApplicationContext();
     return {
       version: context.versionName,
@@ -17,6 +23,7 @@ export class DefaultUserProvider implements ExperimentUserProvider {
       platform: context.platform,
       os: context.os,
       device_model: context.deviceModel,
+      ...user,
     };
   }
 }
diff --git a/packages/experiment-browser/test/defaultUserProvider.test.ts b/packages/experiment-browser/test/defaultUserProvider.test.ts
new file mode 100644
index 00000000..ab06fb68
--- /dev/null
+++ b/packages/experiment-browser/test/defaultUserProvider.test.ts
@@ -0,0 +1,183 @@
+import { ApplicationContext } from '@amplitude/analytics-connector';
+import { DefaultUserProvider } from 'src/integration/default';
+import { ExperimentUser } from 'src/types/user';
+
+const applicationContext: ApplicationContext = {
+  versionName: 'versionName',
+  language: 'language',
+  platform: 'platform',
+  os: 'os',
+  deviceModel: 'deviceModel',
+};
+
+describe('DefaultUserProvider', () => {
+  test('basic wrapped provider', async () => {
+    const user: ExperimentUser = {
+      user_id: 'user_id',
+      device_id: 'device_id',
+      user_properties: {
+        k1: 'v1',
+      },
+    };
+    const applicationContext: ApplicationContext = {
+      language: 'language',
+      platform: 'platform',
+      os: 'os',
+      deviceModel: 'deviceModel',
+      versionName: 'versionName',
+    };
+    const defaultUserProvider = new DefaultUserProvider(
+      {
+        versionName: 'versionName',
+        getApplicationContext(): ApplicationContext {
+          return applicationContext;
+        },
+      },
+      {
+        getUser(): ExperimentUser {
+          return user;
+        },
+      },
+    );
+    const actualUser = defaultUserProvider.getUser();
+    const expectedUser = {
+      user_id: 'user_id',
+      device_id: 'device_id',
+      user_properties: {
+        k1: 'v1',
+      },
+      language: 'language',
+      platform: 'platform',
+      os: 'os',
+      device_model: 'deviceModel',
+      version: 'versionName',
+    };
+    expect(actualUser).toEqual(expectedUser);
+  });
+
+  test('wrapped provider not set', async () => {
+    const applicationContext: ApplicationContext = {
+      language: 'language',
+      platform: 'platform',
+      os: 'os',
+      deviceModel: 'deviceModel',
+      versionName: 'versionName',
+    };
+    const defaultUserProvider = new DefaultUserProvider({
+      versionName: 'versionName',
+      getApplicationContext(): ApplicationContext {
+        return applicationContext;
+      },
+    });
+    const actualUser = defaultUserProvider.getUser();
+    const expectedUser = {
+      language: 'language',
+      platform: 'platform',
+      os: 'os',
+      device_model: 'deviceModel',
+      version: 'versionName',
+    };
+    expect(actualUser).toEqual(expectedUser);
+  });
+
+  test('wrapped provider undefined', async () => {
+    const applicationContext: ApplicationContext = {
+      language: 'language',
+      platform: 'platform',
+      os: 'os',
+      deviceModel: 'deviceModel',
+      versionName: 'versionName',
+    };
+    const defaultUserProvider = new DefaultUserProvider(
+      {
+        versionName: 'versionName',
+        getApplicationContext(): ApplicationContext {
+          return applicationContext;
+        },
+      },
+      undefined,
+    );
+    const actualUser = defaultUserProvider.getUser();
+    const expectedUser = {
+      language: 'language',
+      platform: 'platform',
+      os: 'os',
+      device_model: 'deviceModel',
+      version: 'versionName',
+    };
+    expect(actualUser).toEqual(expectedUser);
+  });
+
+  test('wrapped provider null', async () => {
+    const applicationContext: ApplicationContext = {
+      language: 'language',
+      platform: 'platform',
+      os: 'os',
+      deviceModel: 'deviceModel',
+      versionName: 'versionName',
+    };
+    const defaultUserProvider = new DefaultUserProvider(
+      {
+        versionName: 'versionName',
+        getApplicationContext(): ApplicationContext {
+          return applicationContext;
+        },
+      },
+      null,
+    );
+    const actualUser = defaultUserProvider.getUser();
+    const expectedUser = {
+      language: 'language',
+      platform: 'platform',
+      os: 'os',
+      device_model: 'deviceModel',
+      version: 'versionName',
+    };
+    expect(actualUser).toEqual(expectedUser);
+  });
+
+  test('default value overwritten by wrapped provider', async () => {
+    const user: ExperimentUser = {
+      user_id: 'user_id',
+      device_id: 'device_id',
+      user_properties: {
+        k1: 'v1',
+      },
+      device_model: 'deviceModel2',
+    };
+    const applicationContext: ApplicationContext = {
+      language: 'language',
+      platform: 'platform',
+      os: 'os',
+      deviceModel: 'deviceModel',
+      versionName: 'versionName',
+    };
+    const defaultUserProvider = new DefaultUserProvider(
+      {
+        versionName: 'versionName',
+        getApplicationContext(): ApplicationContext {
+          return applicationContext;
+        },
+      },
+      {
+        getUser(): ExperimentUser {
+          return user;
+        },
+      },
+    );
+    const actualUser = defaultUserProvider.getUser();
+    const expectedUser = {
+      user_id: 'user_id',
+      device_id: 'device_id',
+      user_properties: {
+        k1: 'v1',
+      },
+      language: 'language',
+      platform: 'platform',
+      os: 'os',
+      device_model: 'deviceModel2',
+      version: 'versionName',
+    };
+    expect(actualUser).toEqual(expectedUser);
+  });
+});