{

How to add google analytics to react app example?


This post talks about adding or setup google analytics in react application.

Google Analytics is a service from google to track pages, visitors, and session information of a website. It is free to use on any website.

First, Get tracking id from the google analytics site. The simple tracking id format is UA-000000-00.

React is a single-page application, There are multiple ways you can configure it.

  • without router
  • React-router history

Install react-go npm into application

react-ga is a google analytics module for javascript to integrate into websites or applications.

We can integrate into Angular or Vuejs or any other applications that use JavaScript.

install react-ga package into an existing application using npm command.

npm i --save react-ga

It updates the dependencies section with the following information in package.json

"dependencies": {
    "react-ga": "3.3",
  }

In index.js or the main component, Please add the following.

import ReactGA from 'react-ga';
ReactGA.initialize('UA-000000-00');

Tracking enabled by calling ReactGA.initialize method with options optional parameter. Syntax:

ReactGA.initialize(trackingid,OptionsObject);

A tracking Id is a unique id that you get from the Analytics website.

Options Object is a javascript object with key and values/objects

How to track page views?

to track page views, Need to send page name

ReactGA.pageview('about');

The same can be rewritten using useHook in react

 useEffect(() => {
    ReactGA.initialize('GA-000000-01');
    ReactGA.pageview(window.location.pathname);
  })

Adding google analytics to react-router

In bigger applications, If react-router is configured, you need to add the settings below

First, install react-router-dom into the application

 npm install --save react-router-dom history

once react-router-dom and history is installed, you can add history by listening to the pageview event with the below code

history. listen to fires whenever the router changes its path, This will track the page views from one path to another.

  const history = createBrowserHistory();

history.listen((location) => {
    ReactGA.initialize('GA-000000-01');
    ReactGA.set({ page: location.pathname });
    ReactGA.pageview(location.pathname)
  }
);

Once all the required changes, It will take a couple of hours to take effect in the google analytics tool.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.