Merge pull request #370 from 0xProject/feature/ga-portal-logging

Add GA Logging to Portal

5 files changed, 53 insertions, 0 deletions

diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index d0cfd2cf5..9da3006a0 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -6,6 +6,7 @@ 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';
@@ -565,6 +566,12 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                 signedOrder,
                 this.props.orderFillAmount,
             );
+            ReactGA.event({
+                category: 'Portal',
+                action: 'Fill Order Success',
+                label: parsedOrder.taker.token.symbol,
+                value: parsedOrder.taker.amount,
+            });
             // After fill completes, let's force fetch the token balances
             this.props.dispatcher.forceTokenStateRefetch();
             this.setState({
@@ -578,6 +585,12 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             this.setState({
                 isFilling: false,
             });
+            ReactGA.event({
+                category: 'Portal',
+                action: 'Fill Order Failure',
+                label: parsedOrder.taker.token.symbol,
+                value: parsedOrder.taker.amount,
+            });
             const errMsg = `${err}`;
             if (utils.didUserDenyWeb3Request(errMsg)) {
                 return;
@@ -653,6 +666,12 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                 globalErrMsg: '',
                 unavailableTakerAmount: takerTokenAmount,
             });
+            ReactGA.event({
+                category: 'Portal',
+                action: 'Cancel Order Success',
+                label: parsedOrder.maker.token.symbol,
+                value: parsedOrder.maker.amount,
+            });
             return;
         } catch (err) {
             this.setState({
@@ -662,6 +681,12 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             if (utils.didUserDenyWeb3Request(errMsg)) {
                 return;
             }
+            ReactGA.event({
+                category: 'Portal',
+                action: 'Cancel Order Failure',
+                label: parsedOrder.maker.token.symbol,
+                value: parsedOrder.maker.amount,
+            });
             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 df1241d8d..2a62d4b9e 100644
--- a/packages/website/ts/components/generate_order/generate_order_form.tsx
+++ b/packages/website/ts/components/generate_order/generate_order_form.tsx
@@ -4,6 +4,7 @@ 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';
@@ -261,6 +262,12 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
         ) {
             const didSignSuccessfully = await this._signTransactionAsync();
             if (didSignSuccessfully) {
+                ReactGA.event({
+                    category: 'Portal',
+                    action: 'Sign Order Success',
+                    label: this.props.tokenByAddress[debitToken.address].symbol,
+                    value: debitToken.amount.toNumber(),
+                });
                 this.setState({
                     globalErrMsg: '',
                     shouldShowIncompleteErrs: false,
@@ -273,6 +280,11 @@ 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,
+            });
             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 45531e74b..a737222ca 100644
--- a/packages/website/ts/components/inputs/allowance_toggle.tsx
+++ b/packages/website/ts/components/inputs/allowance_toggle.tsx
@@ -2,6 +2,7 @@ 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';
@@ -75,8 +76,20 @@ export class AllowanceToggle extends React.Component<AllowanceToggleProps, Allow
         }
         try {
             await this.props.blockchain.setProxyAllowanceAsync(this.props.token, newAllowanceAmountInBaseUnits);
+            ReactGA.event({
+                category: 'Portal',
+                action: 'Set Allowance Success',
+                label: this.props.token.symbol,
+                value: newAllowanceAmountInBaseUnits.toNumber(),
+            });
             await this.props.refetchTokenStateAsync();
         } catch (err) {
+            ReactGA.event({
+                category: 'Portal',
+                action: 'Set Allowance Failure',
+                label: this.props.token.symbol,
+                value: newAllowanceAmountInBaseUnits.toNumber(),
+            });
             this.setState({
                 isSpinnerVisible: false,
             });
diff --git a/packages/website/ts/globals.d.ts b/packages/website/ts/globals.d.ts
index d7f887c6d..19237db14 100644
--- a/packages/website/ts/globals.d.ts
+++ b/packages/website/ts/globals.d.ts
@@ -11,6 +11,7 @@ declare module 'react-highlight';
 declare module 'react-recaptcha';
 declare module 'react-document-title';
 declare module 'ethereumjs-tx';
+declare module 'react-ga';
 
 declare module '*.json' {
     const json: any;
diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx
index ffb551561..bc4e0b472 100644
--- a/packages/website/ts/index.tsx
+++ b/packages/website/ts/index.tsx
@@ -2,6 +2,7 @@
 import { MuiThemeProvider } from 'material-ui/styles';
 import * as React from 'react';
 import { render } from 'react-dom';
+import * as ReactGA from 'react-ga';
 import { Provider } from 'react-redux';
 import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom';
 import * as injectTapEventPlugin from 'react-tap-event-plugin';
@@ -44,6 +45,7 @@ const LazyConnectDocumentation = createLazyComponent('Documentation', async () =
     System.import<any>(/* webpackChunkName: "connectDocs" */ 'ts/containers/connect_documentation'),
 );
 
+ReactGA.initialize('UA-98720122-1');
 const store: ReduxStore<State> = createStore(reducer);
 render(
     <Router>