Merge pull request #1521 from rikoe/feat/ARTP-982-analytics

feat(client): capture analytics (ARTP-982)

src/client/package.json

@@ -74,11 +74,12 @@
     "react": "^16.8.6",
     "react-copy-to-clipboard": "^5.0.1",
     "react-dom": "^16.8.6",
+    "react-ga": "^2.7.0",
     "react-helmet": "^5.2.1",
     "react-hotkeys": "^2.0.0",
     "react-measure": "^2.3.0",
     "react-redux": "7.1.0",
-    "react-router-dom": "^5.0.1",
+    "react-router-dom": "^5.1.0",
     "react-sizeme": "2.3.6",
     "react-spring": "^5.5.4",
     "react-switch": "^5.0.1",
@@ -116,7 +117,7 @@
     "@types/react-dom": "^16.8.5",
     "@types/react-helmet": "^5.0.9",
     "@types/react-redux": "^7.1.1",
-    "@types/react-router-dom": "^4.3.4",
+    "@types/react-router-dom": "^5.1.0",
     "@types/react-test-renderer": "^16.8.3",
     "@types/react-virtualized": "9.7.10",
     "@types/recharts": "^1.1.20",
@@ -127,12 +128,12 @@
     "cors": "^2.8.5",
     "cross-env": "^6.0.3",
     "get-json": "^1.0.1",
+    "jest-styled-components": "^6.3.4",
     "npm-run-all": "^4.1.2",
     "react-scripts": "^3.3.0",
     "react-test-renderer": "^16.12.0",
     "redux-devtools-extension": "^2.13.2",
     "source-map-explorer": "^2.0.1",
-    "jest-styled-components": "^6.3.4",
     "typescript": "^3.6.4"
   },
   "optionalDependencies": {

src/client/src/apps/MainRoute/MainRoute.tsx

@@ -1,13 +1,17 @@
 import React, { useEffect, useState } from 'react'
+import ReactGA from 'react-ga'
 import Helmet from 'react-helmet'
 import { Provider as ReduxProvider } from 'react-redux'
 import { ThemeProvider } from 'rt-theme'
 import { Router } from './data'
 import GlobalScrollbarStyle from './GlobalScrollbarStyle'
 import { getPlatformAsync, PlatformProvider } from 'rt-platforms'
 import { createStore } from './store'
+import { useHistory } from 'react-router-dom'
 
 const MainRoute = () => {
+  const routeHistory = useHistory()
+
   const [platform, setPlatform] = useState()
   const [store, setStore] = useState()
 
@@ -21,6 +25,25 @@ const MainRoute = () => {
     getPlatform()
   }, [])
 
+  useEffect(() => {
+    if (platform) {
+      ReactGA.set({
+        dimension1: platform.type,
+        dimension2: platform.name,
+        page: window.location.pathname,
+      })
+      ReactGA.pageview(window.location.pathname)
+    }
+  }, [platform])
+
+  useEffect(() => {
+    const stopListening = routeHistory.listen(location => {
+      ReactGA.set({ page: location.pathname })
+      ReactGA.pageview(location.pathname)
+    })
+    return stopListening
+  }, [routeHistory])
+
   if (!store || !platform) {
     return <></>
   }

src/client/src/apps/MainRoute/components/app-header/Header.tsx

@@ -1,9 +1,18 @@
 import React, { useCallback } from 'react'
+import ReactGA from 'react-ga'
 import { styled, ThemeName, useTheme } from 'rt-theme'
 import Logo from './Logo'
 
 const Header: React.FC = ({ children }) => {
-  const onLogoClick = useCallback(() => window.open('https://weareadaptive.com/'), [])
+  const onLogoClick = useCallback(() => {
+    ReactGA.event({
+      category: 'RT - Outbound',
+      action: 'click',
+      label: 'https://weareadaptive.com',
+      transport: 'beacon',
+    })
+    window.open('https://weareadaptive.com/')
+  }, [])
 
   return (
     <Root>

src/client/src/apps/MainRoute/widgets/spotTile/epics/executionService.ts

@@ -8,6 +8,7 @@ import {
   ExecuteTradeRequest,
 } from '../model/executeTradeRequest'
 import numeral from 'numeral'
+import ReactGA from 'react-ga'
 
 interface RawTradeReponse {
   Trade: TradeRaw
@@ -35,7 +36,15 @@ export default class ExecutionService {
     const executeTradeRequest = this.formatTradeRequest(rawExecuteTradeRequest)
 
     return this.limitChecker(executeTradeRequest).pipe(
-      tap(() => console.info(LOG_NAME, 'executing: ', executeTradeRequest)),
+      tap(() => {
+        console.info(LOG_NAME, 'executing: ', executeTradeRequest)
+        ReactGA.event({
+          category: `RT - Trade Attempt`,
+          action: executeTradeRequest.Direction,
+          label: `${executeTradeRequest.CurrencyPair} - ${executeTradeRequest.SpotRate}`,
+          value: Math.round(executeTradeRequest.Notional),
+        })
+      }),
       take(1),
       mergeMap(tradeWithinLimit => {
         if (!tradeWithinLimit) {
@@ -50,16 +59,22 @@ export default class ExecutionService {
             executeTradeRequest,
           )
           .pipe(
-            tap(dto =>
+            tap(dto => {
               console.info(
                 LOG_NAME,
                 `execute response received for ${executeTradeRequest.CurrencyPair}. Status: ${dto.Trade.Status}`,
                 {
                   Request: executeTradeRequest,
                   Response: dto,
                 },
-              ),
-            ),
+              )
+              ReactGA.event({
+                category: `RT - Trade ${dto.Trade.Status}`,
+                action: executeTradeRequest.Direction,
+                label: `${executeTradeRequest.CurrencyPair} - ${dto.Trade.SpotRate}`,
+                value: Math.round(dto.Trade.Notional),
+              })
+            }),
             map(dto => mapFromTradeDto(dto.Trade)),
             map(trade => createExecuteTradeResponse(trade, executeTradeRequest)),
             takeUntil(timer(EXECUTION_REQUEST_TIMEOUT_MS)),

src/client/src/index.tsx

@@ -1,5 +1,6 @@
 import React, { lazy, Suspense } from 'react'
 import ReactDOM from 'react-dom'
+import ReactGA from 'react-ga'
 import { BrowserRouter, Route, Switch } from 'react-router-dom'
 import { GlobalStyle } from 'rt-theme'
 import * as serviceWorker from './serviceWorker'
@@ -11,6 +12,12 @@ const MainRoute = lazy(() => import('./apps/MainRoute'))
 const StyleguideRoute = lazy(() => import('./apps/StyleguideRoute'))
 const SimpleLauncher = lazy(() => import('./apps/SimpleLauncher'))
 
+//TODO: Move to environment variables / config.
+const trackingId = 'UA-46320965-5'
+ReactGA.initialize(trackingId, {
+  debug: process.env.NODE_ENV === 'development',
+})
+
 const { pathname } = new URL(window.location.href)
 const urlParams = new URLSearchParams(window.location.search)
 
@@ -36,11 +43,17 @@ const appTitles = {
 
 async function init() {
   console.info('BUILD_VERSION: ', process.env.REACT_APP_BUILD_VERSION)
-  const intentsProvider = getProvider()
 
+  const intentsProvider = getProvider()
   const env = getEnvironment()
+
   document.title = `${appTitles[pathname] || document.title} ${envTitles[env || 'unknown']}`
 
+  ReactGA.set({
+    dimension3: env,
+    page: window.location.pathname,
+  })
+
   if (urlParams.has('startAsSymphonyController')) {
     const { initiateSymphony } = await getSymphonyPlatform()
     await initiateSymphony(urlParams.get('env') || undefined)

src/client/src/rt-platforms/browser/browser.ts

@@ -1,3 +1,4 @@
+import ReactGA from 'react-ga'
 import { UAParser } from 'ua-parser-js'
 import { WindowConfig } from '../types'
 import { openBrowserWindow } from './window'
@@ -36,7 +37,14 @@ export default class Browser implements Platform {
 
   window = {
     ...createDefaultPlatformWindow(window),
-    open: (config: WindowConfig, onClose?: () => void) => openBrowserWindow(config, onClose),
+    open: (config: WindowConfig, onClose?: () => void) => {
+      ReactGA.event({
+        category: 'RT - Window',
+        action: 'open',
+        label: config.name,
+      })
+      return openBrowserWindow(config, onClose)
+    },
   }
 
   notification = {

src/client/src/rt-platforms/defaultPlatformWindow.ts

@@ -1,7 +1,15 @@
+import ReactGA from 'react-ga'
 import { PlatformWindow } from './platformWindow'
 
 export function createDefaultPlatformWindow(window: Window): PlatformWindow {
   return {
-    close: () => Promise.resolve(window.close())
+    close: () => {
+      ReactGA.event({
+        category: 'RT - Window',
+        action: 'close',
+        label: window.name,
+      })
+      return Promise.resolve(window.close())
+    },
   }
 }

src/client/src/rt-platforms/finsemble/index.ts

@@ -1,3 +1,4 @@
+import ReactGA from 'react-ga'
 import { Platform } from '../platform'
 import { AppConfig, WindowConfig } from '../types'
 import { fromEventPattern } from 'rxjs'
@@ -21,6 +22,11 @@ export class Finsemble implements Platform {
   window = {
     ...createDefaultPlatformWindow(window),
     open: (config: WindowConfig, onClose?: () => void) => {
+      ReactGA.event({
+        category: 'RT - Window',
+        action: 'open',
+        label: config.name,
+      })
       const createdWindow = window.open()
       return Promise.resolve(createdWindow ? createDefaultPlatformWindow(createdWindow) : undefined)
     },

src/client/src/rt-platforms/glue/glue.ts

@@ -1,3 +1,4 @@
+import ReactGA from 'react-ga'
 import Glue, { Glue42 as GlueInterface } from '@glue42/desktop'
 import Glue4Office, { Glue42Office as Glue42OfficeInterface } from '@glue42/office'
 import { WindowConfig } from '../types'
@@ -36,9 +37,23 @@ export class Glue42 implements Platform {
   }
 
   window = {
-    close: () => Promise.resolve(window.close()),
+    close: () => {
+      ReactGA.event({
+        category: 'RT - Window',
+        action: 'close',
+        label: window.name,
+      })
+      return Promise.resolve(window.close())
+    },
 
-    open: (config: WindowConfig, onClose?: () => void) => openGlueWindow(config, onClose),
+    open: (config: WindowConfig, onClose?: () => void) => {
+      ReactGA.event({
+        category: 'RT - Window',
+        action: 'open',
+        label: config.name,
+      })
+      return openGlueWindow(config, onClose)
+    },
 
     /**
      * In order to integrate Glue42 with channels the clicked symbol needs to be published to the channel.

src/client/src/rt-platforms/openFin/adapter/window.ts

@@ -1,4 +1,5 @@
 /* eslint-disable no-undef */
+import ReactGA from 'react-ga'
 import { WindowConfig } from '../../types'
 import { get as _get, last as _last } from 'lodash'
 import { PlatformWindow } from '../../platformWindow'
@@ -112,6 +113,12 @@ export const openDesktopWindow = async (
 
   console.info(`Creating Openfin window: ${windowName}`)
 
+  ReactGA.event({
+    category: 'RT - Window',
+    action: 'open',
+    label: windowName,
+  })
+
   //TODO: move to openfin V2 version (based on promises) once they fix their bug related to getting current window
   // (in V2 call to ofWindow.getWebWindow() returns undefined - thus we are forced to use old callback APIs)
   const ofWindowPromise = new Promise<fin.OpenFinWindow>(resolve => {

src/client/src/rt-platforms/symphony/adapter/index.ts

@@ -1,3 +1,4 @@
+import ReactGA from 'react-ga'
 import { Platform } from '../../platform'
 import { WindowConfig } from '../../types'
 import { createTileMessage, FX_ENTITY_TYPE, SYMPHONY_APP_ID, SymphonyClient } from '../index'
@@ -41,6 +42,11 @@ export default class Symphony implements Platform {
   window = {
     ...createDefaultPlatformWindow(window),
     open: (config: WindowConfig, onClose?: () => void) => {
+      ReactGA.event({
+        category: 'RT - Window',
+        action: 'open',
+        label: config.name,
+      })
       return Promise.resolve(undefined)
     },
   }