Connect Google Analytics to Your React App Using Google Tag Manager

Whether you're launching a startup or maintaining a portfolio, understanding how users interact with your React application is crucial. The best way to track user behavior is through Google Analytics (GA), and the cleanest way to integrate it—especially in modern frontend frameworks—is by using Google Tag Manager (GTM).

In this blog, I’ll walk you through the step-by-step process of connecting Google Analytics to any React project via GTM. We'll follow the most efficient and scalable method I personally used, while also touching on other available options.

Step 1: Create a Google Tag Manager Account and Container

1. Go to Google Tag Manager.
2. Sign in using your Google account.
3. Create a new account:
   • Click on Create Account.
   • Enter an Account Name (e.g., your website or business name).
   • Select your Country.
   • Optionally, configure data sharing settings.
4. Create a container:
   • Enter a Container Name (e.g., your site URL).
   • Select Web as the target platform and click the Create button.
5. Accept the Google Tag Manager Terms of Service to proceed.
6. Once the container is created, you’ll be shown installation instructions:
   • Option 1: Add the provided script tags:
     • Place the first snippet in the headsection of your HTML.
     • Place the second snippet right after the opening bodytag.
   • Option 2: Use the GTM-XXXXXXX Container ID in SDK-based setups (e.g., React).

Step 2: Install and Set Up GTM in Your React Project

The cleanest way to integrate GTM into a React project is by using the react-gtm-module package.

1npm install react-gtm-module

1import React from 'react';
2import ReactDOM from 'react-dom/client';
3import App from './App';
4import TagManager from 'react-gtm-module';
5
6const tagManagerArgs = {
7  gtmId: 'GTM-XXXXXXX', // Replace with your actual container ID
8};
9
10TagManager.initialize(tagManagerArgs);
11
12ReactDOM.createRoot(document.getElementById('root')).render(
13  <React.StrictMode>
14    <App />
15  </React.StrictMode>
16);

That’s it! GTM is now loaded in your app and ready to manage tags—including your GA tag.

Step 3: Create a Google Analytics Property (GA4)

1. Head over to Google Analytics .
2. Sign in using your Google account.
3. Create an account (or select an existing one):
   • Click Start measuring on the welcome screen.
   • Enter an Account Name (e.g., your business or website name).
   • Configure account settings:
     • Enable or disable data sharing options (e.g., Google products, benchmarking, technical support).
   • Click Next to proceed.

   If you've already created an account, simply select it and move on to creating a new GA4 property.

4. Create a new GA4 property:
   • Enter a Property Name.
   • Select your Reporting Time Zone and Currency.
   • Click Next.
5. Provide business details:
   • Select your Industry Category and Business Size.
   • Click Next.
6. Choose your business objectives:
   • Select relevant goals (e.g., Generate leads, Measure engagement).
   • Click Create.
7. Accept the Terms of Service Agreement if prompted.
8. Choose your platform for data collection:
   • Select Web, Android app, or iOS app.
9. If you selected Web:
   • Enter your Website URL and Stream Name.
   • Configure Enhanced Measurement options (e.g., scroll tracking, outbound clicks).
   • Click Create Stream.
10. After the stream is created, your Measurement ID (e.g., G-XXXXXXX) will be shown.

This Measurement ID is required when configuring Google Tag Manager or direct GA4 integrations.

Step 4: Link Google Analytics with GTM

Now that both GTM and GA4 are set up, it's time to link them together.

Inside Google Tag Manager:

1. Open your GTM container.
2. Navigate to the Tags tab and click New.

1. Under Tag Configuration, select Google Analytics and then Google Tag.

1. Paste your Measurement ID from GA4.

1. Under Triggering, choose All Pages.

1. Click Save to create the tag.

Step 5: Preview and Publish Your Setup

Before going live, it's important to test and verify your setup:

1. In GTM, click on Preview.

1. Enter your site’s URL — this can be a local address like http://localhost:5173 or your deployed link (e.g., Netlify, Vercel).

1. The Tag Assistant will open and help you verify if your GA4 tag is firing correctly.
2. Once everything is confirmed, return to GTM and click Submit.

1. Finally, add a descriptive version name and click on Publish.

🎉 You're done! Google Analytics is now successfully integrated into your React project via Google Tag Manager.

Bonus: Other Integration Options

While Google Tag Manager is modular and scalable—especially useful for managing multiple tags—here are a couple of alternative approaches:

• Direct GA script injection: You can manually paste the GA4 script snippet into your index.html file.
  Not recommended for SPAs like React, as it won’t properly track client-side route changes.
• Using the react-ga4 package: This package lets you integrate GA4 directly into your React components. It’s simple to use, but less flexible if you plan to scale with more tags or third-party scripts later.

Why This Approach Is Best (In My Opinion)

• Clean separation of concerns: Your React app stays focused on UI and functionality, while tracking logic is handled externally.
• Centralized tag management: Easily manage, update, or disable analytics and marketing tags directly from the GTM dashboard—no need to redeploy your app.
• Future-proofing: Seamlessly integrate additional tools like Hotjar, Facebook Pixel, or LinkedIn Insight Tag in the future, all without modifying your application code.

Summary

1. Create a Google Tag Manager (GTM) container.
2. Integrate react-gtm-module in your React application.
3. Create a Google Analytics 4 (GA4) property and copy the Measurement ID.
4. Add a GA4 Configuration tag inside GTM using the Measurement ID.
5. Use GTM’s Preview mode to test, then Publish your setup.

Conclusion

Integrating Google Analytics using GTM in a React app might sound complex at first, but as you've seen, it’s just a series of well-organized steps. This approach keeps your analytics logic decoupled from your core application, ensuring a scalable and maintainable setup.

If you found this guide helpful, feel free to share it! I’ll be writing more developer-focused walkthroughs and tips soon.