Add Google Analytics tracking

package.json

@@ -7,6 +7,7 @@
     "classnames": "^2.2.6",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-ga": "^2.6.0",
     "react-router-dom": "^5.0.0"
   },
   "devDependencies": {

src/apps/ConferenceApp/ConferenceApp.tsx

@@ -23,6 +23,8 @@ import { IProps, IState } from "./types";
 import styles from "./ConferenceApp.module.scss";
 import { IEdition } from "../../types/IConference";
 import constants from "../../constants";
+import ReactGA from 'react-ga';
+import withTracker from '../withTracker';
 
 const sortByName = (itemA: any, itemB: any) => {
   if (itemA.name < itemB.name) return -1;
@@ -38,6 +40,8 @@ const Home: React.SFC<any> = ({ conferenceInfo, globalInfo }: { conferenceInfo:
 
   const globalOrganizers = globalInfo.organizers ? globalInfo.organizers.sort(sortByName) : [];
 
+  ReactGA.pageview(location.pathname);
+
   return (
     <>
       <Banner to="#about" title={conferenceInfo.name}>
@@ -114,9 +118,9 @@ export default class ConferenceApp extends React.PureComponent<IProps, IState> {
           </Header>
           {/* Body */}
           <Route exact path="/" render={() => <Home conferenceInfo={lastEdition} globalInfo={globalEdition} />} />
-          <Route path="/schedule" component={Schedule} />
-          <Route path="/conduct" component={Conduct} />
-          <Route path="/team" component={Team} />
+          <Route path="/schedule" component={withTracker(Schedule)} />
+          <Route path="/conduct" component={withTracker(Conduct)} />
+          <Route path="/team" component={withTracker(Team)} />
           {/* End body */}
           <Footer>
             <NavLink activeClassName={styles.navActive} className={styles.navLink} to="/conduct">

src/apps/GlobalApp/GlobalApp.tsx

@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route } from "react-router-dom";
 import { Header, Footer, NavLink, PageSection, Banner, About, PastEditions } from "../../components";
 import { FlagArgentina, FlagChile, FlagColombia, FlagPeru, FlagUruguay } from "../../components/SVGs";
 import { Conduct, Sponsorship, Team } from "../../pages";
+import withTracker from '../withTracker';
 
 import styles from "./GlobalApp.module.scss";
 
@@ -38,10 +39,10 @@ export default class GlobalApp extends React.PureComponent {
             <NavLink to="/team">Team</NavLink>
           </Header>
           {/* Body */}
-          <Route exact path="/" component={Home} />
-          <Route path="/conduct" component={Conduct} />
-          <Route path="/sponsorship" component={Sponsorship} />
-          <Route path="/team" component={Team} />
+          <Route exact path="/" component={withTracker(Home)} />
+          <Route path="/conduct" component={withTracker(Conduct)} />
+          <Route path="/sponsorship" component={withTracker(Sponsorship)} />
+          <Route path="/team" component={withTracker(Team)} />
           {/* End body */}
           <Footer>
             <NavLink to="/conduct">Código de conducta</NavLink>

src/apps/withTracker.jsx

@@ -0,0 +1,38 @@
+/**
+ * From ReactGA Community Wiki Page https://github.com/react-ga/react-ga/wiki/React-Router-v4-withTracker
+ */
+
+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 page = this.props.location.pathname;
+      trackPage(page);
+    }
+
+    componentWillReceiveProps(nextProps) {
+      const currentPage = this.props.location.pathname;
+      const nextPage = nextProps.location.pathname;
+
+      if (currentPage !== nextPage) {
+        trackPage(nextPage);
+      }
+    }
+
+    render() {
+      return <WrappedComponent {...this.props} />;
+    }
+  };
+
+  return HOC;
+}

src/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import * as serviceWorker from "./serviceWorker";
+import ReactGA from 'react-ga';
 import { GlobalApp, ConferenceApp } from "./apps";
 
 import "./styles/global.scss";
@@ -33,8 +34,34 @@ function getConferenceId(): string {
   return toReturn;
 }
 
+function getTrackingId(conferenceId:string): string {
+  const baseCode = "UA-49706206-";
+  switch (conferenceId) {
+    case "vopen-ar":
+      return baseCode + "5";
+    case "vopen-cl":
+      return baseCode + "6";
+    case "vopen-co":
+      return baseCode + "7";
+    case "vopen-pe":
+      return baseCode + "8";
+    case "vopen-uy":
+      return baseCode + "9";
+    case "vopen-global":
+      return baseCode + "10";
+    default:
+      break;
+  }
+  return "";
+}
+
 const conferenceId = getConferenceId();
+
+const trackingId = getTrackingId(conferenceId);
+ReactGA.initialize(trackingId);
+
 const WebsiteApp = conferenceId !== "vopen-global" ? ConferenceApp : GlobalApp;
+
 ReactDOM.render(<WebsiteApp conferenceId={conferenceId} />, document.getElementById("root"));
 
 // If you want your app to work offline and load faster, you can change