CODEWITHSUNDEEP
reactjsgoogle-analyticsgoogle-analytics-4
Jake
Jake

Reputation: 507

Google Analytics 4 and React Router == Page Title Lag

Some background...

We are working with an SPA site built in React. We are currently integrating Google Analytics 4. We have enabled Enhanced Measurement for GA4, which collects a lot of data automatically, including pageview. Since the React router uses the Web History API to change pages, the automatic GA4 pageview is working almost perfectly out of the box. However, we have noticed that on some data collections, sometimes the page title lags and uses the title from the previous page.

The assumption is that this is happening because of the following... 1) when we start a navigation, React changes the URL right away without knowing any other meta data about the page (including the page title), and 2) once we fetch the meta data about the page, we then update the DOM with that data; but... 3) GA4 is triggering right away at the URL / history change, which is before we've added the proper title.

Knowing this, we understand that we could fix this issue by delaying the URL change until we have the proper meta data. However, since we are working with the React Router, there doesn't seem to be a built-in way to do this. It seems like we would have to write our own router which would be way outside of the scope for this project. Does anyone know of any way to do this without major surgery?

We also understand that we could fix this by disabling the automatic pageview and simply implementing a custom pageview event. However, our analytics manager has concerns around this because 1) in order to do this, we have to turn off Enhanced Measurement entirely; there is no way to keep Enhanced Measurement enabled and disable only the automatic pageview event, and 2) we would be moving to a non-standard implementation, which in the past has given us many headaches.

Has anyone come across these issues, and if so what kind of solutions did people come up with to solve this?

Upvotes: 8

Views: 1334

Answers (1)

stereoscott
stereoscott

Reputation: 13436

  1. in order to do this, we have to turn off Enhanced Measurement entirely; there is no way to keep Enhanced Measurement enabled and disable only the automatic pageview event

You can keep Enhanced Measurement enabled and disable page changes based on browser history events. See the settings screen for Enhanced Measurement and click "Show advanced settings."

enter image description here

However, as you pointed out, if you turn off automatic tracking via history changes, then it's up to you to trigger the page views. This really isn't bad though if you are already using react router. You could put it in with a delay to give your component a chance to update the page title, or you could store the title in state and read from that.

const history = useHistory();
useEffect(() => {
 history.listen(action => {
   // track page
 });
}, []);

One other idea would be to trigger the page view when the document title changes, rather than when the history object changes. (See How to listen for changes to the title element?)

Upvotes: 1

Related Questions