Track GA4 Events and Pageviews in React with a Simple Hook

Google Analytics 4 (GA4) is powerful, but integrating it into a React app cleanly requires a bit of abstraction. Instead of scattering sendGAEvent calls throughout components, you can centralize everything with a custom hook and enums — making your code more consistent and maintainable.

This guide shows how to use a reusable useSendGA hook to track page views and interactions in GA4.

---

1. Get Your GA4 Measurement ID

Before you write any code, you need a GA4 Measurement ID — this is the code that starts with G-.

• Go to Google Analytics
• In the left menu, click Admin
• Under the Property column, click Data Streams
• Select or create a Web stream
• Copy the Measurement ID, e.g., G-XXXXXXX

2. Setup send event to GA

Step 1: Install react-ga4 🔧

bash
npm install react-ga4
# or
yarn add react-ga4

Step 2: Initialize Google Analytics 📂

In your index.tsx or App.tsx, initialize GA4 using your Measurement ID:

ts
import ReactGA from "react-ga4";
// Replace with your actual Measurement ID
// You can use environment variable for safe
ReactGA.initialize("G-XXXXXXX");

Step 3: Create the useSendGA Hook 🚀

ts
// src/hooks/useSendGA.ts
import { GA_ACTION, GA_CATEGORY } from "@/enums";
import { useEffect } from "react";
import ReactGA from "react-ga4";

function useSendGA(payload: {
  action: GA_ACTION;
  category: GA_CATEGORY;
  label: string;
}) {
  const { action, category, label } = payload;

  const sendGAEvent = (
    action: GA_ACTION,
    category: GA_CATEGORY,
    label: string
  ) => {
    ReactGA.event({
      category: category,
      action: action,
      label: label,
    });
  };

  const onClickSendEvent = () => {
    if (action === GA_ACTION.CLICK) {
      sendGAEvent(action, category, label);
    }
  };

  useEffect(() => {
    if (action === GA_ACTION.ACCESS) {
      sendGAEvent(action, category, label);
    }
  }, []);

  return { onClickSendEvent };
}

export default useSendGA;

Step 4: Define Enums for Consistent Events 📦

ts
// src/enums.ts
export enum GA_ACTION {
  ACCESS = "Access",
  CLICK = "Click",
}

export enum GA_CATEGORY {
  HOMEPAGE = "Home Page",
  SIGN_UP = "Sign Up",
  BUTTON = "Button",
}

Step 5: Using the Hook in Components 🧠

tsx
import useSendGA from "@/hooks/useSendGA";
import { GA_ACTION, GA_CATEGORY } from "@/enums";

function SignupButton() {
  const { onClickSendEvent } = useSendGA({
    action: GA_ACTION.CLICK,
    category: GA_CATEGORY.SIGNUP,
    label: "Signup Button - Hero Section",
  });

  return <button onClick={onClickSendEvent}>Sign Up</button>;
}

tsx
function Homepage() {
  useSendGA({
    action: GA_ACTION.ACCESS,
    category: GA_CATEGORY.HOMEPAGE,
    label: "Homepage Loaded",
  });

  return <div>Welcome to the Homepage</div>;
}

3. Set Up Custom Dimensions in GA4

Step 1: Setup custom dimensions 🔧

• Go to Admin → Custom Definitions → Create Custom Dimensions
• Add:
  • event_category → name: Category, scope: Event
  • event_label → name: Label, scope: Event

📌 Note: After setup, GA4 will start collecting these parameters. It may take 12–24 hours for data to appear.

Step 2: Build a Dashboard to Explore Events 📊

• Go to Explore → Blank Exploration
• Add dimensions: Category, Label, Event name
• Add metric: Event count
• Pick a visualization (table, bar chart, etc.) to view your data

📌 Note: After setup, GA4 will start collecting these parameters. It may take 12–24 hours for data to appear.

4. Conclusion

With a simple useSendGA hook and structured enums, you can track GA4 events in React efficiently and consistently. This approach keeps your analytics logic clean — while giving you clear insights into user behavior.