How to Add Google Analytics to React Application?

If you want to add google analytics to your application then you are in right place. In this tutorial guide, I will show you how you can setup google analytics in react app and track the insight of your web application.

ReactJS is a JavaScript library for building the frontend UI of web applications. It is based on components and you can create components of each block section.

React is a SPA (Single Page Application) library, which means that all UI load only one time and change the component based on the action. So in this case you have to implement the google analytics in react application with sending each pageview, even it’s not loading the full page.

Google Analytics is an analytics tool, which you can use to track web insight. You can track the user’s information when they visit your websites or applications. It tracks how much users visit, where users come from, how much time they stay, pageview, etc.

So you just have the account in google analytics and create the Universal Analytics (UA) property. The property will give you a tracking ID that we will use to add google analytics to our react application.

So let’s get started. First, we will create a new account in google analytics.

Create Google Analytics Account

So first we will create a new account in google analytics and then a property to get the tracking ID.

• Go to Google Analytics Account page.
• Enter Account name, make sure it unique.
• Next, now enter the Property name which should also be unique. Also select the Time Zone and Currency.
• Next step is advanced options, so click on it and select the Universal Analytics property. Then you will see Website URL input box, so enter your website address and click on the Next button.
• In the last step, add your Business information then click on the Create button and Accept the terms of service.
• Now select the Property from dropdown and click on the Tracking Info. Click on the Tracking code and you will see your tracking ID like this format UA-21XXXXXX-X.

Setup Google Analytics to React Application

So now we have Google Analytics tracking ID and we can use it to track the web flow of a website or application.

First, we will install the react-ga package to implement google analytics in react app. Then we will import this package into the root component of an application and initialize it. We will see the following step-by-step guide.

Install react-ga Package

Install react-ga package from NPM. You can install it using the following commands of npm and yarn. We will use npm to install it.

npm install react-ga

OR

yarn add react-ga

Setup Analytics Inside React Application

After successfully installed, now we will add google analytics into react application.

To setup the google analytics in react application, you can use the index.js or App.js file to initialize the react-ga package.

So open your index.js or App.js file and add the following code in the file.

import ReactGA from 'react-ga';
const TRACKING_ID = "UA-XXXXXXXX-X";
ReactGA.initialize(TRACKING_ID);

The above code will initialize the google analytics for your application and start tracking the user’s information and web insight.

WAIT…

Only the above code is not enough for Single Page Application (SPA) as we are building react application. Because it’s difficult to track in a single page application which pages are visiting more users.

Because as we discussed above react is a single page application framework and it renders the UI element only one time until we refresh the page again. And all other pages render using components without loading the full page.

Integration With React Router

To make it proper work with react application, we will integrate google analytics with react-router. React router is the most common and widely used in react applications to track the history of URL.

See Also: How to Install React-Router and Use It?

So we will get the URL of the application with the help of the react-router package and then send it to google analytics to record the data.

Create a new component GARoutesTracker and add the following code in this component file.

import React from 'react';
import { withRouter } from 'react-router-dom';
import ReactGA from 'react-ga';

const GARoutesTracker = ({ history }) => {

    history.listen((location, action) => {
        ReactGA.set({ page: location.pathname });
        ReactGA.pageview(location.pathname);
    });

    return <div></div>;
};

export default withRouter(GARoutesTracker);

Now add this GARoutesTracker component in index.js or App.js file (root component of application).

import GARoutesTracker from './GARoutesTracker';

export const App = () => {  
    
    return <div>
            <garoutestracker></garoutestracker>
        </div>

}

Now it’s all setup done and you are ready to get the user’s information and see the web insight into how users interact with your application.

Other react-ga API Configurations

Custom Dimension

ReactGA.set({ 
    dimension14: 'Sports' 
});

ReactGA.modalview

ReactGA.modalview('/about/contact-us');

ReactGA.event

ReactGA.event({
    category: 'Editing',
    action: 'Deleted Component',
    label: 'Game Widget'
});

ReactGA.timing

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

There are more API configurations to workaround with the react-ga package. You can check on the GitHub page.

Conclusion

So in this tutorial, you learned how to add google analytics to react application and get the user’s information for business purposes.

Simply created a new property in google analytics to get the tracking ID that used with react-ga react dependencies and initialize the google analytics.

If any questions please let me know in the comment section, I’ll help you with that.