Merge pull request #74 from oceanprotocol/feature/analytics

analytics

client/package.json

@@ -15,12 +15,14 @@
     "@oceanprotocol/typographies": "^0.1.0",
     "classnames": "^2.2.6",
     "filesize": "^4.1.2",
+    "history": "^4.9.0",
     "is-url": "^1.2.4",
     "moment": "^2.24.0",
     "query-string": "^6.4.2",
     "react": "^16.8.6",
     "react-datepicker": "^2.3.0",
     "react-dom": "^16.8.6",
+    "react-ga": "^2.5.7",
     "react-helmet": "^5.2.0",
     "react-moment": "^0.8.4",
     "react-popper": "^1.3.3",

client/src/Routes.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Route, Switch } from 'react-router-dom'
+import withTracker from './withTracker'
 
 import About from './routes/About'
 import Details from './routes/Details/'
@@ -13,15 +14,15 @@ import Styleguide from './routes/Styleguide'
 
 const Routes = () => (
     <Switch>
-        <Route exact component={Home} path="/" />
-        <Route component={Styleguide} path="/styleguide" />
-        <Route component={About} path="/about" />
-        <Route component={Publish} path="/publish" />
-        <Route component={Search} path="/search" />
-        <Route component={Details} path="/asset/:did" />
-        <Route component={Faucet} path="/faucet" />
-        <Route component={History} path="/history" />
-        <Route component={NotFound} />
+        <Route exact component={withTracker(Home)} path="/" />
+        <Route component={withTracker(Styleguide)} path="/styleguide" />
+        <Route component={withTracker(About)} path="/about" />
+        <Route component={withTracker(Publish)} path="/publish" />
+        <Route component={withTracker(Search)} path="/search" />
+        <Route component={withTracker(Details)} path="/asset/:did" />
+        <Route component={withTracker(Faucet)} path="/faucet" />
+        <Route component={withTracker(History)} path="/history" />
+        <Route component={withTracker(NotFound)} />
     </Switch>
 )
 

client/src/routes/Details/AssetFile.tsx

@@ -5,6 +5,7 @@ import Button from '../../components/atoms/Button'
 import Spinner from '../../components/atoms/Spinner'
 import { User } from '../../context/User'
 import styles from './AssetFile.module.scss'
+import ReactGA from 'react-ga'
 
 interface AssetFileProps {
     file: any
@@ -32,10 +33,15 @@ export default class AssetFile extends PureComponent<
     private purchaseAsset = async (ddo: any, index: number) => {
         this.resetState()
 
+        ReactGA.event({
+            category: 'Purchase',
+            action: 'purchaseAsset-start ' + ddo.id
+        })
+
         const { ocean } = this.context
-        const accounts = await ocean.accounts.list()
         
         try {
+            const accounts = await ocean.accounts.list()
             const service = ddo.findServiceByType('Access')
             const agreementId = await ocean.assets.order(
                 ddo.id,
@@ -52,11 +58,18 @@ export default class AssetFile extends PureComponent<
                 index
             )
             Logger.log('path', path)
-
+            ReactGA.event({
+                category: 'Purchase',
+                action: 'purchaseAsset-end ' + ddo.id
+            })
             this.setState({ isLoading: false })
         } catch (error) {
             Logger.log('error', error)
             this.setState({ isLoading: false, error: error.message })
+            ReactGA.event({
+                category: 'Purchase',
+                action: 'purchaseAsset-error ' + error.message
+            })
         }
     }
 

client/src/routes/Publish/index.tsx

@@ -6,6 +6,7 @@ import AssetModel from '../../models/AssetModel'
 import { User } from '../../context/User'
 import Step from './Step'
 import Progress from './Progress'
+import ReactGA from 'react-ga'
 
 import { steps } from '../../data/form-publish.json'
 
@@ -90,6 +91,12 @@ class Publish extends Component<{}, PublishState> {
 
         currentStep =
             currentStep >= totalSteps - 1 ? totalSteps : currentStep + 1
+
+        ReactGA.event({
+            category: 'Publish',
+            action: 'nextStep ' + currentStep
+        })
+
         this.setState({ currentStep })
     }
 
@@ -242,6 +249,10 @@ class Publish extends Component<{}, PublishState> {
 
     private registerAsset = async (event: FormEvent<HTMLFormElement>) => {
         event.preventDefault()
+        ReactGA.event({
+            category: 'Publish',
+            action: 'registerAsset-start'
+        });
         this.setState({
             publishingError: '',
             isPublishing: true
@@ -281,11 +292,19 @@ class Publish extends Component<{}, PublishState> {
                 publishedDid: asset.id,
                 isPublished: true
             })
+            ReactGA.event({
+                category: 'Publish',
+                action: 'registerAsset-end' + asset.id
+            })
         } catch (e) {
             // make readable errors
             Logger.log('error:', e)
             this.setState({
-                publishingError: e
+                publishingError: e.message
+            })
+            ReactGA.event({
+                category: 'Publish',
+                action: 'registerAsset-error' + e.message
             })
         }
         this.setState({

client/src/withTracker.tsx

@@ -0,0 +1,41 @@
+import React, { Component } from 'react'
+import ReactGA from 'react-ga'
+
+interface TrackerProps {
+    location: any
+}
+
+ReactGA.initialize('UA-60614729-11', {testMode: process.env.NODE_ENV === 'test'})
+
+export default function withTracker(WrappedComponent: any, options: any = {}) {
+    const trackPage = (page: any) => {
+        options.isWeb3 = (window.web3 !== undefined)
+        ReactGA.set({
+            page,
+            ...options
+        })
+        ReactGA.pageview(page)
+    }
+
+    const HOC = class extends Component<TrackerProps, {}> {
+        componentDidMount() {
+            const page = this.props.location.pathname + this.props.location.search
+            trackPage(page)
+        }
+
+        componentWillReceiveProps(nextProps: any) {
+            const currentPage = this.props.location.pathname;
+            const nextPage = nextProps.location.pathname;
+      
+            if (currentPage !== nextPage) {
+                trackPage(nextProps.location.pathname + nextProps.location.search);
+            }
+        }
+
+        render() {
+            return <WrappedComponent {...this.props} />
+        }
+    }
+
+    return HOC
+}