From 4c85cdc4880c7b7e1f94f12d2081e1bf9d21001b Mon Sep 17 00:00:00 2001 From: cameronridderikhoff Date: Sat, 26 Jun 2021 16:31:22 -0600 Subject: [PATCH] added GA to major pages --- website-glen/package.json | 2 ++ website-glen/src/App.js | 19 ++++++++++++++++++- website-glen/src/components/About.js | 14 ++++++++++++-- website-glen/src/components/DomainViz.js | 14 +++++++++++++- website-glen/src/components/Help.js | 13 ++++++++++++- .../src/components/PrivacyStatement.js | 13 ++++++++++++- website-glen/src/components/TermsOfUse.js | 13 ++++++++++++- website-glen/src/components/ViewPDF.js | 12 ++++++++++++ 8 files changed, 93 insertions(+), 7 deletions(-) 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(() => {