add google analytics

frontend/src/index.js

@@ -4,8 +4,14 @@ import { Provider } from 'react-redux'
 import { Route, Switch } from 'react-router' // react-router v4/v5
 import { ConnectedRouter } from 'connected-react-router'
 import configureStore, { history } from './redux-router/configureStore'
+import ReactGA from 'react-ga';
+
+
 import 'semantic-ui-css/semantic.min.css'
 
+// withTracker
+import withTracker from './withTracker';
+
 // Main
 import MainContainer from "./Main/MainContainer"
 
@@ -15,6 +21,8 @@ import ListSystemsContainer from "./System/ListSystemsContainer"
 // Call
 import CallPlayerContainer from "./Call/CallPlayerContainer"
 
+ReactGA.initialize(process.env.GOOGLE_ANALYTICS);
+
 const store = configureStore(/* provide initial state if any */)
 
 ReactDOM.render(
@@ -22,9 +30,9 @@ ReactDOM.render(
     <ConnectedRouter history={history}> { /* place ConnectedRouter under Provider */ }
       <> { /* your usual react-router v4/v5 routing */ }
         <Switch>
-          <Route exact path="/" component={MainContainer} />
-          <Route exact path="/systems" component={ListSystemsContainer} />
-          <Route exact path="/system/:shortName" component={CallPlayerContainer} />
+          <Route exact path="/" component={withTracker(MainContainer)} />
+          <Route exact path="/systems" component={withTracker(ListSystemsContainer)} />
+          <Route exact path="/system/:shortName" component={withTracker(CallPlayerContainer)} />
           <Route render={() => (<div>Miss</div>)} />
         </Switch>
       </>

frontend/src/withTracker.js

@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import ReactGA from 'react-ga';
+
+export default function withTracker(WrappedComponent, options = {}) {
+  const trackPage = (page) => {
+    ReactGA.set({
+      page,
+      ...options
+    });
+    ReactGA.pageview(page);
+  };
+
+  const HOC = class extends Component {
+    componentDidMount() {
+      const {
+        location: { pathname: page }
+      } = this.props;
+      trackPage(page);
+    }
+
+    // eslint-disable-next-line camelcase
+    UNSAFE_componentWillReceiveProps(nextProps) {
+      const {
+        location: { pathname: currentPage }
+      } = this.props;
+      const nextPage = nextProps.location.pathname;
+
+      if (currentPage !== nextPage) {
+        trackPage(nextPage);
+      }
+    }
+
+    render() {
+      return <WrappedComponent {...this.props} />;
+    }
+  };
+
+  return HOC;
+}