Unable to connect ReactJS App with google analytics - reactjs

Question

I am trying to connect my personal website made using ReactJS to Google Analytics. I have followed this tutorial but I am still not able to see an active user (when I access the site on local host or when I deploy it using netlify).
Here is my app.js:
import React, {useEffect} from 'react';
import Courses from './containers/Courses/Courses';
import Home from './containers/Home/Home';
import {Route, Switch, Redirect} from 'react-router-dom';
import Layout from './hoc/Layout/Layout';
import About from './containers/About/About';
import ContactPage from './containers/ContactPage/ContactPage';
import Projects from './components/Projects/Projects';
import ReactGa from 'react-ga';
const App = () => {
useEffect(() => {
document.title = "Dhruv Mittal";
ReactGa.initialize('UA-XXXXXXXXX-X');
//Report page view
ReactGa.pageview(window.location.pathname + window.location.search);
}, []);
let routes = (
<Switch>
<Route path="/about" component={About}/>
<Route path="/projects" component={Projects}/>
<Route path="/courses" component={Courses}/>
<Route path="/contact" exact component={ContactPage}/>
<Route path="/" component={Home}/>
<Redirect to='/'/>
</Switch>
);
return (
<div>
<Layout>
{routes}
</Layout>
</div>
);
}
export default App;

Answer 1

You are not listening to the location changes. Try this way. Add a component called GAListener, which listen to the location changes of history object.
GaListener.js
import React from 'react';
import ReactGA from 'react-ga';
import { withRouter } from 'react-router-dom';
class GAListener extends React.Component {
componentDidMount() {
ReactGA.initialize("UA-XXXXXXXXX-X");
this.sendPageView(this.props.history.location);
this.props.history.listen(this.sendPageView);
}
sendPageView = location => {
ReactGA.set({ page: location.pathname });
ReactGA.pageview(location.pathname);
};
render() {
return this.props.children;
}
}
export default withRouter(GAListener);
Now wrap your Route components inside GAListener component as follows.
App.js
const App = () => {
let routes = (
<GAListener>
<Switch>
<Route path="/about" component={About}/>
<Route path="/projects" component={Projects}/>
<Route path="/courses" component={Courses}/>
<Route path="/contact" exact component={ContactPage}/>
<Route path="/" component={Home}/>
<Redirect to='/'/>
</Switch>
</GAListener>
);
return (
<div>
<Layout>
{routes}
</Layout>
</div>
);
}
export default App;