React Tutorial- How To Integrate Google Analytics Tracking Code Example

Integrate Google Analytics Tracking Code In React Js

Friends, today in this tutorial, we will learn how to integrate Google Analytics Tracking Code in a React app. Google Analytics is a free tool that is offered by Google. As far as getting reports about our websites, this tool is quite helpful in informing about the website traffic, audience geo and user behavior along with many other things.


Hence, it would definitely prove beneficial if you add this tool to your React app. So, let’s learn the step-by-step implementation of Google Analytics in this quick guide.

We will have to use Google Analytics (GA) package for integrating GA in our React apps.


Some of us already know that React GA is a Javascript module that is used to integrate GA tracking code in the React website. This plugin is designed to operate with the latest version of Google Analytics, Universal Analytics.


How To Integrate Google Analytics Tracking Code In React JS Example

Step 1- Create New React Project

Step 2- Add React GA Library

Step 3- Insert Analytics Code

Step 4- Start The App


Let’s learn in detail now:


 Step 1- Create New React Project

In this step, we will simply download the new React project for which we need to use the following command:

npx create-react-app react-ga-demo

Now, we require to enter into the project:

cd react-ga-demo


Afterward, we have to use the below-given command to open the project in the code editor:

code .


Step 2- Add React Google Analytics Library

Now, we need to type the following command on the command line tool and implement this command.

This command will install React GA library in our React project:

# npm
npm install react-ga

# bower
bower install react-ga


Step 3- Insert Analytics Code

In this third step, we have to import the ReactGA module into the App js file. This module would give access to reactGA methods that will help in initializing the GA.

After this, we will add the Google Analytics tracking code into the initialize() functions.

Then, we have to 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.pageview('Init page view');


  render() {
    return (
      <div className="App">
        <h2>React Google Analytics Example</h2>

export default App;


following are the properties and options that we can use that will help us extend the feature of reactga.


Value                                                                                                    Notes

gaTrackingID String.Required GA Tracking ID like{” “}


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 sent to the default tracker.

options.testMode Boolean. Optional. Defaults to false.


test mode. See{” “}


here{” “} for more information

options.standardImplementation Boolean. Optional. Defaults to false.


loading GA as google expects it. See{” “}

here{” “} for more information.

options.useExisitngGa Boolean. Optional. Skips call to,

assuming you have manually run it.

options.redactEmail Boolean. Optional. Defaults to true.


redacting an email as the string that in “Event Category” and “Event Action”.


Step 4- Start The Application

Now, we have to get on to the command line screen on our code editor where we would type the command that will start the React app:

npm start



Hope that you have found this tutorial of setting up the Google Analytics In the React App using the third-party package quite simple and easy.



Leave a Reply

Your email address will not be published. Required fields are marked *