Unable to track time spent on React web app with Google Analytics

Question

I have built a React web app and I would like to track the users time spent on my website using Google Analytics.

Currently I am using react-ga (https://github.com/react-ga/react-ga) as a tool to bind the Google Analytics with React. I have successfully tracked each page with Google Analytics. I can see the traffic sources and overview like this: Google Analytics Screen shot

However, when I checked the Avg. Time Spent page: Google Analytics Behavior overview. I can not see any data on avg. time spent.

The following is what I have set up in my code, I initialized the ReactGA in my App.js file:

App.js

componentDidMount() {
    ReactGA.initialize('UA-xxxxxxx-x')
    ....
}

And I tracked my pages like this in my Routing.js file where I have all my react routers routes in this file:

Routing.js

componentDidMount() {
  this.props.history.listen(location => ReactGA.pageview(location.pathname))
  ...
}

So far this is all I have set up for react-ga for Google Analytics.

Do I miss anything for tracking the Avg. time spent on my site?

score 0 · Answer 1 · edited Aug 30 '20 at 08:46

You can use timing api: Allow to measure periods of time such as AJAX requests and resources loading by sending hits using the analytics.js library.

ReactGA.timing({
  category: 'JS Libraries',
  variable: 'load',
  value: 20, // in milliseconds
  label: 'CDN libs'
});

This is equivalent to the following Google Analytics command:

ga('send', 'timing', 'JS Libraries', 'load', 20, 'CDN libs');

https://developers.google.com/analytics/devguides/collection/analyticsjs/user-timings

Unable to track time spent on React web app with Google Analytics

1 Answers1