Google Analytics is a web analytics platform provided by none other than Google. Not just It help you track the website traffic, but it also helps you generate meaningful website traffic reports.

In this quick tutorial, we will show you how to set up Google Analytics in React application. To add Google Analytics in React, we will use the React Google Analytics package.

The React GA is a JavaScript-based module best used to configure Google Analytics tracking code in React single-page applications.

Not just that, it also provides eloquent methods that allow you to add several types of tags and common key-value tags to Analytics.

React Google Analytics Integration Example

  • Step 1: Install React App
  • Step 2: Install React GA Package
  • Step 3: Set Up Google Analytics
  • Step 4: Run React App

Install React App

In order to add the analtyics code into the React app, ensure that you have an application created on your development machine.

Here is the command that you may use to generate the new react app.

                npx create-react-app react-app

After the app is manifested on your system, directly get into the app.

                cd react-app

Install React GA Package<

In this step, you require to add the react-ga package to your application.

For that, you have to execute either of the commands through the console.

                                  # npm                  npm                  install                  react-ga                  # bower                  bower                  install                  react-ga

Set Up Google Analytics

In this example, we will initialize the GA and page views tracking hence import the ReactGA module from the 'react-ga' package.

Also, add your analytics code into the ReactGA.initialize() method.

Add code in src/App.js file.

                                  import                  {                  Component                  }                  from                  "react"                  ;                  import                  "./App.css"                  ;                  import                  ReactGA                  from                  'react-ga'                  ;                  class                  App                  extends                  Component                  {                  invokeGA                  =                  (                  )                  =>                  {                  ReactGA.                  initialize                  (                  'UA-XXXXXX-0X'                  )                  ;                  ReactGA.                  pageview                  (                  'Page view in React!'                  )                  ;                  }                  ;                  componentDidMount                  (                  )                  {                  this                  .                  invokeGA                  (                  )                  ;                  }                  render                  (                  )                  {                  return                  (                  <div className=                  "App"                  >                  <h2>React                  GA                  Example<                  /h2>                  <                  /div>                  )                  ;                  }                  }                  export                  default                  App;

This is a simple example of adding GA; however, you may also add more features using the diffrent values, here you can find all the properties of React GA.

Run React App

At last make sure to start the react app, you have to run the following command.

                                  npm                  start

How to Incorporate and Setup Google Analytics in React Js

Summary

Now, you must be fully aware of the process and know how to integrate Google Analytics in React. We have persuaded, step by step, to uncover every information that will help you deal with Google Analytics in React.

So, that's all we have for you.