diff options
author | Tom Schmidt <imtomhschmidt@gmail.com> | 2018-02-07 08:01:36 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-02-07 08:01:36 +0800 |
commit | 00c07b38a42c82d7c37835234d7f81236b0342ce (patch) | |
tree | db33d241f8cef2a8974b415b7c4ba7351775f6ba /packages/website | |
parent | 548246c05f128d23d701d9b738ce53deaf783f63 (diff) | |
parent | 00bfc7f889fcf1527c77c7f88816f463843c4282 (diff) | |
download | dexon-0x-contracts-00c07b38a42c82d7c37835234d7f81236b0342ce.tar.gz dexon-0x-contracts-00c07b38a42c82d7c37835234d7f81236b0342ce.tar.zst dexon-0x-contracts-00c07b38a42c82d7c37835234d7f81236b0342ce.zip |
Merge pull request #370 from 0xProject/feature/ga-portal-logging
Add GA Logging to Portal
Diffstat (limited to 'packages/website')
-rw-r--r-- | packages/website/package.json | 1 | ||||
-rw-r--r-- | packages/website/public/index.html | 123 | ||||
-rw-r--r-- | packages/website/ts/components/fill_order.tsx | 25 | ||||
-rw-r--r-- | packages/website/ts/components/generate_order/generate_order_form.tsx | 12 | ||||
-rw-r--r-- | packages/website/ts/components/inputs/allowance_toggle.tsx | 13 | ||||
-rw-r--r-- | packages/website/ts/globals.d.ts | 1 | ||||
-rw-r--r-- | packages/website/ts/index.tsx | 2 |
7 files changed, 113 insertions, 64 deletions
diff --git a/packages/website/package.json b/packages/website/package.json index e13c4d44c..f7d0ab978 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -42,6 +42,7 @@ "react-copy-to-clipboard": "^4.2.3", "react-document-title": "^2.0.3", "react-dom": "15.6.1", + "react-ga": "^2.4.1", "react-highlight": "^0.10.0", "react-html5video": "^2.1.0", "react-inlinesvg": "^0.5.5", diff --git a/packages/website/public/index.html b/packages/website/public/index.html index c6f2f666c..b40ee62fa 100644 --- a/packages/website/public/index.html +++ b/packages/website/public/index.html @@ -1,53 +1,44 @@ <!DOCTYPE html> <html> - <head> - <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <meta name="description" content="An Open Protocol For Decentralized Exchange On The Ethereum Blockchain" /> - <meta property="og:type" content="website" /> - <meta property="og:title" content="0x" /> - <meta property="og:description" content="An Open Protocol For Decentralized Exchange On The Ethereum Blockchain" /> - <meta property="og:image" content="/images/og_image.png" /> - <title>0x: The Protocol for Trading Tokens</title> - <link rel="icon" type="image/png" href="/images/favicon/favicon-2-32x32.png" sizes="32x32" /> - <link rel="icon" type="image/png" href="/images/favicon/favicon-2-16x16.png" sizes="16x16" /> - <link rel="stylesheet" href="/css/atom-one-light.css"> - <link rel="stylesheet" href="/css/material-design-iconic-font.min.css"> - <link rel="stylesheet" href="/css/roboto.css"> - <link rel="stylesheet" href="/css/roboto_mono.css"> - <link rel="stylesheet" href="/css/basscss_responsive_custom.css"> - <link rel="stylesheet" href="/css/basscss_responsive_padding.css"> - <link rel="stylesheet" href="/css/basscss_responsive_margin.css"> - <link rel="stylesheet" href="/css/basscss_responsive_type_scale.css"> - </head> - <body style="margin: 0px; min-width: 355px;"> - <!-- Google Analytics --> - <script> - (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ - (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), - m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) - })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); - ga('create', 'UA-98720122-1', 'auto'); - ga('send', 'pageview'); - </script> - <!-- End Google Analytics --> - <!-- Facebook SDK --> - <div id="fb-root"></div> - <script> - (function(d, s, id) { - var js, fjs = d.getElementsByTagName(s)[0]; - if (d.getElementById(id)) return; - js = d.createElement(s); js.id = id; - js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=1687545238205192"; - fjs.parentNode.insertBefore(js, fjs); - }(document, 'script', 'facebook-jssdk')); - </script> - <div id="app"></div> - <!-- End Facebook SDK --> - <!-- Twitter SDK --> - <script> - window.twttr = (function(d, s, id) { +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="description" content="An Open Protocol For Decentralized Exchange On The Ethereum Blockchain" /> + <meta property="og:type" content="website" /> + <meta property="og:title" content="0x" /> + <meta property="og:description" content="An Open Protocol For Decentralized Exchange On The Ethereum Blockchain" /> + <meta property="og:image" content="/images/og_image.png" /> + <title>0x: The Protocol for Trading Tokens</title> + <link rel="icon" type="image/png" href="/images/favicon/favicon-2-32x32.png" sizes="32x32" /> + <link rel="icon" type="image/png" href="/images/favicon/favicon-2-16x16.png" sizes="16x16" /> + <link rel="stylesheet" href="/css/atom-one-light.css"> + <link rel="stylesheet" href="/css/material-design-iconic-font.min.css"> + <link rel="stylesheet" href="/css/roboto.css"> + <link rel="stylesheet" href="/css/roboto_mono.css"> + <link rel="stylesheet" href="/css/basscss_responsive_custom.css"> + <link rel="stylesheet" href="/css/basscss_responsive_padding.css"> + <link rel="stylesheet" href="/css/basscss_responsive_margin.css"> + <link rel="stylesheet" href="/css/basscss_responsive_type_scale.css"> +</head> + +<body style="margin: 0px; min-width: 355px;"> + <!-- Facebook SDK --> + <div id="fb-root"></div> + <script> + (function (d, s, id) { + var js, fjs = d.getElementsByTagName(s)[0]; + if (d.getElementById(id)) return; + js = d.createElement(s); js.id = id; + js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=1687545238205192"; + fjs.parentNode.insertBefore(js, fjs); + }(document, 'script', 'facebook-jssdk')); + </script> + <div id="app"></div> + <!-- End Facebook SDK --> + <!-- Twitter SDK --> + <script> + window.twttr = (function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); @@ -56,23 +47,27 @@ fjs.parentNode.insertBefore(js, fjs); t._e = []; - t.ready = function(f) { - t._e.push(f); + t.ready = function (f) { + t._e.push(f); }; return t; - }(document, "script", "twitter-wjs")); - </script> - <!-- End Twitter SDK --> - <!-- Segment.io --> - <script> - !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t){var e=document.createElement("script");e.type="text/javascript";e.async=!0;e.src=("https:"===document.location.protocol?"https://":"http://")+"cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};analytics.SNIPPET_VERSION="4.0.0"; - analytics.load("T6jtT2F2iMrw9FDJ8exE9Uu1mLN5qd8n"); - analytics.page(); - }}(); - </script> - <!-- End Segment.io --> + }(document, "script", "twitter-wjs")); + </script> + <!-- End Twitter SDK --> + <!-- Segment.io --> + <script> + !function () { + var analytics = window.analytics = window.analytics || []; if (!analytics.initialize) if (analytics.invoked) window.console && console.error && console.error("Segment snippet included twice."); else { + analytics.invoked = !0; analytics.methods = ["trackSubmit", "trackClick", "trackLink", "trackForm", "pageview", "identify", "reset", "group", "track", "ready", "alias", "debug", "page", "once", "off", "on"]; analytics.factory = function (t) { return function () { var e = Array.prototype.slice.call(arguments); e.unshift(t); analytics.push(e); return analytics } }; for (var t = 0; t < analytics.methods.length; t++) { var e = analytics.methods[t]; analytics[e] = analytics.factory(e) } analytics.load = function (t) { var e = document.createElement("script"); e.type = "text/javascript"; e.async = !0; e.src = ("https:" === document.location.protocol ? "https://" : "http://") + "cdn.segment.com/analytics.js/v1/" + t + "/analytics.min.js"; var n = document.getElementsByTagName("script")[0]; n.parentNode.insertBefore(e, n) }; analytics.SNIPPET_VERSION = "4.0.0"; + analytics.load("T6jtT2F2iMrw9FDJ8exE9Uu1mLN5qd8n"); + analytics.page(); + } + }(); + </script> + <!-- End Segment.io --> + + <!-- Main --> + <script type="text/javascript" crossorigin="anonymous" src="/bundle.js" charset="utf-8"></script> +</body> - <!-- Main --> - <script type="text/javascript" crossorigin="anonymous" src="/bundle.js" charset="utf-8"></script> - </body> -</html> +</html>
\ No newline at end of file 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> |