Google Tag Manager: like the Hyperloop for your Digital Marketing

This is a recap post from the Google Analytics Summit 2013. Get the full details of the day on our Live Blog from Day 1 of the Summit and also don’t miss the Official Google Analytics Blog.

---

The Hyperloop

Earlier this year Elon Musk, co-founder of PayPal and Tesla Motors and possibly public works genius unveiled a quite interested approach to high-speed mass transit: the Hyperloop.  Hop on in and compressed air shoots you down a tube and hundreds of miles per hour.  It reminds me of those air tubes at a drive-through bank window, only it’s much bigger and faster.

What does this fantastical transportation idea have in common with Digital Analytics?  Enter Google’s announcement yesterday (two of the 14) about Google Tag Manager put Digital Marketing into a whole new real of high-speed accuracy, agility, and overall awesomeness.  I’ll explain why…

Image source: The Hyperloop Foundation

The Power of Tag Management

I know about tag management and its need.  Back when I started Analytics Pros in the beginning of 2009, the very first project I undertook was to start developing a script that would save my forehead from many-a-breaking on the desk.  The idea was to take the pain out of getting developers to sprinkle code throughout a site just to tracking interactions.

The notion that, in 2013, or 2009, or even “way back” in 2006 we should go adding in-line onClick handlers just to track interactions within a page seems bizarre to me.  It’s like taking the Internet back to the days of font tags.  Seriously!  What would happen if you went to a web developer and said “Hey there Joe, could you make all these headings bold, bigger, and red for me pretty please?  Ok great, here’s my FONT tag!”?  You’d get thrown out of the room.  Any yet for years the web analytics field has persisted the practice of placing font-like onClick tags throughout the site.  It’s crazy!

That effort birthed a little product called Analytics Engine (it’s not so little, handling billions of tracking hits a month) but it never made the spotlight like “Tag Management” tools.  It’s used mostly by our team internally for client projects, and some outside users have adopted it.  That said, it’s not anything like Google Tag Manager, enter the big deal here.

 

Google Tag Manager: a Digital Marketer’s Hyperloop

Enter Google Tag Manager.  Launched last year on October 1st into a field that went from nothing in 2010 to dozens of players in 2012, GTM is off to a great start.  It’s an enterprise-class (soon to be backed by the GA Premium SLA), lightweight but very powerful platform for managing marketing and digital analytics tags.  With Google Tag Manager in place, changing tags or adding new ones takes literal minutes instead of hours, days, weeks, or even months.

My favorite case to date was when a client called me up at about 1 am (gotta love offering that 24×7 support SLA for our GA Premium clients) during a major product launch.  The problem: a tag was using the wrong account ID and no data was being collected.  Normally, changing this would have taken weeks due to coordinating meetings with multiple teams on multiple continents to change the ID across multiple platforms.  However because we had recently put Google Tag Manager in place, I fixed the ID and deployed an update globally in about 3 minutes.  Yes, that’s not a typo – 3 minutes for a global tag update!

But wait, there’s more!  Sorry, I don’t mean to sound like an infomercial, but there IS more… what about tracking a button click, or a download file click, or an outbound link click?  Well, that’s where there’s now more.  Read on!

The Magic: Automatic Event Tracking

What Google announced at the GA Summit is automated event tracking.  What this means is that, right within GTM, we can setup tracking for things like:

• Outbound link clicks
• Download file clicks
• Mailto href clicks
• Form submits and form field clicks
• Button clicks
• Slider/scroller interactions
• Linger time on a page (i.e. keep-alive ping based on some defined interval, say 5 seconds)
• Any other interaction that occurs on the page with a click

THIS IS HUGE!!  If my big text doesn’t convey that enough, let me say it again, this is a really big deal!

A Primer to How it Works

The auto event tracking is designed around a model that uses:

• Tags in GTM to set triggers
• Macros in GTM to process contents of elements and links
• Rules in GTM to trigger tracking tags.

One of the most exciting things is that we can trigger any kind of tag based on these events – not just Google Analytics tags, but other tags – AdWords, Floodlight, custom tags, image pixels, custom HTML, etc…

Understanding Google Tag Manager’s Data Model for Automated Events – Documentation!

Documentation for the new automated event tracking is, well, thin, to say it nicely.  The developer codesite for GTM has absolutely nothing on it, and the in-line documentation provides sparse examples.  So, I’ve taken it upon myself to save you the time and hair pulling of figuring this out by experimentation by providing documentation on what I’ve learned.

Event Listeners

Event Listeners act as the ears for event automation.  They detect when an automatic event happens.  You must configure these as tags and the output results in dataLayer pushes that contain dataLayer Event triggers.  When those events trigger, rules in GTM are evaluated.  If you’ve created a tag that fires based on such a rule, voila, event tracking.

There are four types of listeners:

1. Click Listener – listens for any click and accesses details about the element on which the click occurred.  Produces a GTM event of gtm.click.
2. Form Submit Listener – listens for HTML form onSubmit events to occur in the DOM and makes details about the form available to Macros.  Produces a GTM event of gtm.formSubmit.
3. Link Listener – this listens for clicks only on “links”, i.e. things with an <a> tag and makes details about the tag’s element values available to you.  Produces a GTM event of gtm.linkClick.
4. Timer Listener – seems a little odd at first, but really useful long-run.  This listener lets you define a timer that recurs.  Each recurrence produces a new dataLayer event using the name that you specify in the timer tag configuration.

Element Macros

Element Macros are the glue that ties all this together.   Creating a Macro to pass element values through to rules and tags is an essential step in this process.  Element macros include:

1. Plain Element – The value is determined by reading the gtm.element key from the data layer. If populated by an Auto-Event, the result will be the DOM element that triggered the event.
2. Element Classes – The value is determined by reading the ‘gtm.elementClasses’ key from the data layer. If populated by an Auto-Event, the result will be the ‘class’ attribute of the DOM element that triggered the event.
3. Element ID – The value is determined by reading the ‘gtm.elementId’ key from the data layer. If populated by an Auto-Event, the result will be the ‘id’ attribute of the DOM element that triggered the event.
4. Target – This one is silly I think.  The value is determined by reading the ‘gtm.elementTarget’ key from the data layer. If populated by an Auto-Event, the result will be the ‘target’ attribute of the DOM element that triggered the event.
5. Element URL – The value is determined by reading the ‘gtm.elementUrl’ key from the data layer. If populated by an Auto-Event, the result will be the ‘href’ or ‘action’ attribute of the DOM element that triggered the event, depending on the type of element.

Event Values for Rules

Values for use in Rules are all about Macros.  Once you’re passing event names from the listener tags into GTM you can set rules that include those event values, Macro values, and even other factors to trigger specific tags.  This is where the power really comes together: by defining a rule that evaluates macro values for elements (above) and other factors, such as page the user is on, whether the user is signed in, what campaign the user is from, what type of element the user is clicking on, etc… you can trigger tags like Google Analytics, AdWords, Doubleclick, and anything else you can put in GA (everything!).

Below I’ve provided some additional examples of how this comes together.

Examples of Automated Event Tracking in Tag Manager

Once you’ve defined Tags, Macros, and Rules, you can begin to setup tags that are triggered by any configuration.  Want to track outbound link clicks?  Simply create a rule that looks like this:

With that rule and a corresponding tag, you’ll see data like this streaming in the moment you publish the tag:

Want to track linger time on a page as an Event Tracking hit?  Use a tag like this:

Want to track every click on anything and get all the data about what was clicked?  You can do that too!  Try a tag like this:

Once tracking is in place and you publish the container, data starts flowing immediately!  Here’s an example.

 

What’s Next

We’ll work on writing a series of posts on how to use this feature with more specific, step-by-step instructions.  In the mean time, let your questions fly!

-Caleb