How to Integrate Google Analytics Tracking Code in React Js

Last updated on: 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.

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