Blog

At the Google Analytics Summit 2013, Google announced that Google Tag Manager can now track event automatically. Whoop, my work here is done! This has been probably the largest feature push out to Google Tag Managers since GTM itself, so I to advance your understanding of Google Tag Managers auto event tracking, and provide you with a few tips on how you can navigate the GTM dataLayer.

If you’re new to Google Tag Manager, specifically Auto Event Tracking, Justin Cutroni published an excellent article titled “Bye Bye JavaScript! Auto Event Tracking with Google Tag Manager“. It’s a grand article and all; however, I was a bit taken back by the title as for a lot of Google Tag Manager implementations, especially as an agency, using JavaScript either via the Custom HTML tag or using a Custom JavaScript macro will still be apart of our implementations. So not quite “Bye Bye” yet, although we are getting closer.

So if you watched and read Justin’s blog post, you’ll be able to auto track your outbound links, file downloads, and track form submissions, but what if you want to dig a little deeper?

Inspecting the dataLayer

When I was at the Google Analytics summit for the afternoon tutorial on Google Tag Manager, I learned a real quick and useful trick that hadn’t dawned on me until Brian Kuhn showed us. That is, using the console to inspect the dataLayer!

To see this in action, go to a site with Google Tag Manager (GTM) implemented, and open Firebug’s or Chrome’s Developer Tools console,  and type ‘dataLayer’ and hit enter.

You’ll see that four objects are return. If we look and inspect these, you’ll see:

The first object is the dataLayer object dataLayer = [()] – it’s empty right now. The other objects are the gtm.js, gtm.dom, and gtm.load. Pretty sweet, huh? So what? Well, if you remember a blog post written up by Cardinal Path back in June, titled “Controlling Tag Firing Order With Google Tag Manager“, you can setup a rule based on gtm.dom i.e. when the DOM is ready, fire the tag, and ultimately control the order in which you’d like the tags to fire.

So, I want to relate this back to auto-event tracking: what does the console have to do with auto-event tracking? Well, once you have an created an event listener, you’ll now be able to see that listener object when you type “dataLayer”.

So, for instance, let’s say we want to setup a link click listener to track CTA button clicks. We do so by creating an event listener tag and selecting “Link Click Listener” and assigning it a rule that will fire on every page.

Once this tag has been created and published, we can now go to our website, click a link (I usually do Command + Click so that the link opens in another window) and enter “dataLayer” into the console and you’ll see a new object with the event value of ‘gtm.linkClick’. Pretty rad! This is important, as we can setup rules based off of that event, such as {{event}} equals gtm.linkClick.

Setting up an Event using Auto Event Tracking

So now that we have the linkClick listener, we can now use that to setup our first event. Now I know that you know to do this because you already read Justin Cutroni’s blog post, but let’s say we want to extend that blog post. Let’s say we want to pull in the text of a button that we are clicking, rather than just using a static value such as ‘Button’. Well, wait no longer.

First, let’s identify the element we’d like to track. In our case, we like this big blue CTA called “View Destinations” (see images below).

In GTM, we’ll create an event called CTA. Remember, the idea behind auto-event tracking is building reusable code, so the CTA event will be responsible for firing any interactions that happen with any CTA buttons. Next, we’ll add our Category, Action, and Label; category will be set to CTA; action will be set to click; and label will be a macro called {{element.innerText}}, which for our CTA will be “View Destinations”.

Before we setup the rule to fire this event, let’s first setup the {{element – innerText}} macro that is going to give us the “View Destinations” text.

1) Start by creating a new macro and selecting “Data Layer Variable”.

2) Name the macro Element – Inner Text and give it the variable name ofgtm.element.innerText (this is important).

3) Select Version 2 from the Data Layer Version drop-down menu. Note: Version 2 means that the dots access nested values. You’ll see why we selected this in a sec.

4) Click Save.

Now, let’s go and look at our CTA “View Destinations” button on our website and see how data layer variable name, gtm.element.innerText, will become our label for our event.

As stated before, whenever we click a link, the event gtm.linkClick object will be created. So when we click our big, blue button, we’ll see this:

You’ll notice the other GTM auto-event variables that we can access too, such as: gtm.element, gtm.elementClasses, gtm.elementId, gtm.elementTarget, and gtm.elementUrl. These are available already within Google Tag Manager as Auto-Event variables. However, what we’re after is the text “View Destinations”. So, how do we go about getting this text? Well, if you click the triangle next to gtm.element, you’ll see a bunch of properties that the “View Destinations” anchor tag contains; we’re after innerText, as this will give us “View Destinations” as our event label.

So, going back to the macro we created called “element – innerText”, by using version 2 of the dataLayer variable, we are able to access any property under the element using gtm.element.{the property you want here}, so in our case gtm.element.innerText.

Creating the Google Tag Manager Rule

Let’s go back to the CTA event we were creating:

So we’ve completely filled out our event with a category, action, and label, but now we need to setup a rule in order to fire the event. Remember that object with the event value of gtm.linkClick, well, it’s time to use that.

Let’s start by creating a new rule where {{event}} is equal to gtm.linkClick.

If we were to leave our rule just as this, regardless if we clicked a CTA or not, our CTA event would fire off. We don’t want this. So, we have to add another condition to our rule. Remember when we were looking at the CTA button and saw those other auto-event variables e.g. gtm.element, gtm.elementClasses, gtm.elementId, gtm.elementTarget, and gtm.elementUrl? Well, because our CTA has class of btn-primary, we can use that class in our rule as a condition, so that whenever {{element classes}} contains btn-primary, fire our CTA event.

The rule now looks something like this:

So let’s save our CTA event and publish it to the site and see if our new CTA event is working.

If we enable Google Analytics Debugger and click the event, you’ll see our CTA event firing when we click the “View Destinations” button. Magic!

Conclusion

Working with Google Tag Manager has been a rush. I hope this tutorial was able to advance your understanding of Google Tag Manager’s auto event tracking and provide you with a few tips on how you can navigate the GTM dataLayer a little more efficiently.