How to track a custom Google Analytics event in ReactJS or GatsbyJS

Oscar de la Hera Gomez
A flower that represents Google Analytics with UA and 4 underneath it. Beneath the symbols sits the text "Track Custom Events".

A step by step tutorial on tracking custom Google Analytics events for UA and GA4 trackers in ReactJS or GatsbyJS.

Step One: Add the dependencies

A screenshot of terminal showing you how to add dependencies.

In terminal, set your project folder as the current directory and add the following dependencies.

react-ga for UA trackers

yarn add react-ga

react-ga4 for GA4 trackers

yarn add react-ga4

Step Two: Create the functionality

A screenshot of VSCode showing the functionality that we created for the Google Analytics to work.

Add the following functionality to your project.

We recommend adding it to the utils folder, under a google-analytics subfolder.

For more information about the potential that is offered by these libraries please visit the respective links below.

Step Three: Create the structure for the events and actions

A screenshot of VSCode showing you how we structured our custom events.

This step is optional but highly recommended as it helps manage the codebase.

Create a folder within utils/google-anayltics called Events.

Within this folder create a subfolder for every event type that you are seeking to track.

Our example demonstrates a category and an action, without a label, as the label for our form is the pathname for wherever the form is found. We recommend adding labels that are used across the system to this folder within utilities to ease managing and updating events.

Step Four: Initialize Google Analytics

A screenshot of VSCode showing how we initialized Google Analytics using the UseEffects react hook - so that it initializes on page loads. Please note the example shows the home page but we applied it to all pages within our website.

At the root of your application, initialize the Google Analytics tracker by importing the function you created in step 2.

We recommend using the useEffect react hook to initialize Google Analytics on page load, on all pages of your application.

Step Five: Track Events

A screenshot of VSCode showing how we implemented the tracking of a custom event.

In your application, import the tracking functionality that you created in step 2 and the events created in step 3 and track your events.

Step Six: Verify

A screenshot of Google Analytics (UA) with the custom event showing in real time.

Navigate to Google Analytics and confirm that the events are being tracked.

Please note that in the event that you have filtered yourself out of your data, you will have to navigate to the Unfiltered View (Raw Data) to see your events for your UA tracker.

A screenshot of Google Analytics 4 Realtime Events dashboard with a highlight on the event we created.

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to with any thoughts or feedback you may have.

delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details