Skip to main content

Google Tag Manager (GTM) in React, Next.js, and Gatsby.js

Google Tag Manager (GTM) is a free tool that allows you to manage and deploy marketing tags and code snippets across your website or app without having to modify the code yourself. This can be a huge time-saver, and it can also help you to avoid errors that can occur when manually adding code snippets.

In this blog post, we'll show you how to add GTM to your React, Next.js, and Gatsby.js applications. We'll also provide some code examples to help you get started.


Adding GTM to React

To add GTM to your React application, you'll need to install the react-gtm-module package. You can do this by running the following command in your terminal:


npm install react-gtm-module

Once you've installed the package, you'll need to import it into your React application. You can do this by adding the following line to the top of your index.js file:


import ReactGTM from 'react-gtm-module';

Next, you'll need to create a new GTM container. You can do this by going to the GTM website and clicking on the "Create Container" button.

Once you've created a container, you'll need to add the container ID to your React application. You can do this by setting the gtmId prop on the ReactGTM component. For example:


<ReactGTM gtmId="YOUR_GTM_ID" />

Finally, you'll need to add the GTM snippet to your React application. You can do this by adding the following line to the <head> element of your index.html file:


<script src="https://www.googletagmanager.com/gtm.js"></script>


Adding GTM to Next.js

To add GTM to your Next.js application, you'll need to install the next-gtm package. You can do this by running the following command in your terminal:


npm install next-gtm

Once you've installed the package, you'll need to import it into your Next.js application. You can do this by adding the following line to the top of your _app.js file:


import withGTM from 'next-gtm';

Next, you'll need to create a new GTM container. You can do this by going to the GTM website and clicking on the "Create Container" button.

Once you've created a container, you'll need to add the container ID to your Next.js application. You can do this by setting the gtmId prop on the withGTM function. For example:


export default withGTM({

  gtmId: 'YOUR_GTM_ID',

});

Finally, you'll need to add the GTM snippet to your Next.js application. You can do this by adding the following line to the <head> element of your _document.js file:


<script src="https://www.googletagmanager.com/gtm.js"></script>


Adding GTM to Gatsby.js

To add GTM to your Gatsby.js application, you'll need to install the gatsby-plugin-google-tagmanager package. You can do this by running the following command in your terminal:


npm install gatsby-plugin-google-tagmanager

Once you've installed the package, you'll need to add it to your Gatsby.js application's gatsby-config.js file. You can do this by adding the following line to the plugins array:


plugins: [

  {

    resolve: `gatsby-plugin-google-tagmanager`,

    options: {

      id: 'YOUR_GTM_ID',

    },

  },

],

Finally, you'll need to add the GTM snippet to your Gatsby.js application. You can do this by adding the following line to the <head> element of your index.html file:


<script src="https://www.googletagmanager.com/gtm.js"></script>


Conclusion

Adding GTM to your React, Next.js, or Gatsby.js application is a relatively simple process. By following the steps outlined in this blog post, you can easily add GTM to your application and start tracking your website or app's performance.


Here are some additional resources that you may find helpful:

Google Tag Manager documentation

React GTM module documentation

Next GTM package documentation

Gatsby plugin for Google Tag Manager documentation

Comments

Topics

Show more