How to track pageviews on React - reactjs

Question

So basically the problem i have is that my site is using reactjs so it doesn't reload and i need to detect the change on the URL in order to send a new pageview to Google Analytics. Has anyone deal with this before?
EDIT: Maybe i was a little unclear, im using Google Tag Manager and i have no control over the code on the page but i can request for dataLayers.
The obvious solution is to ask for a dataLayer when the page changes but since i would like to avoid doing this i was strictly asking if anyone knows a way to detect this kind of changes on the DOM from GTM.

Answer 1

For single page apps, you can track 'virtual' pageviews like given in the docs:
When the page changes, do
ga('set', 'page', '/new-page.html');
After this point, if your do a 'send', it will track this page.
ga('send', 'pageview');
I'd suggest you use something like react-ga for doing it a little more conveniently, it has functions like
ReactGA.pageview('/about/contact-us');
and ReactGA.modalview('/about/contact-us');

Answer 2

You need to look for all the paths using a Route like this,
<Route path="/" component={updateTracking} />
<Switch>
..... //further actual routes
</Switch>
and then send the pageview using the global Google Analytics (ga) method (accessible through the window object) using window.location.pathname
const updateTracking = () => {
window.ga('send', 'pageview', {
page: window.location.pathname
});
}
Note: You need to put the tracking code you got from Google Analytics in the main HTML (index.html) for it all to work.

Answer 3

Alternatively, you can listen for createBrowserHistory changes and send a pageview event.
import { createBrowserHistory } from 'history'
const history = createBrowserHistory()
history.listen(() => {
window.ga('send', 'pageview', {
page: window.location.pathname
})
}
)

Answer 4

The useLocation hook was added in 5.1.0 & can be used:
In your App.js, import the following
import React, { useState } from 'react';
import { useLocation } from "react-router-dom";
The following assumes you have created the react application using create-react-app or some other mechanism to pick GA_ID in your application from ENV
In your Environment variables, make sure you have : REACT_APP_GA_ID
function initialiseAnalytics() {
const TRACKING_ID = process.env.REACT_APP_GA_ID;
ReactGA.initialize(TRACKING_ID);
}
function usePageTracking() {
const location = useLocation();
const [initialized, setInitialized] = useState(false);
useEffect(() => {
initialiseAnalytics();
setInitialized(true);
}, []);
useEffect(() => {
if (initialized) {
ReactGA.pageview(location.pathname + location.search);
}
}, [initialized, location]);
}
Finally, in your App function, call the page tracking -
function App() {
usePageTracking();
// Other Code Goes Here
return (
<div className="App">
<p>Sample Application</p>
</div>
);
}

Answer 5

Anyone still looking for the answer, here it is.
This is the expected behavior for Single Page Application(SPA) like React.
Solution is to update the Tracker when your route changes
You can deal with this problem in two ways
1- In all your route containers use set command from ga and update the tracker
ga('set', 'page', '/new-page.html');
2- In all your route containers use send command from ga and update the tracker
ga('send', 'pageview', '/new-page.html');
The second solution using send command is not recommended by Google Analytics
This is because fields passed via the send command are not set on the tracker—they apply to the current hit only. Not updating the tracker will cause problems if your application sends any non-pageview hits (e.g. events or social interactions), as those hits will be associated with whatever page value the tracker had when it was created.
Ref: Google Anaylytics