Track events in React with Google Analytics

Today we’ll show you how to track events in React with Google Analytics. In the previous article, we have explained about the integration of the Google Analytics in React application.

Here, we will go one step further than Google Analytics integration. We will track the user behaviors with the help of the events in React app.

Demo Application

Output - Track events in React with Google Analytics - Clue Mediator
Output – Track events in React with Google Analytics – Clue Mediator

Steps to track events in React with Google Analytics

  1. Integrate Google Analytics
  2. Update page to handle the events
  3. Track events
  4. Output

1. Integrate Google Analytics

In the first step, we will have a startup react application using the create-react-app and integrate Google Analytics with the help of the react-ga package. We will recommend you to check the following article for integration.

How to add Google Analytics to the React App

Hope you understand the integration and now we will slightly update the same example to track the user activity.

2. Update page to handle the events

In the second step, we will simply update the home page named App.js to track events. For that, we will add two different buttons and handle the click events.

App.js

3. Track events

So far, we have integrated Google Analytics and updated the design to track events. Now, we have to call the event method from the button click. Check the following code.

App.js

The following arguments are used to manage the events.

  • category – Name of the category to group the events.
  • action – A description of the behaviour.
  • label – Details description related to the action.
  • value – Pass the integer value against the event.

Click here to find more information about the event’s arguments.

4. Output

Run the react application and check the output.

That’s it for today.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

GitHub Repository StackBlitz Project

If you found value in this article,
you can support us by buying me a coffee! ☕

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *