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

3 files changed, 11 insertions, 50 deletions

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<FillOrderProps, FillOrderState> {
                 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<FillOrderProps, FillOrderState> {
             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<FillOrderProps, FillOrderState> {
                 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<FillOrderProps, FillOrderState> {
             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<GenerateOrderFormProps, G
             if (didSignSuccessfully) {
                 const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
                 const eventLabel = `${this.props.tokenByAddress[debitToken.address].symbol}-${networkName}`;
-                ReactGA.event({
-                    category: 'Portal',
-                    action: 'Sign Order Success',
-                    label: eventLabel,
-                    value: debitToken.amount.toNumber(),
-                });
+                analytics.logEvent('Portal', 'Sign Order Success', eventLabel, debitToken.amount.toNumber());
                 this.setState({
                     globalErrMsg: '',
                     shouldShowIncompleteErrs: false,
@@ -273,11 +268,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
                 globalErrMsg = 'You must enable wallet communication';
                 this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
             }
-            ReactGA.event({
-                category: 'Portal',
-                action: 'Sign Order Failure',
-                label: globalErrMsg,
-            });
+            analytics.logEvent('Portal', 'Sign Order Failure', globalErrMsg);
             this.setState({
                 globalErrMsg,
                 shouldShowIncompleteErrs: true,
diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx
index 7fe303cf4..6831fee48 100644
--- a/packages/website/ts/components/inputs/allowance_toggle.tsx
+++ b/packages/website/ts/components/inputs/allowance_toggle.tsx
@@ -3,12 +3,12 @@ import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import Toggle from 'material-ui/Toggle';
 import * as React from 'react';
-import * as ReactGA from 'react-ga';
 import { Blockchain } from 'ts/blockchain';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { BalanceErrs, Token, TokenState } 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';
 
 const DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS = new BigNumber(2).pow(256).minus(1);
@@ -81,20 +81,10 @@ export class AllowanceToggle extends React.Component<AllowanceToggleProps, Allow
         const eventLabel = `${this.props.token.symbol}-${networkName}`;
         try {
             await this.props.blockchain.setProxyAllowanceAsync(this.props.token, newAllowanceAmountInBaseUnits);
-            ReactGA.event({
-                category: 'Portal',
-                action: 'Set Allowance Success',
-                label: eventLabel,
-                value: newAllowanceAmountInBaseUnits.toNumber(),
-            });
+            analytics.logEvent('Portal', 'Set Allowance Success', eventLabel, newAllowanceAmountInBaseUnits.toNumber());
             await this.props.refetchTokenStateAsync();
         } catch (err) {
-            ReactGA.event({
-                category: 'Portal',
-                action: 'Set Allowance Failure',
-                label: eventLabel,
-                value: newAllowanceAmountInBaseUnits.toNumber(),
-            });
+            analytics.logEvent('Portal', 'Set Allowance Failure', eventLabel, newAllowanceAmountInBaseUnits.toNumber());
             this.setState({
                 isSpinnerVisible: false,
             });