Abstract Sequential Stephanie Hobson's abstract thoughts in the sequence she has them.

Intro to Google Tag Manager

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 rule 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, rules, and macros.

Tags
Tags are individual things to do. Things like “listen for links being clicked on”, “track this page view”, “listen for form submissions”, “track this conversion”, “track pressing play”. They’re individual tasks so listening for form submissions and tracking a conversion takes two separate tags.

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

Macros
Macros 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 macros: 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 macros inside tags, rules, and other macros 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:

  1. Macro: your Analytics tracking number.
  2. Tag: track a pageview in Analytics.
  3. Tag: listen for clicked links.
  4. Rule: if link does not lead to current site.
  5. Tag: create event in Analytics for outbound link click.
  6. Create version
  7. Preview
  8. 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.

  1. Macro: 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 “macro” out of the list.
    4. Configure the macro like this:
      Macro Name:
      tracking ID (well you can name it whatever you want)
      Macro Type:
      Constant String
      Value:
      Your tracking ID

      Or, if prefer a screen shot:

    5. Save it.
  2. Tag: track a pageview in Analytics.
    1. Click the big red “new” button and pick “tag” out of the list.
    2. Configure the macro like this:
      Tag Name:
      Pageview
      Tag Type:
      Google Analytics & gt; Universal Analytics
      Tracking ID:
      {{tracking ID}}
      This is the macro 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 Rules:
      Add All pages
      You don’t have to create this rule, GTM creates it automatically.

      Or, if you prefer a screen shot:

    3. Save it.
  3. Tag: listen for clicked links.
    1. Click the big red “new” button and pick “tag” out of the list.
    2. Configure the macro like this:
      Tag Name:
      Listener - linkClick
      Tag Type:
      Link Click Listener
      Firing Rules:
      Add All pages

      Leave everything else on the defaults.

    3. Save it.
  4. Rule: if link does not lead to current site.
    • Click on the big red “new” button and pick “rule” out of the list.
    • Configure the rule like this:
      Rule 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 macro 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.

  5. 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 rule 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 :)

  6. 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.
  7. 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 rules 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
  8. 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, rules to govern when we do the things in the tags, and macros to save ourselves time when creating tags and rules.