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

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

Let’s get started.

First install reactGA package, Navigate 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.