How to Add Google Analytics to React App

Adding Google Analytics to your React application is one of the most effective ways to understand how users interact with your creation. This guide provides a clear path to integrating Google Analytics 4 with your React app so you can start tracking pageviews and custom events without the usual headaches.

Graphed

Still Building Reports Manually?

Watch how growth teams are getting answers in seconds — not days.

Watch the Demo

Why Traditional Analytics Setups Don't Work for React Apps

Before jumping into the code, it's important to understand why integrating analytics in a React app is different from a traditional, static website. React applications are often Single-Page Applications (SPAs). This means that after the initial page load, navigating between different "pages" or views doesn't trigger a full server roundtrip and page refresh. Instead, React creatively manipulates the DOM to give the illusion of changing pages.

Traditional Google Analytics tracking scripts are designed to execute once when a webpage loads. For a static site, this works perfectly - every new page a user visits triggers the script again, logging a pageview. In a React SPA, however, the script only runs once during the initial load. When a user navigates from your homepage to your "About" page, React changes the URL and the view, but the page itself doesn't technically reload. As a result, Google Analytics won't know that the user visited a new page unless you explicitly tell it.

Therefore, we need a special implementation that actively listens for route changes within our React app and sends pageview information to Google Analytics every time the URL changes.

Step 1: Setting Up Your GA4 Property and Measurement ID

You can't track data without a place for it to go. Your first step is to create a Google Analytics 4 property for your website. If you already have one, feel free to skip to the end of this section to find your Measurement ID.

Creating a New GA4 Property

1. Go to the Google Analytics website and sign in.
2. Navigate to the Admin section by clicking the gear icon in the bottom-left corner.
3. In the "Property" column, click Create Property.
4. Enter a descriptive name for your property (e.g., "My React App"), select your reporting time zone and currency, and click Next.
5. Provide some basic business information and click Create.

Creating a Web Data Stream

1. After creating your property, you'll be prompted to "Choose a platform." Select Web.
2. Enter your website's URL (make sure you select http or https) and give your stream a name (e.g., "My React App - Website").
3. Click Create stream.

Finding Your Measurement ID

Once your data stream is created, a "Web stream details" page will pop up. In the top right corner, you'll see a Measurement ID that looks like G-XXXXXXXXXX.

This ID is the critical link between your React app and your Google Analytics property. It tells the tracking code exactly where to send the data. Copy this ID and keep it handy, you'll need it in a moment.

Graphed

Still Building Reports Manually?

Watch how growth teams are getting answers in seconds — not days.

Watch the Demo

Step 2: The Best Way to Implement GA4 in React

You have a few ways to add Google's tracking code to your application, but for a component-based framework like React, using a dedicated library simplifies the process immensely. It abstracts away a lot of boilerplate code and provides easy-to-use methods for common analytics tasks.

For this tutorial, we will use react-ga4, a popular and well-maintained community library that makes GA4 integration straightforward.

First, install the package in your React project's root directory using your preferred package manager:

# Using npm
npm install react-ga4

# Or using yarn
yarn add react-ga4

Step 3: Initializing Google Analytics in Your App

Once the package is installed, you need to initialize it with your Measurement ID when your application first loads. The best place to do this is in your main entry file, which is typically index.js or App.js. You only want this initialization code to run once.

Import the library and call the initialize method, passing in your GA4 Measurement ID.

An even better practice is to store your Measurement ID in an environment variable to keep it out of your source code. In a Create React App project, you can create a .env file in your root folder and add the following:

REACT_APP_GA_MEASUREMENT_ID=G-XXXXXXXXXX

Remember to replace G-XXXXXXXXXX with your actual ID. Now, you can initialize GA4 in your App.js like this:

import React from 'react',
import ReactGA from 'react-ga4',
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom',

// ... other components
import Home from './components/Home',
import About from './components/About',
import Contact from './components/Contact',

// Initialize GA4
const GA_MEASUREMENT_ID = process.env.REACT_APP_GA_MEASUREMENT_ID,
if (GA_MEASUREMENT_ID) {
  ReactGA.initialize(GA_MEASUREMENT_ID),
}

function App() {
  return (
    <Router>
      {/* ... your navigation components ... */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  ),
}

export default App,

This sets up react-ga4, but it doesn't track any pageviews yet. Let's fix that.

Graphed

Still Building Reports Manually?

Watch how growth teams are getting answers in seconds — not days.

Watch the Demo

Step 4: Automatically Tracking Pageviews on Route Changes

This is the core challenge. We need to tell Google Analytics to log a pageview every time the user navigates. Using react-router-dom and a simple custom component, this becomes very manageable.

We'll create a component that uses the useLocation hook to detect URL changes and a useEffect hook to fire a pageview event anytime the location changes.

You can create a new file, say AnalyticsTracker.js, and add this code:

import { useEffect, useState } from 'react',
import { useLocation } from 'react-router-dom',
import ReactGA from 'react-ga4',

const AnalyticsTracker = () => {
  const location = useLocation(),
  const [initialized, setInitialized] = useState(false),

  // Initialize GA4 once on component mount
  useEffect(() => {
    const gaMeasurementId = process.env.REACT_APP_GA_MEASUREMENT_ID,
    if (gaMeasurementId) {
      ReactGA.initialize(gaMeasurementId),
      setInitialized(true),
    }
  }, []),

  // Track page views on route change
  useEffect(() => {
    if (initialized) {
      ReactGA.send({ hitType: "pageview", page: location.pathname + location.search }),
    }
  }, [initialized, location]),

  return null, // This component does not render anything
},

export default AnalyticsTracker,

Note: If you already initialized GA in App.js, you can remove that logic from this component. The logic is shown here to make the component self-contained.

Now, simply import this component and place it inside your Router component in App.js:

// In your App.js file
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom',
import AnalyticsTracker from './AnalyticsTracker', // Import the new component

function App() {
  return (
    <Router>
      <AnalyticsTracker /> {/* <-- Add it here */}
      {/* ... your navigation and Routes */}
    </Router>
  ),
}

export default App,

That’s it! With this component in place, every time a user navigates to a new route in your application, useLocation will pick up the change, and the useEffect hook will fire ReactGA.send(), sending a new pageview to your Google Analytics property.

Graphed

Still Building Reports Manually?

Watch how growth teams are getting answers in seconds — not days.

Watch the Demo

Step 5: Tracking Custom Events

Pageviews are just one part of the picture. True insight comes from tracking specific user interactions, like button clicks, form submissions, or newsletter signups. These are called "events."

The react-ga4 library makes this easy with the ReactGA.event() method. Let's say you have a newsletter signup button. You can track every time a user clicks it.

Imagine you have a NewsletterSignup component:

import React from 'react',
import ReactGA from 'react-ga4',

const NewsletterSignup = () => {
  const handleSignupClick = () => {
    // Logic for submitting the form...
    console.log("Newsletter signup processing."),

    // Send a custom event to Google Analytics
    ReactGA.event({
      category: "User Actions",
      action: "Clicked Newsletter Signup",
      label: "Footer Signup Button", // optional
    }),
  },

  return (
    <div>
      <h3>Subscribe to our Newsletter</h3>
      {/* ... form fields for email ... */}
      <button onClick={handleSignupClick}>Subscribe</button>
    </div>
  ),
},

export default NewsletterSignup,

In this example, whenever a user clicks the "Subscribe" button, the handleSignupClick function executes. In addition to handling the form submission, it also calls ReactGA.event(). We've provided:

• category: A broad grouping for the event (e.g., 'User Actions', 'Engagement').
• action: A description of the specific interaction (e.g., 'Clicked Button', 'Submitted Form').
• label: An optional field for more specific context (e.g., which button was clicked).

This sends detailed interaction data directly to your GA4 property, allowing you to build reports around the specific actions that matter most to your business goals.

Step 6: Verifying Your Setup

Once you've implemented the tracking code, you need to confirm it's working. The easiest way to see your data is through GA4's Realtime report.

1. Go to your Google Analytics dashboard.
2. On the left navigation pane, go to Reports > Realtime.
3. Open your React application in a new browser tab and navigate through a few pages.
4. Within a minute, you should see your activity appear on the Realtime report. You can see your location and the specific pages you are visiting. If you trigger a custom event, like clicking the newsletter button, you'll see it appear in the "Event count by Event name" card.

For more detailed debugging, you can use the official Google Analytics Debugger Chrome extension. Install it, turn it on for your site, and open your browser's developer console. As you navigate and interact, you will see detailed information about every analytics hit being sent.

Final Thoughts

Integrating Google Analytics into a React application may seem complex, but by using a library like react-ga4, you can automate pageview tracking and easily add custom event tracking. This setup ensures you capture the valuable user data needed to make informed decisions and grow your application.

With all this rich data now flowing into Google Analytics, the next step is making sense of it all. Instead of getting stuck building reports and dashboards manually, we created Graphed to do the heavy lifting for you. We connect to your GA account and let you build real-time dashboards and get answers just by asking questions in plain English, helping you move from raw data to actionable insights in seconds.