How To Send Data From Your Gatsby Site to Google Tag Manager

Understanding how users behave and tailoring content to their preferences is critical today. Google Tag Manager (GTM) is a tool that assists in this by managing website tags without requiring code changes. On the other hand, Gatsby is a powerful site generator that generates incredibly fast websites using cutting-edge web technologies. When these two tools are combined, website owners can monitor, analyze, and optimize their Gatsby-powered sites in real-time.

In this tutorial, we'll go over how to send data from your Gatsby site to Google Tag Manager with code examples.

Introduction to Google Tag Manager

Before we delve into the integration process, let's briefly overview Google Tag Manager.

What is Google Tag Manager?

Google Tag Manager is a free, user-friendly Google application that enables you to manage and deploy numerous tracking and marketing tags on your website without the need for manual coding. Google Tag Manager allows you to effortlessly add and change tags such as Google Analytics, Facebook Pixel, and custom tracking codes without manually modifying your website's code.

The importance of Google Tag Manager for your website

Google Tag Manager allows for greater flexibility and agility when it comes to tracking. Tags can be easily added, modified, or removed without the need for additional coding. This means you can quickly adapt your tracking strategy based on changing business needs or marketing campaigns. For example, if you want to track a new conversion event (e.g., “adding item to cart”) for your eCommerce website, you can simply add a new tag in Google Tag Manager without modifying your website's code.

Google Tag Manager provides a centralized tag management platform, making tracking and maintaining your website's tags easier. Instead of manually updating tags across multiple pages, Google Tag Manager allows you to make changes in one place, which are automatically applied to all relevant pages. This saves time and ensures consistency in tag implementation.

By implementing Google Tag Manager, you can streamline your tag implementation process and gain valuable insights into your website's performance and user behavior.

Introduction to Gatsby

Gatsby is a modern website development framework that leverages the power of React, GraphQL, and Webpack to produce websites that are fast and optimized. It allows developers to create performant, scalable, and secure websites.

Gatsby is more than simply a framework for building websites. It is a static site generator that takes data from various sources, such as Markdown files, APIs, or databases, and converts it into a static HTML, CSS, and JavaScript bundle. Because of this pre-rendering process, Gatsby webpages load rapidly, creating a smooth and delightful user experience.

But what exactly makes Gatsby so special? Let's dive deeper into the benefits of using Gatsby for your website.

Benefits of Using Gatsby for Your Website

Gatsby eliminates the need for server-side rendering. This not only speeds up page loads but also improves SEO. Search engines can easily crawl and index the static pages, resulting in better search engine rankings and increased organic traffic.

Gatsby offers enhanced performance by optimizing the delivery of assets. It automatically optimizes images, lazily loads content, and minifies `CSS` and `JS` files. This results in smaller file sizes and faster load times, ensuring a smooth browsing experience for your users.

In addition to its performance benefits, Gatsby provides a rich ecosystem of plugins and themes. These plugins and themes can be easily integrated into your Gatsby project, allowing you to easily extend and customize your website. Whether you need a responsive design, a contact form, or a blog section, you can find a plugin or theme that suits your needs.

Gatsby empowers developers to build websites that are not only visually appealing but also highly functional.

Setting up a Gatsby website

Creating a basic Gatsby website is relatively straightforward if you haven't already. Below is a step-by-step guide to setting up a Gatsby site from scratch:

Prerequisites:

  1. Node.js and npm: Gatsby requires Node.js and npm to run. You can check if you have them installed by running `node -v` and `npm -v`. If not, you can download and install Node.js from the official website, which will also install npm.
  2. Git: While not strictly necessary, Git is commonly used with Gatsby projects for version control. You can download it from the official website if you haven't already.

Steps to Setup a Basic Gatsby Website:

1. Install the Gatsby CLI globally:

SH
npm install -g gatsby-cli

2. Create a new Gatsby site:

SH
gatsby new gatsby-starter-default https://github.com/gatsbyjs/gatsby-starter-default

Here, `gatsby-starter-default` is a starter template provided by Gatsby to help you get up and running quickly.

3. Navigate to your project directory:

SH
cd gatsby-starter-default

4. Start the Gatsby development server:

SH
gatsby develop

Once the server starts, it'll provide you with a local address, typically `http://localhost:8000/`, where you can view your new Gatsby site. You'll also likely have access to a GraphQL IDE at `http://localhost:8000/___graphql` which allows you to test and develop GraphQL queries used in Gatsby.

5. Build your site: When you're ready to deploy or publish your website, you can build a production-ready version of it using:

SH
gatsby build

7. Deploy: After building, you can deploy your static Gatsby site to various hosting solutions like Netlify, Vercel, AWS, or even traditional web hosts. The `public` directory will contain all the files you need to upload.

The power of Gatsby lies in its vast ecosystem of plugins and its ability to source data from various locations, like CMS systems, databases, and even flat files. As you become more familiar with Gatsby, you can explore this ecosystem to add more features and capabilities to your site.

Setting up Google Tag Manager

Visit the Google Tag Manager website and sign in using your Google account. Once you are signed in, click on "Create Account" and follow the on-screen instructions to set up your account. Creating a Google Tag Manager account is a straightforward process that only takes a few minutes.

Once you have successfully created your account, you can access a wide range of features and tools that will help you manage and track your website's tags efficiently.

Integrating Gatsby with Google Tag Manager

With Google Tag Manager (GTM) and a Gatsby site set up, it's time to integrate the two to start sending data. Thankfully, there is a Gatsby plugin available that makes this integration effortless.

Here's how to achieve this using the Gatsby plugin for GTM:

Installing the Gatsby plugin for Google Tag Manager

1. Start by opening your Gatsby project in your preferred code editor.

2. In the terminal, run the following command to install the Gatsby plugin for GTM:

SH
$ npm install gatsby-plugin-google-tagmanager

This will install the Gatsby plugin for GTM in your project.

Configuring the Gatsby plugin

Once you've installed the Gatsby plugin, you need to integrate it with your GTM account:

1. Open the `gatsby-config.js` file in your Gatsby project.

2. Add the following code snippet, remembering to replace `'YOUR_TAG_MANAGER_CONTAINER_ID'` with your actual GTM Container ID:

JAVASCRIPT
module.exports = {


// ...


plugins: [


// ...


{


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


options: {


id: 'YOUR_TAG_MANAGER_CONTAINER_ID',


includeInDevelopment: false,


defaultDataLayer: { platform: "gatsby" }


},


},


// ...


],


// ...


};

Learn about more configurations and usage from the official docs for this plugin.

This plugin initiates the Google Tag Manager container. You can set up the tracking via Google Tag Manager dashboard, it might need some additional code/configuration in Gatsby website depending upon the specific requirements. The most common use case for Google Tag Manager is to send events to your Google Analytics 4 property

Sending data from Gatsby to Google Tag Manager

Now that we have successfully integrated Google Tag Manager with Gatsby site, let's explore how to send data from your Gatsby site to Google Tag Manager.

GTM is powerful in capturing various events on your website, from simple page changes to button clicks, form submissions, or any other kind of custom event. Let’s explore how to do this using the Gatsby plugin we have integrated in the previous step.

Tracking routes changes

The plugin triggers a `gatsby-route-change` event when the Gatsby route changes. To capture this event in Google Tag Manager, you need to create a new trigger in your Google Tag Manager dashboard. To do this:

  1. Visit the Google Tag Manager console
  2. Add a new tag (e.g. GA4 event) with your desired settings
  3. Add a new trigger of "Custom event" type with event name `gatsby-route-change`
  4. Publish the changes

You can now track all Gatsby route changes.

Creating and sending custom events

To send custom events from your Gatsby site to GTM, you need to understand a fundamental GTM concept: the Data Layer. The Data Layer is a JavaScript array or object that temporarily stores the data you wish to send to GTM. It acts as a bridge between your Gatsby site and GTM. Whenever you want to send any data (like events, variables, or configurations) to GTM, you push that data into the Data Layer.

This is how you can send custom events to Google Tag Manager:

1. In your Gatsby website, define the event in your Data Layer. For instance, if you want to track a button click:

JAVASCRIPT
window.dataLayer = window.dataLayer || [];


window.dataLayer.push({


'event': 'button_click',


'button_name': 'Subscribe'


});

2. Next, within your GTM account, create triggers and tags that correspond to the `'button_click'` event. This will enable GTM to capture the event and allow you to analyze it.

By sending custom events from your Gatsby site to GTM, you can derive invaluable insights into user behavior, leading to data-driven decisions that enhance user experience.

Conclusion

Integrating Google Tag Manager with your Gatsby site is a straightforward process that can greatly enhance your ability to track and analyze user behavior. By understanding the basics of both Google Tag Manager and Gatsby, setting up Google Tag Manager on your website, integrating Gatsby with Google Tag Manager, and sending data from Gatsby to Google Tag Manager, you can effectively collect valuable data and gain insights that can drive the success of your website. So why wait? Start implementing Google Tag Manager on your Gatsby site today and unlock the full potential of your data.

Don't want to go through the pain of direct integration? RudderStack's Javascript SDK makes it easy to send data from your Gatsby site to Google Tag Manager.