How to Integrate Google Analytics Tracking Code in React Js

Last updated on: December 28, 2021 by Digamber

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.

Value	Notes
gaTrackingID	`String`. Required. GA Tracking ID like{” “} `UA-000000-01`.
options.debug	`Boolean`. Optional. If set to `true`, will output additional feedback to the console.
options.titleCase	`Boolean`. Optional. Defaults to `true`. If set to{” “} `false`, strings will not be converted to title case before sending to GA.
options.gaOptions	`Object`. Optional.{” “} GA configurable create only fields.
options.gaAddress	`String`. Optional. If you are self-hosting your{” “} `analytics.js`, you can specify the URL for it here.
options.alwaysSendToDefaultTracker	`Boolean`. Optional. Defaults to `true`. If set to{” “} `false` and using multiple trackers, the event will not be send to the default tracker.
options.testMode	`Boolean`. Optional. Defaults to `false`. Enables test mode. See{” “} here {” “} for more information.
options.standardImplementation	`Boolean`. Optional. Defaults to `false`. Enables loading GA as google expects it. See{” “} here {” “} for more information.
options.useExistingGa	`Boolean`. Optional. Skips call to `window.ga()`, assuming you have manually run it.
options.redactEmail	`Boolean`. Optional. Defaults to `true`. Enables redacting a email as the string that in “Event Category” and “Event Action”.

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

How to Integrate Google Analytics Tracking Code in React Js

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.

Digamber

I am Digamber, a full-stack developer and fitness enthusiast. I crafted this site to bestow my coding experience and love to write on JavaScript, React, Angular, Vue, Laravel.