feat: implement initial setup of amplitude SDK (#4044)

* init commit

* add amplitude ts sdk to package.json

* add more comments and documentation

* respond to vm comments

* respond to cmcewen comments

* fix: remove unused constants

* fix: respond to cmcewen comments + initialize analytics in app.tsx + add missing return statement

.env.production

+REACT_APP_AMPLITUDE_KEY="1c694b28cd089acc2c386d518f93a775"
 REACT_APP_INFURA_KEY="099fc58e0de9451d80b18d7c74caa7c1"
 REACT_APP_FORTMATIC_KEY="pk_live_F937DF033A1666BF"
 REACT_APP_GOOGLE_ANALYTICS_ID="G-KDP9B6W4H8"

package.json

@@ -106,6 +106,7 @@
     "typescript": "^4.4.3"
   },
   "dependencies": {
+    "@amplitude/analytics-browser": "^0.5.1",
     "@coinbase/wallet-sdk": "^3.3.0",
     "@fontsource/ibm-plex-mono": "^4.5.1",
     "@fontsource/inter": "^4.5.1",

src/components/AmplitudeAnalytics/constants.ts

+/**
+ * Event names that can occur in this application.
+ *
+ * Subject to change as new features are added and new events are defined
+ * and logged.
+ */
+export enum EventName {
+  SWAP_SUBMITTED = 'Swap Submitted',
+  PAGE_VIEWED = 'Page Viewed',
+}

src/components/AmplitudeAnalytics/index.ts

+import { Identify, identify, init, track } from '@amplitude/analytics-browser'
+
+/**
+ * Initializes Amplitude with API key for project.
+ *
+ * Uniswap has two Amplitude projects: test and production. You must be a
+ * member of the organization on Amplitude to view details.
+ */
+export function initializeAnalytics() {
+  if (process.env.NODE_ENV === 'development') return
+
+  const API_KEY = process.env.REACT_APP_AMPLITUDE_KEY
+  if (typeof API_KEY === 'undefined') {
+    throw new Error(`REACT_APP_AMPLITUDE_KEY must be a defined environment variable`)
+  }
+
+  init(
+    API_KEY,
+    /* userId= */ undefined, // User ID should be undefined to let Amplitude default to Device ID
+    /* options= */ {
+      // Disable tracking of private user information by Amplitude
+      trackingOptions: {
+        ipAddress: false,
+        carrier: false,
+        city: false,
+        region: false,
+        country: false,
+        dma: false, // Disables designated market area tracking
+      },
+    }
+  )
+}
+
+/** Sends an event to Amplitude. */
+export function sendAnalyticsEvent(eventName: string, eventProperties?: Record<string, unknown>) {
+  if (process.env.NODE_ENV === 'development') {
+    console.log('amplitude event log:', `${eventName}: ${JSON.stringify(eventProperties)}`)
+    return
+  }
+
+  track(eventName, eventProperties)
+}
+
+/**
+ * Class that exposes methods to modify the User Model's properties in
+ * Amplitude that represents the current session's user.
+ *
+ * See https://help.amplitude.com/hc/en-us/articles/115002380567-User-properties-and-event-properties
+ * for details.
+ */
+class UserModel {
+  private _isDevEnvironemnt = true
+
+  constructor() {
+    process.env.NODE_ENV === 'development' ? (this._isDevEnvironemnt = true) : (this._isDevEnvironemnt = false)
+  }
+
+  public set(propertyName: string, propertyValue: string | number) {
+    if (this._isDevEnvironemnt) {
+      console.log('amplitude user model update with operation set:', `${propertyName}: ${propertyValue}`)
+      return
+    }
+    const identifyObj = new Identify()
+    identifyObj.set(propertyName, propertyValue)
+    identify(identifyObj)
+  }
+
+  public setOnce(propertyName: string, propertyValue: string | number) {
+    if (this._isDevEnvironemnt) {
+      console.log('amplitude user model update with operation setOnce:', `${propertyName}: ${propertyValue}`)
+      return
+    }
+    const identifyObj = new Identify()
+    identifyObj.setOnce(propertyName, propertyValue)
+    identify(identifyObj)
+  }
+
+  public add(propertyName: string, propertyValue: string | number) {
+    if (this._isDevEnvironemnt) {
+      console.log('amplitude user model update with operation add:', `${propertyName}: ${propertyValue}`)
+      return
+    }
+    const identifyObj = new Identify()
+    identifyObj.add(propertyName, typeof propertyValue === 'number' ? propertyValue : 0)
+    identify(identifyObj)
+  }
+
+  public postInsert(propertyName: string, propertyValue: string | number) {
+    if (this._isDevEnvironemnt) {
+      console.log('amplitude user model update with operation postInsert:', `${propertyName}: ${propertyValue}`)
+      return
+    }
+    const identifyObj = new Identify()
+    identifyObj.postInsert(propertyName, propertyValue)
+    identify(identifyObj)
+  }
+
+  public remove(propertyName: string, propertyValue: string | number) {
+    if (this._isDevEnvironemnt) {
+      console.log('amplitude user model update with operation remove:', `${propertyName}: ${propertyValue}`)
+      return
+    }
+    const identifyObj = new Identify()
+    identifyObj.remove(propertyName, propertyValue)
+    identify(identifyObj)
+  }
+}
+
+export const userModel = new UserModel()

src/pages/App.tsx

+import { initializeAnalytics } from 'components/AmplitudeAnalytics'
 import Loader from 'components/Loader'
 import TopLevelModals from 'components/TopLevelModals'
 import ApeModeQueryParamReader from 'hooks/useApeModeQueryParamReader'
@@ -66,6 +67,7 @@ const Marginer = styled.div`
 export default function App() {
   const history = useHistory()
   useAnalyticsReporter(useLocation())
+  initializeAnalytics()
 
   useEffect(() => {
     const unlisten = history.listen(() => {

yarn.lock

@@ -2,6 +2,34 @@
 # yarn lockfile v1
 
 
+"@amplitude/analytics-browser@^0.5.1":
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/@amplitude/analytics-browser/-/analytics-browser-0.5.1.tgz#0d7304a64251b9b65e826948e5afd311d6118576"
+  integrity sha512-CDeV9S+clElWsO56L8+hGyG/nFSDb56cSlHZhnTEovA1H6YNqI7/NXPDTVE619YEKIY/boNKSSqgNIcf4NN0VQ==
+  dependencies:
+    "@amplitude/analytics-core" "^0.4.1"
+    "@amplitude/analytics-types" "^0.3.0"
+    "@amplitude/ua-parser-js" "^0.7.31"
+    tslib "^2.3.1"
+
+"@amplitude/analytics-core@^0.4.1":
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/@amplitude/analytics-core/-/analytics-core-0.4.1.tgz#0e1a7ae6470bcec277a0389e16dd110519f6750e"
+  integrity sha512-letpuJVuWI6TAkaZ0Szi4FxqD2xukjvOHQ+D/GHBpspUiK9ETpjT9vXNrczw5Zs1B5hgLHfNOlhMfdWHoG+3qg==
+  dependencies:
+    "@amplitude/analytics-types" "^0.3.0"
+    tslib "^2.3.1"
+
+"@amplitude/analytics-types@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@amplitude/analytics-types/-/analytics-types-0.3.0.tgz#3626f2907e4dd353f0ca3a21b847d7560a1c4da9"
+  integrity sha512-Hu/emt6mEpSGmOnLyqZGe75a5BNH3j9WJWBDFMBOZ1gLsbrxKtrb6w3EQy6yRROZ8Uyn04wC0veVUYyETwH3vg==
+
+"@amplitude/ua-parser-js@^0.7.31":
+  version "0.7.31"
+  resolved "https://registry.yarnpkg.com/@amplitude/ua-parser-js/-/ua-parser-js-0.7.31.tgz#749bf7cb633cfcc7ff3c10805bad7c5f6fbdbc61"
+  integrity sha512-+z8UGRaj13Pt5NDzOnkTBy49HE2CX64jeL0ArB86HAtilpnfkPB7oqkigN7Lf2LxscMg4QhFD7mmCfedh3rqTg==
+
 "@ardatan/aggregate-error@0.0.6":
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/@ardatan/aggregate-error/-/aggregate-error-0.0.6.tgz#fe6924771ea40fc98dc7a7045c2e872dc8527609"
@@ -17700,10 +17728,10 @@ tslib@^1.0.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2, tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@~2.3.0:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
-  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
+tslib@^2, tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.1:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
 
 tslib@~2.0.1:
   version "2.0.3"
@@ -17720,6 +17748,11 @@ tslib@~2.2.0:
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz"
   integrity sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==
 
+tslib@~2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
+  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
+
 tsutils@^3.17.1, tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"