From cea8dcae3dac2265d3780c95d6581fe48e9b94a4 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Sat, 10 Mar 2018 16:53:42 +0100 Subject: 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 --- packages/website/ts/blockchain.ts | 23 +++++++------- packages/website/ts/components/fill_order.tsx | 30 ++++--------------- .../generate_order/generate_order_form.tsx | 15 ++-------- .../ts/components/inputs/allowance_toggle.tsx | 16 ++-------- packages/website/ts/index.tsx | 12 ++------ packages/website/ts/types.ts | 6 ++++ packages/website/ts/utils/analytics.ts | 26 ++++++++++++++++ packages/website/ts/utils/configs.ts | 1 + packages/website/ts/utils/constants.ts | 1 + packages/website/ts/utils/utils.ts | 35 ++++++++++++++-------- 10 files changed, 83 insertions(+), 82 deletions(-) create mode 100644 packages/website/ts/utils/analytics.ts (limited to 'packages') diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts index fca9504d7..56a8c99f4 100644 --- a/packages/website/ts/blockchain.ts +++ b/packages/website/ts/blockchain.ts @@ -37,6 +37,7 @@ import { BlockchainErrs, ContractInstance, Order as PortalOrder, + Providers, ProviderType, Side, SideToAssetToken, @@ -57,6 +58,12 @@ import * as MintableArtifacts from '../contracts/Mintable.json'; const BLOCK_NUMBER_BACK_TRACK = 50; const GWEI_IN_WEI = 1000000000; +const providerToName: { [provider: string]: string } = { + [Providers.Metamask]: constants.PROVIDER_NAME_METAMASK, + [Providers.Parity]: constants.PROVIDER_NAME_PARITY_SIGNER, + [Providers.Mist]: constants.PROVIDER_NAME_MIST, +}; + export class Blockchain { public networkId: number; public nodeVersion: string; @@ -70,18 +77,12 @@ export class Blockchain { private _ledgerSubprovider: LedgerWalletSubprovider; private _defaultGasPrice: BigNumber; private static _getNameGivenProvider(provider: Web3.Provider): string { - if (!_.isUndefined((provider as any).isMetaMask)) { - return constants.PROVIDER_NAME_METAMASK; - } - - // HACK: We use the fact that Parity Signer's provider is an instance of their - // internal `Web3FrameProvider` class. - const isParitySigner = _.startsWith(provider.constructor.toString(), 'function Web3FrameProvider'); - if (isParitySigner) { - return constants.PROVIDER_NAME_PARITY_SIGNER; + const providerType = utils.getProviderType(provider); + const providerNameIfExists = providerToName[providerType]; + if (_.isUndefined(providerNameIfExists)) { + return constants.PROVIDER_NAME_GENERIC; } - - return constants.PROVIDER_NAME_GENERIC; + return providerNameIfExists; } private static async _getProviderAsync(injectedWeb3: Web3, networkIdIfExists: number) { const doesInjectedWeb3Exist = !_.isUndefined(injectedWeb3); diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index e9127288d..11b756d8e 100644 --- a/packages/website/ts/components/fill_order.tsx +++ b/packages/website/ts/components/fill_order.tsx @@ -7,7 +7,6 @@ import { Card, CardHeader, CardText } from 'material-ui/Card'; import Divider from 'material-ui/Divider'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; -import * as ReactGA from 'react-ga'; import { Link } from 'react-router-dom'; import { Blockchain } from 'ts/blockchain'; import { TrackTokenConfirmationDialog } from 'ts/components/dialogs/track_token_confirmation_dialog'; @@ -24,6 +23,7 @@ import { validator } from 'ts/schemas/validator'; import { AlertTypes, BlockchainErrs, Order, Token, TokenByAddress, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { errorReporter } from 'ts/utils/error_reporter'; +import { analytics } from 'ts/utils/analytics'; import { utils } from 'ts/utils/utils'; interface FillOrderProps { @@ -544,12 +544,7 @@ export class FillOrder extends React.Component { signedOrder, this.props.orderFillAmount, ); - ReactGA.event({ - category: 'Portal', - action: 'Fill Order Success', - label: eventLabel, - value: parsedOrder.signedOrder.takerTokenAmount, - }); + analytics.logEvent('Portal', 'Fill Order Success', eventLabel, parsedOrder.signedOrder.takerTokenAmount); // After fill completes, let's force fetch the token balances this.props.dispatcher.forceTokenStateRefetch(); this.setState({ @@ -563,12 +558,7 @@ export class FillOrder extends React.Component { this.setState({ isFilling: false, }); - ReactGA.event({ - category: 'Portal', - action: 'Fill Order Failure', - label: eventLabel, - value: parsedOrder.signedOrder.takerTokenAmount, - }); + analytics.logEvent('Portal', 'Fill Order Failure', eventLabel, parsedOrder.signedOrder.takerTokenAmount); const errMsg = `${err}`; if (utils.didUserDenyWeb3Request(errMsg)) { return; @@ -633,12 +623,7 @@ export class FillOrder extends React.Component { globalErrMsg: '', unavailableTakerAmount: takerTokenAmount, }); - ReactGA.event({ - category: 'Portal', - action: 'Cancel Order Success', - label: eventLabel, - value: parsedOrder.signedOrder.makerTokenAmount, - }); + analytics.logEvent('Portal', 'Cancel Order Success', eventLabel, parsedOrder.signedOrder.makerTokenAmount); return; } catch (err) { this.setState({ @@ -648,12 +633,7 @@ export class FillOrder extends React.Component { if (utils.didUserDenyWeb3Request(errMsg)) { return; } - ReactGA.event({ - category: 'Portal', - action: 'Cancel Order Failure', - label: eventLabel, - value: parsedOrder.signedOrder.makerTokenAmount, - }); + analytics.logEvent('Portal', 'Cancel Order Failure', eventLabel, parsedOrder.signedOrder.makerTokenAmount); globalErrMsg = 'Failed to cancel order, please refresh and try again'; utils.consoleLog(`${err}`); this.setState({ diff --git a/packages/website/ts/components/generate_order/generate_order_form.tsx b/packages/website/ts/components/generate_order/generate_order_form.tsx index 26fa904fe..5e356528e 100644 --- a/packages/website/ts/components/generate_order/generate_order_form.tsx +++ b/packages/website/ts/components/generate_order/generate_order_form.tsx @@ -5,7 +5,6 @@ import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; import Divider from 'material-ui/Divider'; import * as React from 'react'; -import * as ReactGA from 'react-ga'; import { Blockchain } from 'ts/blockchain'; import { ExpirationInput } from 'ts/components/inputs/expiration_input'; import { HashInput } from 'ts/components/inputs/hash_input'; @@ -23,6 +22,7 @@ import { validator } from 'ts/schemas/validator'; import { AlertTypes, BlockchainErrs, HashData, Side, SideToAssetToken, Token, TokenByAddress } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { errorReporter } from 'ts/utils/error_reporter'; +import { analytics } from 'ts/utils/analytics'; import { utils } from 'ts/utils/utils'; enum SigningState { @@ -255,12 +255,7 @@ export class GenerateOrderForm extends React.Component(/* webpackChunkName: "connectDocs" */ 'ts/containers/connect_documentation'), ); -ReactGA.initialize('UA-98720122-1'); -window.onload = () => { - const providerName = (window as any).web3 - ? utils.web3ProviderToString((window as any).web3.currentProvider) - : 'NONE'; - ReactGA.ga('set', 'dimension1', providerName); -}; +analytics.init(); +analytics.logProviderAsync((window as any).web3); const store: ReduxStore = createStore(reducer); render( diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 41fbc6a86..b3e4973fa 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -463,4 +463,10 @@ export enum Deco { CapWords, Upper, } + +export enum Providers { + Parity = 'PARITY', + Metamask = 'METAMASK', + Mist = 'MIST', +} // tslint:disable:max-file-line-count 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 { 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; + }, }; -- cgit v1.2.3