Is there a way to track a user active time spent in the React web application via Google Analytics?

Question

Let's say an user with user_id(1000) and email(user101@example.com) logged into the reactjs based web application and browsed a few pages for 2mins and then moved to other application tabs/windows for 30mins and came back to the web application and browsed the app for 5more mins on April 1st 2021.

I would like track/get this user's time spent report in the Google Analytics report saying user101@example.com with user_id(1000) has spent 7mins on April 1st 2021. Is there a way to track the same via GA if possible with react-ga, if it is possible how can we do it?

As of now with react-ga I'm tracking the userid property like the below:

ReactGA.set({userId});

If it is not possible via Google Analytics, is there any service provider that has this kind of feature?

Note: I have gone through existing q/a but unable to find/figure out the solution.

Answer 1

I was able use another tracker Riveted, which by it's definition:

Riveted helps fix this by measuring the amount of time users are actively engaged (e.g., clicking, scrolling, using the keyboard) and then reporting the data to Google Analytics in frequent intervals.

More on it's page.

While Riveted is written with a direct global variable, we need to work around to make it available for the react project using exports-loader.

Here is what I could achieve:

• Get the riveted.js locally as a file

• Ensure to install the exports-loader via npm install exports-loader --save

• Import the same with the location of revited.js as:

  import riveted from 'exports-loader?exports=riveted!./riveted.js';

• After you have initialised ReactGA.initialize(configs);

• If you check the source code of riveted, you will notice it's using the same ga object of window.ga and thus the google analytics once initialised via ReactGA.initialize should be enough.

• The react-ga provides an ability to extend ga. They state ga can be accessed via ReactGA.ga() method. This gives developers the flexibility of directly using ga.js features that have not yet been implemented in ReactGA. No validations will be done by ReactGA as it is being bypassed if this approach is used.

• Then the ga allows writing a custom plugin

So with all that here is what the code looks like:

import React, { PureComponent } from 'react';
import ReactGA from '../../src';
import riveted from 'exports-loader?exports=riveted!./riveted.js';

 export default class App extends PureComponent {
   constructor(props, context) {
     super(props, context);

     this.state = {
       reactGaInitialised: false,
       configs: [DEFAULT_CONFIG]
     };
   }


   initReactGA = (event) => {
     const { configs } = this.state;
     ReactGA.initialize(configs);
     // Send initial test view
     ReactGA.pageview('test-init-pageview');

     function TrackerCustomPlugin() {
         this.riveted = riveted;
     }
     TrackerCustomPlugin.prototype.init = riveted.init;

     let ga = ReactGA.ga();
     ga('provide', 'riveted', TrackerCustomPlugin);
     ga('require', 'riveted');
     ReactGA.plugin.execute('riveted', 'init', {
         reportInterval: 10,   // Default: 5
         idleTimeout: 20,      // Default: 30
         nonInteraction: true  // Default: true
     });
  };

Here is how the events are sent to GA from my local:

And the GA Dashboard showing Time Spent: