Google Analytics with React and Typescript [June-2021]
Hello everyone, Lately I was looking for a solution of how to apply Google Analytics inside a React application using Hooks. So, I have decided to share with you. It’s really simple and fast.
Using Google Analytics with React may be easier than you could expect, because actually we can install React GA library, which is as a JavaScript module that can be used to include Google Analytics tracking code in a website or app that uses React for its front-end codebase. It does not currently use any React code internally, but has been written for use with a number of Mozilla Foundation websites that are using React, as a way to standardize our GA Instrumentation across projects.
So, let’s start!
Google Analytics configuration
At first, we need to get the tracking ID for our website by following these simple steps.
Go to Google Analytics webpage and signin to your google account. If it’s your first time doing that, you’ll asked to set up an account. Look to Administrator button at left-bottom side and click to open a new screen.
After that, we need to create a property. Google give us options to create UA, or GA4 or both properties. For our purpose, we have to select the Universal Analytics property option as image below.
Therefore, our trackingID is provided and we can start coding.
Installation
At first, we need to install React GA library, React Router Dom and @types/react-router-dom as below.
yarn add react-ga react-router-domyarn add --dev @types/react-router-dom
Creating useAnalytics Hook
After installing the libraries above, we need to connect the tracking id, provided by Google Analytics, to our React application. The easiest way is creating a hook called useAnalytics(), and initialize our React GA. It’s important to remember our ReactGA.initialize() function have to be executed once.
Creating Wrapper Component
Our goal is to capture pageviews and events happening during user experience. Thus, every time user visits a page, we need this value be saved at our analytics information. So, we may create a Wrapper component which involves all the routes and capture all the time the location url that user is visiting. Let’s see below!
Calling useAnalytics( ) and Wrapper at Routes component
As you can see below, I’ve created a Routes Component with 4 pages to test all the pageviews and were imported BrowserRouter, Switch and Route from react-router-dom. Furthermore, we are using useAnalytics( ) hook, with destructuring to get initialized value and pass as a prop to Wrapper component, which involves all the routes.
Testing-Page Views
Let’s execute our React app with the command below and see the results.
yarn start
Opening the browser at localhost:3000, a page appears with a title and a <ul> with all the pages. Each page has it’s own route defined in route’s file.
Now, when we execute our React application and go to Google Analytics page, real time menu, we can see that appears 1 user online and the active page is “/”, defined as main route in app.
Page 1
If we visit page 1, for example, we are able to see right now that active page changes to page1, almost in real time with a delay of 5s.
Creating custom events with React GA
Well, after all this configuration, let’s try something different. As you can see at Page 1 example, a button is being showed below title’s page. That’s why I decided to save events when user clicks on the button.
What we want now is save the action and create a category for it. Let’s see an example.
We are calling ReactGA.event() function passing some params that we want to save in our Analytics like category, action and label. Now, when user clicks on button, the event will be saved. Let’s see the example below!
Finally, when we visit event page inside real time section, the actions of the user appears. All the actions will be saved forever in reports.
Thank you, I hope it may help you!
