CODEWITHSUNDEEP
javascriptreactjsgoogle-analyticsgoogle-tag-manager
Orun
Orun

Reputation: 4603

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

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

It's all on the same domain, so the user never knows that they are interfacing with two different applications.

Google Analytics on the site, however, doesn't seem to perceive sessions correctly. It's logging entrances (landing pages) to the site as search pages with rather long URLs:

landing pages

sources for landing pages

Currently, GA is set up with GTM. I tried using this to fire the GTM tag in React.

Also attempted making the GA tag within GTM fire on browser history changes rather than page views (history changes fire when in React, normal page views in Wordpress). But the issue still persists with these modifications.

Note that these sessions are not specific to any one browser: landing pages by browser

Upvotes: 4

Views: 2818

Answers (1)

Preview
Preview

Reputation: 35806

The issue you're experiencing comes from the fact upon search, you are switching your entry point and doing a hard refresh of your page to the React app. Even though the domain doesn't seem to change, it's still considered by the browser as a fresh page load and thus showing like so in your analytics, as shown by this request:

request

You haven't really told if you were using react-router in your app (I'm assuming you are given the different paths), a way to get around the problem would be to use react-ga instead of the default GA script and leverage the onUpdate callback of react-router.

First import and initialize the module with your GA id:

import ReactGA from 'react-ga'

ReactGA.initialize('UA-000000-01')

Then in your routes configuration, add the onUpdate property on the <Router> and create a method that will call the google analytics with only the pathname so you won't end up with all the query parameters that are quite obnoxious in the dashboard.

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

<Router onUpdate={onUpdate}>
  ...
</Router>

Still, if you want to keep track of the user search, I would recommend using events instead, and doing something like the following upon search:

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

It will also give you the ability to format the value of the search any way you want, which would be more readable for you than query parameters.

Upvotes: 2

Related Questions