How to add Google Analytics to the React App

Today we’ll show you how to add Google Analytics to the React App.

It’s very easy to integrate google analytics in the multi page application whereas in the single page application, we need to configure it with the routing.

Here, we will use the npm package to track the user behaviour. You will get the following output after adding the GA in the React application.

Demo Application

Output - How to add Google Analytics to the React App - Clue Mediator

Steps to add Google Analytics to the React App

1. Create a react application
2. Add routing
3. Install npm dependency
4. Integrate Google Analytics
5. Output

1. Create a react application

First of all, let’s create a react application using the `create-react-app` npm package. Run the following command to create the app.

npx create-react-app google-analytics-react

2. Add routing

We need to add the routing in the react application. We will recommend you to check the following article.

Routing in React JS

You may also like to check the React Router v6.

What’s new in React Router v6

After integrating the routing in React, You will find the `index.js` file as looks like below.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom'
import App from './App';
import About from './About';
import Contact from './Contact';

const routing = (
  <browserrouter>
    <div>
      <h3>Clue Mediator</h3>
      <ul>
        <li>
          <link to="/">Home
        </li>
        <li>
          <link to="/about">About
        </li>
        <li>
          <link to="/contact">Contact
        </li>
      </ul>
      <switch>
        <route exact="" path="/" component={App}>
        <route path="/about" component={About}>
        <route path="/contact" component={Contact}>
      </route></route></route></switch>
    </div>
  </browserrouter>
)

ReactDOM.render(routing, document.getElementById('root'));

Let’s try to split this file into two parts as below.

RoutingComponent.js

import React from 'react';
import { Switch, Route, Link } from 'react-router-dom';

import App from './App';
import About from './About';
import Contact from './Contact';

const RoutingComponent = () => {
  return <div>
    <ul>
      <li>
        <link to="/">Home
      </li>
      <li>
        <link to="/about">About
      </li>
      <li>
        <link to="/contact">Contact
      </li>
    </ul>
    <switch>
      <route exact="" path="/" component={App}>
      <route path="/about" component={About}>
      <route path="/contact" component={Contact}>
    </route></route></route></switch>
  </div>
}

export default RoutingComponent;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { BrowserRouter } from 'react-router-dom';

import RoutingComponent from './RoutingComponent';

ReactDOM.render(<browserrouter>
  <h3>Add Google Analytics to React App - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3>
  <routingcomponent>
</routingcomponent></browserrouter>, document.getElementById('root'));

3. Install npm dependency

As we discussed, we will use the react-ga npm package to add Google Analytics in the React Application.

Run the following command to install the package.

npm i react-ga

4. Integrate Google Analytics

Now, we will integrate Google Analytics in the React component. For that, we have to use the `withRouter` HOC for the `RoutingComponent.js` component. Check out the following code.

RoutingComponent.js

import React from 'react';
import { Switch, Route, Link, withRouter } from 'react-router-dom';

import ReactGA from 'react-ga';

...
...

const RoutingComponent = () => {

  useEffect(() => {
    ReactGA.pageview(window.location.pathname + window.location.search);
  });

  return <div>
    ...
    ...
  </div>
}

export default withRouter(RoutingComponent);

Let’s initialize Google Analytics from the root file.

index.js

// add google analytics
import ReactGA from 'react-ga';
ReactGA.initialize('<tracking_id>');

...
...

ReactDOM.render(<browserrouter>
  <h3>Add Google Analytics to React App - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3>
  <routingcomponent>
</routingcomponent></browserrouter>, document.getElementById('root'));
</tracking_id>

Don’t forget to update the value of the `<TRACKING_ID>` in the above code that you will find it from here.

5. Output

Run the react application and check the output.

I hope you find this article is helpful.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

GitHub Repository StackBlitz Project