Merge pull request #62 from protofire/feature/google-analytics

(Feature) Add google analytics

.env.example

@@ -1,4 +1,5 @@
 NODE_ENV=development
 REACT_APP_API_BASE_URL=http://localhost:4040/api/subscribers/
+GOOGLE_ANALYTICS_UID=YOUR_GOOGLE_ANALYTICS_UID
 REACT_APP_LIVEPEER_TELEGRAM_BOT_URL=https://t.me/LivepeerNotificationBot
 REACT_APP_DEMO_ADDRESS=YOUR_LIST_OF_ADDRESSES_SEPARATED_BY_COMA

package.json

@@ -33,6 +33,7 @@
     "react-copy-to-clipboard": "^5.0.1",
     "react-datetime": "2.15.0",
     "react-dom": "^16.6.3",
+    "react-ga": "^2.5.6",
     "react-google-maps": "9.4.5",
     "react-jvectormap": "0.0.3",
     "react-router": "^4.3.1",

src/App.js

@@ -2,7 +2,7 @@ import PrivateRoute from './Components/Common/Hoc/PrivateRoute/PrivateRoute'
 import React, { Component } from 'react'
 import Spinner from './Components/Common/UI/Spinner/Spinner'
 import { AccountSummarySubscriptionForm } from './Components/AccountSummary/AccountSummarySubscriptionForm/AccountSummarySubscriptionForm'
-import { BrowserRouter as Router, Route, Switch, withRouter } from 'react-router-dom'
+import { Route, Switch, withRouter } from 'react-router-dom'
 import { HomeComponent, AccountSummaryComponent } from './Components'
 import { Redirect } from 'react-router'
 import Web3Provider, {
@@ -16,7 +16,8 @@ import bgImage from './assets/img/bg/5.jpg'
 import pagesStyle from './assets/jss/dashboard/layouts/pagesStyle.js'
 import withStyles from '@material-ui/core/styles/withStyles'
 import logdown from 'logdown'
-
+import ReactGA from 'react-ga'
+import { BrowserRouter as Router } from 'react-router-dom'
 const logger = logdown('Livepeer:App')
 logger.state.isEnabled = process.env.NODE_ENV !== 'production'
 
@@ -25,10 +26,24 @@ export class App extends Component {
     render: true
   }
 
+  onRouteChanged = () => {
+    /** Google analytics **/
+    if (this.props.location && this.props.location.pathname) {
+      logger.log('Google analytics: ', this.props.location.pathname)
+      ReactGA.pageview(this.props.location.pathname)
+    }
+  }
+
   componentDidMount() {
     document.body.style.overflow = 'unset'
   }
 
+  componentDidUpdate(prevProps) {
+    if (this.props.location !== prevProps.location) {
+      this.onRouteChanged()
+    }
+  }
+
   shouldComponentUpdate(nextProps, nextState, nextContext) {
     logger.log('Fire event shouldComponentUpdate')
     let shouldUpdate = true

src/Components/AccountSummary/AccountSummary.js

@@ -5,6 +5,7 @@ import SpinnerExtended from '../Common/UI/SpinnerExtended/SpinnerExtended'
 import axios from 'axios'
 import { toast, ToastContainer } from 'react-toastify'
 import logdown from 'logdown'
+import ReactGA from 'react-ga'
 
 const logger = logdown('Livepeer:AccountSummary')
 logger.state.isEnabled = process.env.NODE_ENV !== 'production'
@@ -110,6 +111,11 @@ export class AccountSummaryComponent extends Component {
 
   componentDidMount = async () => {
     logger.log('Fire event componentDidMount')
+    /** Google analytics **/
+    if (this.props.location && this.props.location.pathname) {
+      logger.log('Google analytics: ', this.props.location.pathname)
+      ReactGA.pageview(this.props.location.pathname)
+    }
     let userDataPromise, summaryPromise
     this.initState(async () => {
       /** Check if the user is subscribed **/

src/Components/AccountSummary/AccountSummarySubscriptionForm/AccountSummarySubscriptionForm.js

@@ -7,6 +7,7 @@ import validator from 'validator'
 import { toast, ToastContainer } from 'react-toastify'
 import logdown from 'logdown'
 import AccountSummaryModalEmail from './AccountSummaryFormDisplay/AccountSummaryModalEmail/AccountSummaryModalEmail'
+import ReactGA from 'react-ga'
 
 const logger = logdown('Livepeer:AccountSummarySubscriptionForm')
 logger.state.isEnabled = process.env.NODE_ENV !== 'production'
@@ -48,6 +49,11 @@ export class AccountSummarySubscriptionForm extends Component {
 
   componentDidMount() {
     logger.log('Fire event componentDidMount')
+    /** Google analytics **/
+    if (this.props.location && this.props.location.pathname) {
+      logger.log('Google analytics: ', this.props.location.pathname)
+      ReactGA.pageview(this.props.location.pathname)
+    }
     this.setState({
       address: this.props.userData.address,
       render: true

src/Components/TermsAndConditions/TermsAndConditions.js

@@ -4,12 +4,20 @@ import GridItem from '../Common/UI/Grid/GridItem.js'
 import PropTypes from 'prop-types'
 import React from 'react'
 import withStyles from '@material-ui/core/styles/withStyles'
-
+import ReactGA from 'react-ga'
 import termsStyle from '../../assets/jss/dashboard/views/termsStyle'
+import logdown from 'logdown'
+const logger = logdown('Livepeer:Terms')
+logger.state.isEnabled = process.env.NODE_ENV !== 'production'
 
 class TermsAndConditionsComponent extends React.Component {
   render() {
     const { classes } = this.props
+    /** Google analytics **/
+    if (this.props.location && this.props.location.pathname) {
+      logger.log('Google analytics: ', this.props.location.pathname)
+      ReactGA.pageview(this.props.location.pathname)
+    }
     return (
       <GridContainer className={classes.gridContainer} justify="center" alignItems="center">
         <GridItem className={`${classes.cardContainer}`}>

src/Tests/App.spec.js

@@ -31,7 +31,6 @@ describe('Check public and protected routes', () => {
         <App {...props} />
       </MemoryRouter>
     )
-
     expect(wrapper.find(AccountSummaryComponent)).toHaveLength(0)
     expect(wrapper.find(HomeComponent)).toHaveLength(1)
   })

src/index.js

@@ -6,16 +6,25 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import axios from 'axios'
 import { BrowserRouter as Router } from 'react-router-dom'
-
+import ReactGA from 'react-ga'
+import logdown from 'logdown'
+const logger = logdown('Livepeer:Index')
+logger.state.isEnabled = process.env.NODE_ENV !== 'production'
 /** Axios default cfg **/
 axios.defaults.baseURL = process.env.REACT_APP_API_BASE_URL
+const googleAnalyticsURL = process.env.REACT_APP_GOOGLE_ANALYTICS_UID
+/** Google analytics **/
+if (process.env && process.env.NODE_ENV === 'production' && googleAnalyticsURL) {
+  logger.log('Initialization of google analytics with UID: ', googleAnalyticsURL)
+  ReactGA.initialize(googleAnalyticsURL)
+  ReactGA.pageview('/')
+}
 
 const app = (
   <Router>
     <App />
   </Router>
 )
-
 ReactDOM.render(app, document.getElementById('root'))
 
 // If you want your app to work offline and load faster, you can change