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

 

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{” “} 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 sent 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.useExisitngGa	Boolean. Optional. Skips call to window.ga(), assuming you have manually run it.
options.redactEmail	Boolean. Optional. Defaults to true. Enables 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

 

Conclusion

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.

 

Thanks