diff --git a/website-glen/package.json b/website-glen/package.json
index bd1ae227b..96c350c67 100644
--- a/website-glen/package.json
+++ b/website-glen/package.json
@@ -9,6 +9,7 @@
"@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",
@@ -16,6 +17,7 @@
"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",
diff --git a/website-glen/src/App.js b/website-glen/src/App.js
index 0dc53a906..63b7b0a2a 100644
--- a/website-glen/src/App.js
+++ b/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 component in this App is different than the 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 for the React Router DOM 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 (
diff --git a/website-glen/src/components/About.js b/website-glen/src/components/About.js
index 47b08175a..73ffc59d9 100644
--- a/website-glen/src/components/About.js
+++ b/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 (
diff --git a/website-glen/src/components/DomainViz.js b/website-glen/src/components/DomainViz.js
index 9d06d9563..d629515f3 100644
--- a/website-glen/src/components/DomainViz.js
+++ b/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;
diff --git a/website-glen/src/components/Help.js b/website-glen/src/components/Help.js
index 10208318d..9d61d86af 100644
--- a/website-glen/src/components/Help.js
+++ b/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 (
diff --git a/website-glen/src/components/PrivacyStatement.js b/website-glen/src/components/PrivacyStatement.js
index 0e5b41841..3b2999de1 100644
--- a/website-glen/src/components/PrivacyStatement.js
+++ b/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 (
diff --git a/website-glen/src/components/TermsOfUse.js b/website-glen/src/components/TermsOfUse.js
index 17246979f..b0ec1b7ce 100644
--- a/website-glen/src/components/TermsOfUse.js
+++ b/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 (
diff --git a/website-glen/src/components/ViewPDF.js b/website-glen/src/components/ViewPDF.js
index 0a293f020..16dceb980 100644
--- a/website-glen/src/components/ViewPDF.js
+++ b/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(() => {