aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
authorTom Schmidt <imtomhschmidt@gmail.com>2018-02-07 08:01:36 +0800
committerGitHub <noreply@github.com>2018-02-07 08:01:36 +0800
commit00c07b38a42c82d7c37835234d7f81236b0342ce (patch)
treedb33d241f8cef2a8974b415b7c4ba7351775f6ba /packages/website
parent548246c05f128d23d701d9b738ce53deaf783f63 (diff)
parent00bfc7f889fcf1527c77c7f88816f463843c4282 (diff)
downloaddexon-0x-contracts-00c07b38a42c82d7c37835234d7f81236b0342ce.tar
dexon-0x-contracts-00c07b38a42c82d7c37835234d7f81236b0342ce.tar.gz
dexon-0x-contracts-00c07b38a42c82d7c37835234d7f81236b0342ce.tar.bz2
dexon-0x-contracts-00c07b38a42c82d7c37835234d7f81236b0342ce.tar.lz
dexon-0x-contracts-00c07b38a42c82d7c37835234d7f81236b0342ce.tar.xz
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.json1
-rw-r--r--packages/website/public/index.html123
-rw-r--r--packages/website/ts/components/fill_order.tsx25
-rw-r--r--packages/website/ts/components/generate_order/generate_order_form.tsx12
-rw-r--r--packages/website/ts/components/inputs/allowance_toggle.tsx13
-rw-r--r--packages/website/ts/globals.d.ts1
-rw-r--r--packages/website/ts/index.tsx2
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>
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-28 09:10:55 +0800