Refactor Analytics so that calls to ReactGA are all in a single module, combining the provider type util function, moving GA id to configs and using utils.onPageLoadAsync

4 files changed, 51 insertions, 12 deletions

diff --git a/packages/website/ts/utils/analytics.ts b/packages/website/ts/utils/analytics.ts
new file mode 100644
index 000000000..37c47c7b0
--- /dev/null
+++ b/packages/website/ts/utils/analytics.ts
@@ -0,0 +1,26 @@
+import * as _ from 'lodash';
+import * as ReactGA from 'react-ga';
+import { configs } from 'ts/utils/configs';
+import { utils } from 'ts/utils/utils';
+import * as Web3 from 'web3';
+
+export const analytics = {
+    init() {
+        ReactGA.initialize(configs.GOOGLE_ANALYTICS_ID);
+    },
+    logEvent(category: string, action: string, label: string, value?: any) {
+        ReactGA.event({
+            category,
+            action,
+            label,
+            value,
+        });
+    },
+    async logProviderAsync(web3IfExists: Web3) {
+        await utils.onPageLoadAsync();
+        const providerType = !_.isUndefined(web3IfExists)
+            ? utils.getProviderType(web3IfExists.currentProvider)
+            : 'NONE';
+        ReactGA.ga('set', 'dimension1', providerType);
+    },
+};
diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts
index f33b06c0a..34ba5701b 100644
--- a/packages/website/ts/utils/configs.ts
+++ b/packages/website/ts/utils/configs.ts
@@ -61,6 +61,7 @@ export const configs = {
         TRST: '/images/token_icons/trust.png',
     } as { [symbol: string]: string },
     IS_MAINNET_ENABLED: true,
+    GOOGLE_ANALYTICS_ID: 'UA-98720122-1',
     LAST_LOCAL_STORAGE_FILL_CLEARANCE_DATE: '2017-11-22',
     LAST_LOCAL_STORAGE_TRACKED_TOKEN_CLEARANCE_DATE: '2017-12-19',
     // NEW_WRAPPED_ETHERS is temporary until we remove the SHOULD_DEPRECATE_OLD_WETH_TOKEN flag
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index 71fe08abe..f63e8617e 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -25,6 +25,7 @@ export const constants = {
     PROVIDER_NAME_LEDGER: 'Ledger',
     PROVIDER_NAME_METAMASK: 'Metamask',
     PROVIDER_NAME_PARITY_SIGNER: 'Parity Signer',
+    PROVIDER_NAME_MIST: 'Mist',
     PROVIDER_NAME_GENERIC: 'Injected Web3',
     PROVIDER_NAME_PUBLIC: '0x Public',
     ROLLBAR_ACCESS_TOKEN: 'a6619002b51c4464928201e6ea94de65',
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index a40db805b..5fcd3f8e5 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -4,10 +4,11 @@ import { BigNumber } from '@0xproject/utils';
 import deepEqual = require('deep-equal');
 import * as _ from 'lodash';
 import * as moment from 'moment';
-import { Order, ScreenWidths, Side, SideToAssetToken, Token, TokenByAddress } from 'ts/types';
+import { Order, Providers, ScreenWidths, Side, SideToAssetToken, Token, TokenByAddress } from 'ts/types';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import * as u2f from 'ts/vendor/u2f_api';
+import Web3 = require('web3');
 
 const LG_MIN_EM = 64;
 const MD_MIN_EM = 52;
@@ -268,17 +269,6 @@ export const utils = {
         const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}`;
         return baseUrl;
     },
-    web3ProviderToString(provider: Web3Provider): string {
-        let parsedProviderName = provider.constructor.name;
-        if (provider.constructor.name === 'MetamaskInpageProvider') {
-            parsedProviderName = 'METAMASK';
-        } else if (provider.constructor.name === 'EthereumProvider') {
-            parsedProviderName = 'MIST';
-        } else if ((provider as any).isParity) {
-            parsedProviderName = 'PARITY';
-        }
-        return parsedProviderName;
-    },
     async onPageLoadAsync(): Promise<void> {
         if (document.readyState === 'complete') {
             return; // Already loaded
@@ -287,4 +277,25 @@ export const utils = {
             window.onload = () => resolve();
         });
     },
+    getProviderType(provider: Web3.Provider): Providers | string {
+        const constructorName = provider.constructor.name;
+        let parsedProviderName = constructorName;
+        switch (constructorName) {
+            case 'MetamaskInpageProvider':
+                parsedProviderName = Providers.Metamask;
+                break;
+
+            case 'EthereumProvider':
+                parsedProviderName = Providers.Mist;
+                break;
+
+            default:
+                parsedProviderName = constructorName;
+                break;
+        }
+        if ((provider as any).isParity) {
+            parsedProviderName = Providers.Parity;
+        }
+        return parsedProviderName;
+    },
 };