Implement Google Tag Manager(GTM) in your React App

Google Tag Manager (GTM) is a free, powerful tag management system that allows you to easily manage and deploy marketing tags on your website or mobile app. In this article, I won’t dive into a lot of theory; instead, I’ll focus on how to implement GTM in our React web applications.

What is the dataLayer in GTM?

Before diving deeper, let’s quickly highlight what the dataLayer is in GTM. The dataLayer is simply a JavaScript array that acts as a bridge between your website or app and GTM. It stores data such as user actions like page views, button clicks, and metadata, which GTM uses to trigger tags.

Now, let’s move on to implementing GTM in our application.

Step 1

Create a new react app and signup to GTM if you don’t have an account.

Step 2

Install GTM package using following command.

npm install react-gtm-module

Step 3

Open your project and initialize GTM with your GTM ID. You can find your GTM ID after sign in to your GTM account. It always appear on the top navigation bar.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
import TagManager from 'react-gtm-module';

// Initialize GTM with your GTM ID
const tagManagerArgs = {
  gtmId: 'GTM-XXXXXXX', // Replace this with your actual GTM ID
};

TagManager.initialize(tagManagerArgs);

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

Step 4

You have successfully set up GTM in your project. Now, run your project, and you should see the following popup in your running application.

Now you may need to go to the GTM dashboard and click on the Preview button.

A popup will appear asking you to enter your website URL. If you don’t have a website, simply enter your localhost port address and connect with it.

Your application will now open in a separate window, and you can see the fired GTM data in your dashboard.

Step 5

Additionally, you can track page views and button clicks to monitor the page view count and the number of clicks on a specific button.

In the example below, I wrote code to pass data to GTM when the page location changes.

import React, { useEffect } from 'react';
import { BrowserRouter as Router, Route, Routes, useLocation } from 'react-router-dom';
import TagManager from 'react-gtm-module';
import AboutPage from './components/about-page';
import HomePage from './components/home-page';

const TrackPageView = () => {
  const location = useLocation();

  useEffect(() => {
    const tagManagerArgs = {
      dataLayer: {
        event: 'pageview',
        page: location.pathname,
      },
    };
    TagManager.dataLayer(tagManagerArgs);
  }, [location]);

  return null;
};

function App() {
  return (
    <Router>
      <TrackPageView />
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </Router>
  );
}

export default App;

Following is another example to track the button click data.

import React from 'react';
import TagManager from 'react-gtm-module';

const TrackButtonClick = () => {
  const handleButtonClick = () => {
    const tagManagerArgs = {
      dataLayer: {
        event: 'button_click',
        button_id: 'example_button', 
      },
    };
    TagManager.dataLayer(tagManagerArgs); 
    alert('Button clicked, event sent to GTM!');
  };

  return (
    <button onClick={handleButtonClick} className="btn">
      Click Me
    </button>
  );
};

export default TrackButtonClick;

You can see the same result by typing the dataLayer on the console.

I have created a simple project to test GTM, and I have attached the Git repository link for your reference.

GitHub - Gayan-Madhusankha/GTM_Test

I hope you enjoyed this article and gained some knowledge from it. If you have any questions, please leave them in the comments section.

Thank you!