feature/google analytics

website-glen/package.json

@@ -9,13 +9,15 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "ansi-escapes": "^4.2.1",
     "axios": "^0.21.0",
     "babel": "^6.23.0",
     "chalk": "^2.4.2",
     "core-util-is": "^1.0.2",
     "css-what": "^5.0.0",
     "file-saver": "^2.0.2",
     "fontsource-roboto": "^3.0.3",
+    "history": "^4.10.1",
     "material-ui": "^0.20.2",
     "pip": "^0.0.1",
     "react": "^16.14.0",

website-glen/src/App.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import './App.css';
 import 'fontsource-roboto';
 import { makeStyles } from '@material-ui/core/styles';
@@ -9,6 +9,8 @@ import {
   Route,
   Link as RouterLink,
 } from 'react-router-dom';
+import ReactGA from 'react-ga';
+import { createBrowserHistory } from 'history';
 
 import { ViewPDF } from './components/ViewPDF';
 import Footer from './components/Footer';
@@ -71,6 +73,14 @@ const theme = createMuiTheme({
   },
 });
 
+// This is the google analytics TrackingID. From @DevangMeta.
+const trackingID = 'G-14GTTWTQ07';
+const browserHistory = createBrowserHistory();
+
+browserHistory.listen(location => {
+  ReactGA.set({ page: location.pathname }); // Update the users current page
+  ReactGA.pageview(location.pathname); // Record a pageview for the page.
+})
 // NOTE that this <Link> component in this App is different than the <Link> component in other pages such as Help and About.
 // This is an unfortunate circumstance due to React Router DOM and MaterialUI using the same component name for different 
 // functionalities. Therefore, I am using the Alias <RouterLink> for the React Router DOM <Link> component.
@@ -80,6 +90,13 @@ const theme = createMuiTheme({
 // https://material-ui.com/components/links/
 function App() {
   const classes = useStyles();
+
+  // Initialize google analytics
+  useEffect(() => {
+    ReactGA.initialize(trackingID);
+
+  }, []);
+
   return (
     <div className="App">
       <BrowserRouter>

website-glen/src/components/About.js

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Grid, Paper, Typography, Link } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import {  Link as RouterLink } from 'react-router-dom';
-
+import ReactGA from 'react-ga';
+import { createBrowserHistory } from 'history';
 
 
 const useStyles = makeStyles((theme) => ({
@@ -21,9 +22,18 @@ const useStyles = makeStyles((theme) => ({
       height: '580px',
   },
 }));
+
+const browserHistory = createBrowserHistory();
 export const About = () => {
   const classes = useStyles()
 
+  useEffect(() => {
+    browserHistory.listen(location => {
+      ReactGA.set({ page: location.pathname }); // Update the users current page
+      ReactGA.pageview(location.pathname); // Record a pageview for the page.
+    });
+  }, []);
+
   return (
       <Grid container spacing={3} alignItems='center' justify='center' style={{ marginTop: "90px" }}>
         <Grid item xs={11}>

website-glen/src/components/DomainViz.js

@@ -1,6 +1,9 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 //import request from 'utils/Request'; TODO refactor to remove burden from ProtPlot.js
 import axios from 'axios';
+import ReactGA from 'react-ga';
+import { createBrowserHistory } from 'history';
+
 import UploadFile from './utils/UploadFile';
 import AccordionSetup from './AccordionSetup';
 import isFasta from './utils/ValidateFile';
@@ -48,7 +51,16 @@ let guid = () => {
     return s4() + s4() + '.' + s4() + '.' + s4() + '.' + s4() + '.' + s4() + s4() + s4();
 }
 
+const browserHistory = createBrowserHistory();
 function ProtPlot() {
+
+    useEffect(() => {
+        browserHistory.listen(location => {
+          ReactGA.set({ page: location.pathname }); // Update the users current page
+          ReactGA.pageview(location.pathname); // Record a pageview for the page.
+        });
+      }, []);
+
     //temp for production
     function getImages() {
         let id = textFields.uidTextField;

website-glen/src/components/Help.js

@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Grid, Paper, Typography, Link, Accordion, AccordionSummary, AccordionDetails } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import HelpImage from './img/help-file.png'
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import ReactGA from 'react-ga';
+import { createBrowserHistory } from 'history';
 
 
 const useStyles = makeStyles((theme) => ({
@@ -25,9 +27,18 @@ const useStyles = makeStyles((theme) => ({
     width: "1000px"
 },
 }));
+
+const browserHistory = createBrowserHistory();
 export const Help = () => {
   const classes = useStyles()
 
+  useEffect(() => {
+    browserHistory.listen(location => {
+      ReactGA.set({ page: location.pathname }); // Update the users current page
+      ReactGA.pageview(location.pathname); // Record a pageview for the page.
+    });
+  }, []);
+
   return (
     <Grid container spacing={3} alignItems='center' justify='center' style={{ marginTop: "90px" }}>
       <Grid item xs={11}>

website-glen/src/components/PrivacyStatement.js

@@ -1,6 +1,8 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Grid, Paper, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
+import ReactGA from 'react-ga';
+import { createBrowserHistory } from 'history';
 
 
 const useStyles = makeStyles((theme) => ({
@@ -15,9 +17,18 @@ const useStyles = makeStyles((theme) => ({
     textDecoration: 'underline',
   },
 }));
+
+const browserHistory = createBrowserHistory();
 export const PrivacyStatement = () => {
   const classes = useStyles()
 
+  useEffect(() => {
+    browserHistory.listen(location => {
+      ReactGA.set({ page: location.pathname }); // Update the users current page
+      ReactGA.pageview(location.pathname); // Record a pageview for the page.
+    });
+  }, []);
+
   return (
       <Grid container spacing={3} alignItems='center' justify='center' style={{ marginTop: "90px" }}>
         <Grid item xs={11}>

website-glen/src/components/TermsOfUse.js

@@ -1,6 +1,8 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Grid, Paper, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
+import ReactGA from 'react-ga';
+import { createBrowserHistory } from 'history';
 
 
 const useStyles = makeStyles((theme) => ({
@@ -10,9 +12,18 @@ const useStyles = makeStyles((theme) => ({
       color: theme.palette.text.secondary,
   },
 }));
+
+const browserHistory = createBrowserHistory();
 export const TermsOfUse = () => {
   const classes = useStyles()
 
+  useEffect(() => {
+    browserHistory.listen(location => {
+      ReactGA.set({ page: location.pathname }); // Update the users current page
+      ReactGA.pageview(location.pathname); // Record a pageview for the page.
+    });
+  }, []);
+
   return (
       <Grid container spacing={3} alignItems='center' justify='center' style={{ marginTop: "90px" }}>
         <Grid item xs={11}>

website-glen/src/components/ViewPDF.js

@@ -16,6 +16,8 @@ import {
 import { makeStyles } from '@material-ui/core/styles';
 import { useHistory } from 'react-router-dom';
 import DomainVizIcon from './img/domainviz.png';
+import ReactGA from 'react-ga';
+import { createBrowserHistory } from 'history';
 
 
 const useStyles = makeStyles((theme) => ({
@@ -36,6 +38,8 @@ const useStyles = makeStyles((theme) => ({
         width: "293px"
     },
 }));
+
+const browserHistory = createBrowserHistory();
 let interval;
 export const groupsize = 6;
 export const ViewPDF = () => {
@@ -65,6 +69,14 @@ export const ViewPDF = () => {
     const handleClose = () => {
         setOpen(false);
     };
+
+    useEffect(() => {
+        browserHistory.listen(location => {
+            // Here the url should just be ".../view-results/"
+            ReactGA.set({ page: location.split(uid)[0] }); // Update the users current page
+            ReactGA.pageview(location.split(uid)[0]); // Record a pageview for the page.
+        });
+    }, [uid]);
 
     useEffect(() => {
         interval = setInterval(() => {