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.
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.