Google Tag Manager, Google Analytics and Gatsby

Part 1

byAlex Fenwood Hughes

March 19, 2019

Google Tag Manager (GTM) is a tool for managing 3rd party scripts and (when paired with Google Analytics) for making data-informed decisions about your website.

If you want to dive into a great course for getting started with GTM, Google's own Google Tag Manager Fundamentals course is excellent. If you want a general overview, read on!

I've simplified GTM into core concepts to make it easy to get started. I will walk through important terms and show how to add GTM to your website.

Important terms to get started

Source: Google Tag Manager Help

Google Tag Manager (GTM)

Google Tag Manager is a tag management system (TMS) that allows you to quickly and easily update tracking codes and related code fragments collectively known as tags on your website or mobile app. Once the small segment of Tag Manager code has been added to your project, you can safely and easily deploy analytics and measurement tag configurations from a web-based user interface.

Google Analytics (GA)

Google Analytics is a web analytics service offered by Google that tracks and reports website traffic, currently as a platform inside the Google Marketing Platform brand.

Data layer

A data layer is a JavaScript object that is used to pass information from your website to your Tag Manager container. For example:
{ category: "myCategory" }

Triggers

Tags fire in response to events. In Google Tag Manager, a trigger listens to your web page or mobile app for certain types of events like form submissions, button clicks, or page views. The trigger tells the tag to fire when the specified event is detected. Every tag must have at least one trigger in order to fire.

Variables

Variables in Google Tag Manager are named placeholders for values that are populated when code is run on your website or mobile app. For example, the Tag Manager variable named "Page URL" returns the current web page URL.

Setting up GTM with Gatsby

This is a general overview of the process with Gatsby. Check Google's documentation for more information as it will be the most current.

Create GTM account

First, you need to create a GTM account using a Google account. Go to tagmanager.google.com and complete registration.

NOTE: A GTM "Container" manages workspaces and retains container versions. I recommend naming this after your website (e.g. www.alexhughes.dev).

Add GTM to Gatsby

To add GTM to any site, you must add GTM scripts to your HTML. In Gatsby, you can do this by copying Gatby's default html.js file to your src directory and making changes.

Gatsby's documentation on editing html.js

Run this command in your terminal from the root directory of your Gatsby project in order to copy html.js:

cp .cache/default-html.js src/html.js

Add the GTM script to the top of <head> in src/html.js. See Google's Quick Start Guide for where to find the GTM script. Since we are using React, you will need to add the script using dangerouslySetHTML as shown below. Don't worry about it being dangerous, we know what we are doing, right?

{/* Google Tag Manager */}
<script dangerouslySetInnerHTML={{
        __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var
        f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','GTM-<GTM ID HERE>');</script>`,
    }}
/>
{/* End Google Tag Manager */}

Also, add the <noscript> tag to the top of <body> in src/html.js.

{/* <!-- Google Tag Manager (noscript) --> */}
<noscript dangerouslySetInnerHTML={{
        __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-<GTM ID HERE>" height="0" width="0"
        style="display:none;visibility:hidden"></iframe>
        `,
    }}
/>
{/* <!-- End Google Tag Manager (noscript) --> */}

Congrats! You've successfully connected GTM to your Gatsby site. Go ahead and reload your site and check the <head> and <body> to confirm that the scripts were successfully loaded.

Continue to Google Tag Manager and Gatsby (Part 2) to see examples of how to use GTM with your site.