How to Add Google Tag Manager to Your Site

August 26, 2016 Chris Wigley

I field many questions about Google Tag Manager, many of which involve confusion regarding how Google Analytics and Google Tag Manager work together. This article intends to dispel the source of confusion and to lay out, in plain terms, what is required to implement Google Tag Manager on your site.

I already have Google Analytics on my site...
While it is possible to have both the Google Analytics code and the Google Tag Manager code on your site simultaneously, once you decide to implement Google Tag Manager, you should replace the Google Analytics code with the Google Tag Manager code.

When adding Google Analytics to your site, you took a bit of JavaScript code that Google Analytics gave you, and you put it on your site. Now that you've decided to implement Google Tag Manager, you should delete that code, and replace it with code Google Tag Manager provides you.

 

Google Tag Manager

How does Google Tag Manager work versus Google Analytics?
When deploying the Google Analytics code to your site, you enabled the sending of website data to Google Analytics. The ways this works is as follows:

  • A web page on your site is loaded in a browser.
  • The Google Analytics script in your page is evaluated by the browser.
  • The browser makes a request to Google Analytics to load some additional code into the web page.
  • Once this additional code is loaded, data about the page, the user's device, etc. is sent back to Google Analytics.

 

 

So, how is Google Tag Manager different?
Google Tag Manager operates in much the same way, except that there are more steps involved, and these steps are virtually infinitely customizable. The basic process with Google Tag Manager in place is:

  • A web page on your site is loaded in a browser.
  • The Google Tag Manager script in your page is evaluated.
  • The browser makes a request to Google Tag Manager to load some additional code into the web page.
  • This additional Google Tag Manager code is evaluated, and all container tags within this code are examined.
  • Rules that pertain to tags are evaluated, and if rules are satisfied, the code for the corresponding tags is executed.

 

 

OK, I have a container on my website pages. Now what?
Once you place the Google Tag Manager code on your site, you will have a container on your site. But what does a container do? Well, until you put something inside your container, your container essentially does nothing.

A container is simply a mechanism for storage. Outside of that, it has no other function. The container doesn't do anything; it's the stuff inside the container that does stuff.

So, in order to have our container do stuff, we will need to put something inside our container.

What do I put inside my Google Tag Manager container?
There are 3 types of things that you can put inside a container:

  1. Tags
  2. Triggers
  3. Variables

This article won't go into the details of all these types of things. You can find plenty of introductory Google Tag Manager articles and videos online. I recommend starting with the Setup and Installation article and video from the Google Tag Manager Help Center site. In this article, I will briefly cover tags, because that is the "actionable" component of a container -- it's how we're going to get data from our site to Google Analytics.

Using Tags
If you look up "tags" on the Google Tag Manager Help Center site, you'll find this definition of a "tag":

A tag is a piece of code that sends information to a third party, such as Google Analytics.

Since we've replaced the Google Analytics code on our site with the Google Tag Manager code, we're going to need to setup a tag to send information to a third-party, namely Google Analytics. We need a tag for Google Analytics because we removed the Google Analytics script from our pages. Without a Google Tag Manager container tag, we will no longer be sending any data to Google Analytics.

Creating a Tag for Google Analytics
Before we decided to implement Google Tag Manager, we had the Google Analytics script on the site. Now, we've removed the Google Analytics script, and replaced it with the Google Tag Manager script. As a result, we have a Google Tag Manager container loading on our page, but there is nothing in our container, so nothing yet is really happening. We need to create at least one tag to put in our container, because it's the tags that do all of the work. The first tag we create should be used to send data to Google Analytics.

Page View Tag
The first tag we are going to create will be a tag to send page view data to Google Analytics. We want this tag to fire (e.g., send data to Google Analytics) every time a page is viewed.

Once we create this tag, we will have replicated all of the default functionality that was available when we were using the Google Analytics code on our page.

  • Go to the Tags panel and create a new tag.
  • Choose Google Analytics as product and Universal Analytics as type.
  • Insert your Google Analytics Tracking ID in the Tracking ID field (or choose the variable you created, which stores your Google Analytics tracking ID).
  • Select Page View as Track Type.
  • Since we want to track page views for the entire website, select All Pages as Fire On condition.
  • Publish your container changes, so that your updates will be live on your site.

OK, now what?
At this point, we have our container, and we have one tag inside our container. This one tag will fire, or execute, for every page of our site that is viewed in a browser, and send page view data to Google Analytics. But why stop there? With Google Tag Manager, you can fairly easily add more tags that:

  • Track PDF and other file downloads
  • Find out if site visitors are using your site search effectively
  • Add third-party services to your site, such as Siteimprove
  • Track clicks on in-page tabbed content
  • Record data about how far your site visitors scroll through a page
  • Track and diagnose JavaScript errors on your site

 

Resources
Monitor Icon - By Alexander Blagochevsky (Noun Project)

Subscribe

The One North Ideas Update delivers each month’s latest posts on digital for PSOs—including industry trends, news and our latest research—directly to your inbox. Although it’s our goal to always include thought-provoking and compelling content, you can unsubscribe at any time. 

See our Privacy Policy to learn more about how we protect and manage your submitted data.

Chris Wigley Solutions Architect

At the time of publishing, Chris was a Solutions Architect at One North.

One North Interactive 
222 North LaSalle St, #1500
Chicago, IL 60601

+1 312.469.1740