Using Google Analytics with React

Using Google Analytics with React

How to set up analytics tracking in React.js with Google Analytics.

Overview

Google Analytics provides a great dashboard with plenty of insights and reports on customer use in our applications. This information can be critical for monitoring performance, measuring growth, geolocation of users, and even user acquisition insights! It is simply one of the best, free to use website analytics tools out there. It just so happens that it is also tremendously easy to integrate with React.

Real analytics data from one of my personal projects https://tournio.io.

Installation and Setup

To begin integrating Google Analytics with your react project, you’ll need to first install the react-ga package from npm.

npm i react-ga -S

The react-ga package is the official JavaScript module to connect Google Analytics with React.

Next, you simply need to import and initialize the module in your application.

In the above example, you will need to replace trackingId with your actual Google Analytics tracking id. To find your tracking id:

• Sign in to https://analytics.google.com
• Click Admin.
• Select an account from the menu in the ACCOUNT column.
• Select a property from the menu in the PROPERTY column.
• Under PROPERTY , click Tracking Info then Tracking Code .

Usage with Custom Events

It can be a very beneficial tool to be able to monitor how users are interacting with your application. For example, if you had a “Sign Up Now” button, you could measure how many times the button was clicked vs how many users actually signed up. In order to implement this, we will use the event feature.

The event would then be reported to Google and available for analytics within a few seconds.

Pageview Tracking

In my personal implementations, I will also use react-router which allows you to easily create a React app with full routing functionality. You can easily tie into page change events to track page views by also using the history package.

First, install the packages.

npm i history react-router-dom -S

Next, we simply need to connect our browser history instance to the router and our Google Analytics tracking.

That’s all there is to it! There are many more features that you can look into implementing with both react-ga and react-router . If you are interested in learning more about both of these packages, go ahead and check them out!

How To Structure Your TypeScript + React + Redux App

The guide to a simple, more declarative React + Redux App medium.com