How to Use Google Analytics on ReactJS in 5 Minutes

I’m sharing this guide on how to use Google Analytics with Universal Analytics property on ReactJS. A bit of introduction related with two products that we’re going to talk about:

ReactJS is an SPA (Single Page Application) Javascript Library for building and maintaining user interfaces which means the application will dynamically write current page based on new data from server or local state, instead of the default method of the browser loading entire new pages like in multi-page application.

Google Analytics (GA) is an analytics tool from Google where you could easily track important user information when they are visiting your website. As of Q4 2020, Google introduced new Google Analytics 4 (GA4) property with more advanced tracking capabilities and better dashboard. For this article, we’re specifically exploring Universal Analytics (UA) property which is an older version of Google Analytics.

Google Analytics 4 Property

Universal Analytics Property

Preparation

First, you need to obtain the tracking ID for your website by following these simple steps.

1. Go to Google Analytics website and if you’re first time user, you’ll asked to set up an account including your data sharing settings.
2. Create a new property — remember to select the Universal Analytics property option. You have the options to create UA, or GA4 or both properties.
3. Fill up the remaining information for setting up your account and properties; and then you’ll get the tracking ID (e.g. UA-123456789–1).

Don’t forget to select on Universal Analytics property

Installation

When I’m using UA property on Google Analytics and ReactJS, I’m most comfortable using React-GA library. As of this article was written out, it has more than 450K weekly download on NPM. You can easily install it by running this code on your ReactJS application.

# npm
npm i -s react-ga
# yarn
yarn add react-ga

At the first root of your application, you just need initialize it with your GA tracking ID. For more complex marketing campaign, companies usually have more than one tracking ID for one website. You can use multiple trackers on this library too.

Implementation

There are two simple implementation of GA that you can use on your website.

Page views Tracking — you can track your user journey when they’re visiting your website to understand more on certain goal funnel by simply using this line of code on componentDidMount of each page you want to track.

ReactGA.pageview(window.location.pathname);

Quick Tips: for dynamic page view tracking, you can implement it on your routing component using HOC.

Events Tracking — you can track important events on your website that is inline with your campaign goals e.g. successful checkout, social sharing, clicking on certain button, etc.

How do you know that you’ve implemented Google Analytics correctly on your ReactJS application?

Simple ! You just need to open your ReactJS application or run it locally and open the Overview tab of Realtime report on the GA dashboard. You’ll see that you’ve one current active visitor on your website which is YOU !

…and Voilà !

That’s it ! You’ve been successfully enables GA to track page views visited by your user and important events that you want to track on your ReactJS application.

If you’re interested to learn more about Google Analytics, I would suggest to learn it from the following source:

Google Analytics Academy: Google Analytics for Beginners

Google Analytics Academy: Advanced Google Analytics

Google Analytics Academy: Google Analytics for Power Users

Hopefully this short article will able to answer some of your questions or peak your interest in learning to implement analytics on your website. Thank you for reading my article !