From 598ce0d40129b7426d47404a3e6ff886c2e186b9 Mon Sep 17 00:00:00 2001 From: Thomas Schmidt Date: Mon, 5 Feb 2018 15:57:29 -0800 Subject: Switch GA to React GA and add logging for Portal --- packages/website/ts/components/inputs/allowance_toggle.tsx | 13 ++++++++++++- packages/website/ts/globals.d.ts | 1 + packages/website/ts/index.tsx | 2 ++ 3 files changed, 15 insertions(+), 1 deletion(-) (limited to 'packages/website/ts') diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx index 45531e74b..26c693dee 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'; @@ -74,7 +75,17 @@ export class AllowanceToggle extends React.Component { + ReactGA.event({ + category: 'Portal', + action: 'Set Allowance', + label: this.props.token.symbol, + value: newAllowanceAmountInBaseUnits, + }); + }, (rejected: any) => { + console.log(rejected); + }); await this.props.refetchTokenStateAsync(); } catch (err) { this.setState({ 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(/* webpackChunkName: "connectDocs" */ 'ts/containers/connect_documentation'), ); +ReactGA.initialize('UA-98720122-1'); const store: ReduxStore = createStore(reducer); render( -- cgit v1.2.3 From 75ded897907461e63990fd3bb2d503213768edd8 Mon Sep 17 00:00:00 2001 From: Thomas Schmidt Date: Mon, 5 Feb 2018 16:20:53 -0800 Subject: GA logging for order creation --- .../ts/components/generate_order/generate_order_form.tsx | 12 ++++++++++++ packages/website/ts/components/inputs/allowance_toggle.tsx | 13 +++++++++---- 2 files changed, 21 insertions(+), 4 deletions(-) (limited to 'packages/website/ts') 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..c07e6173a 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 { + .then(() => { ReactGA.event({ category: 'Portal', - action: 'Set Allowance', + action: 'Set Allowance Success', + label: this.props.token.symbol, + value: newAllowanceAmountInBaseUnits, + }); + }, () => { + ReactGA.event({ + category: 'Portal', + action: 'Set Allowance Failure', label: this.props.token.symbol, value: newAllowanceAmountInBaseUnits, }); - }, (rejected: any) => { - console.log(rejected); }); await this.props.refetchTokenStateAsync(); } catch (err) { -- cgit v1.2.3 From 91a5bcf380e050605b9f7d32ea42b105b0677f20 Mon Sep 17 00:00:00 2001 From: Thomas Schmidt Date: Mon, 5 Feb 2018 16:43:50 -0800 Subject: Converted BigNumber to number for GA logging --- packages/website/ts/components/generate_order/generate_order_form.tsx | 2 +- packages/website/ts/components/inputs/allowance_toggle.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'packages/website/ts') 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 c07e6173a..2a62d4b9e 100644 --- a/packages/website/ts/components/generate_order/generate_order_form.tsx +++ b/packages/website/ts/components/generate_order/generate_order_form.tsx @@ -266,7 +266,7 @@ export class GenerateOrderForm extends React.Component { ReactGA.event({ category: 'Portal', action: 'Set Allowance Failure', label: this.props.token.symbol, - value: newAllowanceAmountInBaseUnits, + value: newAllowanceAmountInBaseUnits.toNumber(), }); }); await this.props.refetchTokenStateAsync(); -- cgit v1.2.3 From 83c7c8110d16eec7cd0e2267ee6755ece2ed7be4 Mon Sep 17 00:00:00 2001 From: Thomas Schmidt Date: Mon, 5 Feb 2018 16:56:53 -0800 Subject: Formatting and removed old GA code --- .../ts/components/inputs/allowance_toggle.tsx | 34 ++++++++++++---------- 1 file changed, 18 insertions(+), 16 deletions(-) (limited to 'packages/website/ts') diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx index 1f8c5fcd6..7d41d9633 100644 --- a/packages/website/ts/components/inputs/allowance_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_toggle.tsx @@ -75,22 +75,24 @@ export class AllowanceToggle extends React.Component { - ReactGA.event({ - category: 'Portal', - action: 'Set Allowance Success', - label: this.props.token.symbol, - value: newAllowanceAmountInBaseUnits.toNumber(), - }); - }, () => { - ReactGA.event({ - category: 'Portal', - action: 'Set Allowance Failure', - label: this.props.token.symbol, - value: newAllowanceAmountInBaseUnits.toNumber(), - }); - }); + await this.props.blockchain.setProxyAllowanceAsync(this.props.token, newAllowanceAmountInBaseUnits).then( + () => { + ReactGA.event({ + category: 'Portal', + action: 'Set Allowance Success', + label: this.props.token.symbol, + value: newAllowanceAmountInBaseUnits.toNumber(), + }); + }, + () => { + ReactGA.event({ + category: 'Portal', + action: 'Set Allowance Failure', + label: this.props.token.symbol, + value: newAllowanceAmountInBaseUnits.toNumber(), + }); + }, + ); await this.props.refetchTokenStateAsync(); } catch (err) { this.setState({ -- cgit v1.2.3 From 9d80a62bb18296c34824048b8ea2be5ad9b3515d Mon Sep 17 00:00:00 2001 From: Thomas Schmidt Date: Mon, 5 Feb 2018 18:02:05 -0800 Subject: Moved to async await --- .../ts/components/inputs/allowance_toggle.tsx | 31 +++++++++------------- 1 file changed, 13 insertions(+), 18 deletions(-) (limited to 'packages/website/ts') diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx index 7d41d9633..0a42df71b 100644 --- a/packages/website/ts/components/inputs/allowance_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_toggle.tsx @@ -75,26 +75,21 @@ export class AllowanceToggle extends React.Component { - ReactGA.event({ - category: 'Portal', - action: 'Set Allowance Success', - label: this.props.token.symbol, - value: newAllowanceAmountInBaseUnits.toNumber(), - }); - }, - () => { - ReactGA.event({ - category: 'Portal', - action: 'Set Allowance Failure', - label: this.props.token.symbol, - value: newAllowanceAmountInBaseUnits.toNumber(), - }); - }, - ); + 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, }); -- cgit v1.2.3 From 00bfc7f889fcf1527c77c7f88816f463843c4282 Mon Sep 17 00:00:00 2001 From: Thomas Schmidt Date: Tue, 6 Feb 2018 11:47:24 -0800 Subject: Added logging for order filling and order cancelling --- packages/website/ts/components/fill_order.tsx | 25 ++++++++++++++++++++++ .../ts/components/inputs/allowance_toggle.tsx | 2 +- 2 files changed, 26 insertions(+), 1 deletion(-) (limited to 'packages/website/ts') 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 { 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 { 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 { 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 { 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/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx index 0a42df71b..a737222ca 100644 --- a/packages/website/ts/components/inputs/allowance_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_toggle.tsx @@ -75,7 +75,7 @@ export class AllowanceToggle extends React.Component