How to Integrate Google Analytics Tracking Code in React Js

Google Analytics is a free tool provided by Google; when it comes to marketing, this tool does many things if you want to get reports about your website traffic, audience geo, user behavior, etc.

Then this is the tool you must add to your web application, Today in this quick yet profound tutorial. We will learn how to set up Google Analytics in React web applications.

To integrate GA in the React app, we will use the React GA package. Furthermore, we will also logically enumerate all the processes essential to set up Google analytics in React.

The react ga is a JavaScript module that is essentially used to integrate Google Analytics tracking code in a react website. This plugin is designed to operate with the freshest version of Google Analytics, Universal Analytics.

React Js Google Analytics Tracking Code Example

• Step 1: Create React Project
• Step 2: Add React GA Library
• Step 3: Insert Analytics Code
• Step 4: Start Application

Create React Project

In this step, you will use the provided command to create a new React project.

So, get into the command line tool of your code editor, type and evoke the given command.

npx create-react-app react-ga-demo

After the app is ready, make sure to enter into the project.

cd react-ga-demo

There after use the given command to open the project in code editor.

code .

Add React GA Library

Further, type the given command on the command line tool and execute this command.

Following command will install react ga library in your react project.

# npm
npm install react-ga

# bower
bower install react-ga

Insert Analytics Code

Next, you have to import the ReactGA module into the App js file, this module give you access to ReactGA methods that will help you initialize the GA.

Now, you have to add the Google Analytics tracking code into the initialize() functions.

Open and update the src/App.js file.

import { Component } from "react";
import "./App.css";
import ReactGA from 'react-ga';

class App extends Component {
  setGA = () => {
    ReactGA.initialize('UA-xxxxxx-xx');
    ReactGA.pageview('Init page view');
  };
  componentDidMount(){
    this.setGA();
  }
  render() {
    return (
      <div className="App">
        <h2>React Google Analytics Example</h2>
      </div>
    );
  }
}
export default App;

Here are the properties and options that you may use, and they will help you extend the feature of react ga.

Start Application

Again get on to the command line screen on your code editor, type the command that will start the react app.

npm start

Conclusion

We have learned how to set up Google Analytics in React app using the third-party package. We reckon this guide will help you insert the analytics tracking code.