Intro to Google Tag Manager

Edit: 2018-10-30. Google now calls macros variables and rules triggers. I’ve updated the text but not the screen shots.

Google Tag Manager (GTM) is still pretty new as I write this. Stuff is still changing so I’m going to try to focus on techniques rather than step by step instructions (but I have some of those too).

What is GTM

You include a code snippet from GTM on your site which, among other things, includes a file. Then you use the GTM interface to configure what goes in that file.

This is intended to replace any scripts you’d normally have to write yourself to track stuff that isn’t a regular page view (example: tracking a file download as a page view). Say good bye to code like this: pageTracker._trackPageview(fileurl);

Why do we care?

One snippet to trigger them all. All your tracking scripts and pixels can be moved off the page and into GTM. Smaller pages, faster loading! They have some already supported services (AdWords, DoubleClick, Remarketing, Mediaplex…) and you can theoretically code support for others in yourself.

Theoretically, it means non-technical people will be able to do the set up for this kind of tracking. Less work for us! But let’s face it, the interface was written by devs, it still needs some technical knowledge.

It cuts down on the amount of code writing and maintenance we have to do in the future. Also less work for us!

Is it a trap?

Could be. Yup.

A javascript error in GTM code can break all the javascript on the page and anyone with access to your GTM account can add javascript.

GTM seems to insist on following the href on <a> elements. So if you are hijaxing any links GMT could break your code. For example: if you are using a lightbox style plugin which opens links in overlays.

Some GTM features can add query strings or hash tags to URLs, depending on the system on the other end of the link, this could cause problems too.

So test, and limit the publishing permissions on your account to people who know how to test.

Creating an account

Remember how we all went out and got personal Google Analytics accounts and added our clients to them and then stopped working for those clients and it got awkward? Google remembers too.

You hook an existing personal login up to GTM and then have the option to create accounts. One per business is ideal here. Then you get to set up what Google is calling a container. A container contains all the code snippets you are going to want to run. Google suggests you should create a different container for each website associated with the business that owns the account.

(This seems like sound advice if you’re just getting started but will lead to some code duplication in the long run if you have multiple domains, I have complicated thoughts on this that belong in a separate blog post).

Once you’ve set up a container you get the code snippet. Place the code snippet on the page after the opening <body> tag.

What’s all this?

Your container contains 3 things: tags, triggers, and variables.

Triggers

Triggers are when to apply tags. The basic one is “on every page”. Each trigger can have multiple conditions so you can combine them to create triggers like “if this event is a click and it happened on an element that does not link to this website”.

Variables

Variables are just a way to store stuff you’re likely to re-use (mostly text or javascript). There’s some pre-populated ones and you can write your own. Stuff I’ve been keeping in variables: our analytics tracking number, a line of javascript that retrieves the page title, and a complex regex that checks if the href of a link takes the user off the current site. You reference variables inside tags, triggers, and other variables by writing its name in {{double curly braces}}.

Example: Tracking page views and external link clicks with Universal Analytics

My examples are all for Universal Analytics but if you’re still using Classic the concept is the same where I pick Universal Analytics from the Tag Type menu pick Google Analytics Classic and do your best with the slightly different options that follow from there.

This is, more or less, what we’ll be setting up, in an order that makes sense to me:

Variable: your Analytics tracking number.
Tag: track a pageview in Analytics.
Tag: listen for clicked links.
Trigger: if link does not lead to current site.
Tag: create event in Analytics for outbound link click.
Create version
Preview
Publish

I found the actual order somewhat more headache inducing, and that’s why I’m writing a blog post about it. Hopefully you end up at the end of this list with link tracking and no headache.

Once you’ve followed these steps once hopefully you will understand how the pieces fit together and you can go on to work in the way that makes the most sense to you :)

This is the part where I list actual steps, this part might change as the product develops.

Variable: your Analytics tracking number.
1. In Analytics get your tracking ID from Admin > Property Settings
2. In GTM go to your container's overview page.
3. Click the big red "new" button and pick "variable" out of the list.
4. Configure the variable like this:
  
  Variable Name:
  
  tracking ID (well you can name it whatever you want)
  
  Variable Type:
  
  Constant String
  
  Value:
  
  Your tracking ID
  
  Or, if prefer a screen shot:
5. Save it.
Tag: track a pageview in Analytics.
1. Click the big red "new" button and pick "tag" out of the list.
2. Configure the variable like this:
  
  Tag Name:
  Pageview
  
  Tag Type:
  Google Analytics & gt; Universal Analytics
  
  Tracking ID:
  {{tracking ID}}
  This is the variable we just created. You can either type it yourself or click the little lego block to pick it out of a list.
  
  Track Type:
  Page View
  
  Firing Triggers:
  Add All pages
  You don't have to create this trigger, GTM creates it automatically.
  
  Or, if you prefer a screen shot:
3. Save it.
Tag: listen for clicked links.
1. Click the big red "new" button and pick "tag" out of the list.
2. Configure the variable like this:
  
  Tag Name:
  Listener - linkClick
  
  Tag Type:
  Link Click Listener
  
  Firing Triggers:
  Add All pages
  
  Leave everything else on the defaults.
3. Save it.
Trigger: if link does not lead to current site.
- Click on the big red "new" button and pick "trigger" out of the list.
- Configure the trigger like this:
  
  Trigger Name:
  on - outbound link click
  
  Conditions:
  {{event}} equals gtm.linkClick
  {{element url}} starts with your site URL
- Save it.
I actually use a complex regex in a variable for the conditions to catch a few edge cases like: urls missing the www, relative links, mailto/tel/ftp etc. but for this example and basic sites this will get what we want.
Tag: create event in Analytics for outbound link click.
- Click on the big red "new" button and pick "tag" out of the list.
- Configure the trigger like this:
  
  Tag Name:
  UA event - outbound link
  
  Tag Type:
  Universal Analytics
  
  Tracking ID:
  {{tracking id}}
  
  Track Type:
  Event
  
  Category:
  outbound-link
  
  Action:
  {{element url}}
  
  Label:
  {{element text}}
  
  Value:
  1
- Save it.
If you have an existing implementation you are trying to match so your stats aren't disrupted you should look in Google Analytics to see what you are currently using for the event category, action and label and match those values instead :)
Create version
- On the Container Draft > Overview page the Create Version button is in the top right.
- If you really want to be on the ball you can amend the name or add notes to describe what you added in this version, handy in case you want to roll back.
Preview
- The Preview button is also on the top right of the Container Draft > Overview screen.
- Click Debug in the popover
- In the next popover click on the url of your site. This will open a new window with your site and a Tag Manager window at the bottom.
- In the window at the bottom check that:
  - "Page View - Page" and "Listener - linkClick" have the status "Fired on Tag Manager Load"
  - Click on a link and check that "UA event - outbound link" gets added with the status "Fired on Event "gtm.linkClick". You can usually see it flash to the top before the other page loads but if it's too fast find (or create) a link with the attribute target="_blank" to click.
- If something is not working check your triggers and try again.
- Also important, check that the javascript on your own pages is working properly. In an ideal world you have a list of features you can test.
- Exit preview mode
Publish (blue button in top right of Container Draft > Overview page)

You can see some changes applied immediately in Analytics on the Real-Time > Overview page. Other events which don’t seem to be working on Real-Time occasionally start showing up in the stats a day later. I have no insight to offer here, sorry.

Summary

So we create tags to do things, triggers to govern when we do the things in the tags, and variables to save ourselves time when creating tags and triggers.

Stephanie Hobson I like to make websites everyone can use.