Track users in your react app with google analytics

I have a production-ready React app. How do I track my users? The answer is: Google analytics 🧙

Watch the video now:

Photo by rawpixel on Unsplash

I will show you how you can track users and their actions in your react app using google analytics.

Let’s get started.

install reactGA package:

go to the root and run :

npm install react-ga --save

or

yarn add react-ga

Package: https://github.com/react-ga/react-ga

now go to your component which you want to track and import the newly installed package.

import ReactGA from "react-ga";

then initialize tracking once the component is mounted.

componentDidMount() {
   ReactGA.initialize('replace-your-trackingID-here');
}

So this is the basic usage of google analytics.

Wait… Is that it? no way. We can do better. Let’s make a component with all tracking options.

I’ll call it Tracking. go to your components folder and make a new folder called Tracking. Then we need the index.js file.

cd components && mkdir Tracking && touch index.js

open up index.js file and first thing first import ReactGa

import ReactGA from "react-ga";

Create a method to initialize

export const initGA = (trackingID) => {           
   ReactGA.initialize(trackingID); 
}

Now we need to know where our users going. For this, we have to trigger the pageview method from ReactGa

ReactGA.pageview(window.location.pathname + window.location.search);

But let’s make it a bit cleaner. Bring it to a method then we can trigger those methods in the app.js:

export const PageView = () => {  
    ReactGA.pageview(window.location.pathname +  
                     window.location.search); 
}

Great. Now we can use this to track the user navigation. One more important thing is to track events and actions. ReactGA provides a method for this: ReactGA.event() using this method we can track any user actions like adding to cart or clicking on an image or button.

Let’s make it easier to use creating a method:

/**
 * Event - Add custom tracking event.
 * @param {string} category 
 * @param {string} action 
 * @param {string} label 
 */
export const Event = (category, action, label) => {
  ReactGA.event({
    category: category,
    action: action,
    label: label
  });
};

Now you can use this method to track any events.

Using the tracking component and methods:

Open app.js or your app Bootstrap file.

First import the Tracking component:

import {PageView, initGA} from './components/Tracking';

Now run our tracking methods on componentDidMount:

componentDidMount() {
    initGA('YourTrackingID');
    PageView();
  }

Tracking events:

Open any component you want to track. For example, if you have an add to cart button you can track it like this: but first import the event method

import { Event } from "../Tracking";

Then trigger the event method on click:

<button
   onClick={()=> 
       Event("PRODUCT", "Product added to cart", "PRODUCT_PAGE")
   } >Add to Cart</button>

That’s it. Now open your google analytics dashboard and you can see all tracking details.
To see an event you can go navigate to Behavior->Events->Overview.

Last tip:
Using OutboundLink you can track events easily.

Usage: Import ReagtGA

import ReactGA from "react-ga";

If you want to track who clicked your logo. You can wrap your logo with outbound link.

<ReactGA.OutboundLink eventLabel="Logo" to="/" target="_self">
         <img widht="100" src={Logo} />
 </ReactGA.OutboundLink>

Yey. That’s it. Feel free to ask any question or comment.

If you liked the article follow me or clap it👏👏👏. Thank you

Malith Priyashan - Medium