Want to track user interactions—like a "Sign Out" button click—in your React app without hardcoding analytics?

Google Tag Manager (GTM) makes it seamless to manage tracking and send custom events to Google Analytics 4 (GA4)—all without constantly editing your codebase.

In this tutorial, you’ll learn how to create and track a custom event from a React.js app using GTM, in just a few easy steps.

Why Use Google Tag Manager for Event Tracking?

If you're a React developer or digital marketer, GTM helps you:

Track clicks without editing code every time
Separate dev and marketing concerns
Preview/debug before going live
Send events to GA4, Ads, Facebook Pixel, and more

Project Setup

We're working in a typical React.js app. The goal is to track when a user clicks the "Sign Out" button and send that event to Google Analytics via GTM.

Create a GTM Utility in React

Start by installing and setting up the react-gtm-module or create your own GTM utility function like this:

// utils/tagManager.ts
export const GTMEvent = ({ event, category, action, label }) => {
  if (window && window.dataLayer) {
    window.dataLayer.push({
      event,
      category,
      action,
      label,
    });
  }
};

Trigger the GTM Event on Button Click

Use the utility in your React component:

import { GTMEvent } from './utils/tagManager';

<button
  onClick={() =>
    GTMEvent({
      event: 'button_click',
      category: 'User Interaction',
      action: 'Sign Out Button Clicked',
      label: 'Logout Button'
    })
  }
>
  Sign Out
</button>

Create a Custom Trigger in GTM

In your Google Tag Manager workspace:

Go to Triggers → New
Choose Custom Event
Name: button_click
Condition: All Custom Events
Save the trigger

Create a GA4 Event Tag in GTM

Next, set up a tag that sends the event to GA4:

Go to Tags → New
Choose GA4 Event
Add your GA4 Measurement ID
Event Name: sign_out_button_clicked
Trigger: Select the button_click trigger you created
Save and Submit the changes

Preview and Test Your Setup

Use Tag Assistant (Preview mode) in GTM:

Click the Sign Out button on your site
Verify that the custom event fires
Go to Google Analytics 4 → Real-Time → Events

Confirm that the event appears in the GA4 dashboard

You’ve now successfully:

Created a custom GTM event in React
Set up a custom trigger and tag in Google Tag Manager
Verified the event in Google Analytics 4

With this setup, you can replicate tracking for Login, Register, CTA clicks, scrolls, downloads, and more!

📌 Need help with GTM, Facebook Pixel, or Server-Side Tagging?

Check out Guru Labs — where we help you set up clean, reliable analytics infrastructure for your business.

Tracking Custom Events in React with Google Tag Manager (GTM) and GA4

#GTM Tutorial

#Google Tag Manager