Google Analytics on React JS site displays incorrect data (broken sessions?)

Question

We have a site with most of the content managed by Wordpress, however, when a user goes to search pages (the user searches for a product), it is processed by React JS.

All this is in one domain, so the user never knows that they interact with two different applications.

The website’s Google Analytics, however, does not seem to perceive the session correctly. It registers your site’s inputs (landing pages) as search pages with fairly long URLs:

• There are thousands of landing pages, such as this one, and the site is new, so there is no way for all traffic to come from external links.
• The referrers path for all of these sessions is "(not installed)"
• Internal IP addresses filtered
• Traffic comes from different sources / environments, assuming sessions are somehow breaking (screenshot below)

GA is currently configured using GTM. I tried using this to run the GTM tag in React.

I also tried to make the GA tag in GTM mode when changing the browser history, and not in viewing pages (the change history works when, in React, normal pageviews in Wordpress). But this question still persists with these changes.

Please note that these sessions do not apply to any browser:

Answer 1

The problem you are faced with is the fact of the search, you switch your entry point and do a hard update of your page in the React application. Despite the fact that the domain does not seem to change, it is still considered by the browser as a new page load and thus demonstrates this in your analytics, as shown in this request:

In fact, you did not say if you use a “reactive router” in your application (I assume that you have different paths), a way around the problem would be to use react-ga instead of a GA script and use the reactive router's onUpdate .

First import and initialize the module using the GA identifier:

 import ReactGA from 'react-ga' ReactGA.initialize('UA-000000-01') 

Then, in the route settings, add the onUpdate property in <Router> and create a method that will only call google analytics with the path name, so you won’t get all the request parameters that are rather unpleasant in the control panel.

 const onUpdate = () => { ReactGA.set({ page: window.location.pathname }) ReactGA.pageview(window.location.pathname) } <Router onUpdate={onUpdate}> ... </Router> 

However, if you want to track a user's search, I would recommend using events instead and performing the following actions in the search:

 ReactGA.event({ category: 'User', action: 'Search', value: 'your formatted search value' }) 

It will also give you the opportunity to format the search value in any way that is more readable to you than query parameters.