9 Pro Tips for GTM Auto Event Tracking and the Click Element Variable

This week I did a Google Tag Manager implementation where I had no control over the site’s source code and no access to the site’s developers. It’s an imperfect situation but luckily, GTM Auto Event Tracking affords a solution that is very effective considering these constraints.

This post is meant share a few tips on how to implement, customize, and debug Google Tag Manager in a situation where you are using Auto Event Tracking. This is especially helpful when you want  to track events on pages that you do not have any control over. The heart of Auto Event Tracking and the focus is this post is the {{Click Element}} Auto Event Variable, also known in the dataLayer as “gtm.element.” Through the whole event tracking process, there are three tips:

1. Setting up Click Event Tracking using “phantom” event triggers
2. Custom JavaScript Variables to collect data about the page/interaction
3. Debugging Auto Event Variables and Trigger

Set up Auto Event Tracking the Easy Way

Why look for how to target clicks on a certain element when GTM is going to do it for you?

This trick will save you a lot of headaches and debugging time when setting up click listeners. The idea is that you just set up Click and Link Click listeners that listen for everything. Then you just go to the page in debug mode and and perform the action Google Tag Manager is meant to capture.

Step 1: Set up “Phantom” Click and Link Click Triggers

Make a Click and a Link Click trigger that are “Enabled when Page URL matches RegEx .*” Do not set any filters for their firing rules. These trigger will fire on every click.

Pro Tip: Name these with a period as the first character, like “. all clicks.” That will keep them at the top of your alphabetically-ordered list of triggers. This will help you remember to remove them before you publish your container.

Step 2: Preview and Debug Mode to Identify Clicked Elements

Turn on Preview and Debug mode, go to the site, and perform the interaction that you want to track. Click the element and look in the Google Tag Manager Debugger at the Data Layer. This will tell you exactly what element was just clicked including what the element id or classes are.

Pro Tip: Hold Command when clicking on a link to open it in a new tab. This will allow you to preserve the state of the current page and check the debugger.

Pro Tip: Each time a click happens, the phantom click listeners will push that event into the dataLayer. Enter this snippet of JavaScript code into the JavaScript Developer Console to see what the last clicked element or link was:

dataLayer[ datalayer.length - 1 ][‘gtm.element’]

This will give you the JavaScript object representation of the {{Click Element}} Auto Event Tracking variable. This will come in handy later. Remove [“gtm.element”] to get the whole message that was pushed into the dataLayer.

Step 3: Create a Trigger rule that fires when that element is clicked

Hover over the “gtm.element” in the console (see above). This will highlight the element on the page. Right click that element and choose “Inspect Element.” This will allow you to identify the element and chose the right CSS selectors for creating a rule.

It’s as simple as that. If you have access to source code, there are much more bulletproof ways to do this but some in some cases, tracking needs to be implemented in a hurry. In those cases, this is a great approach.

Creating Custom JavaScript Variables

Now that you’ve identified the element that is being clicked on according to Google Tag Manager, it’s time to assign some variables to that interaction. These variables can be used to populate whatever analytics platform’s tags you are using. Since everybody uses Google Analytics, let’s use GA to create an Event.

Let’s say you want to track a link click, but you want to populate the Google Analytics Event Category with the text of the H3 within the containing div. (Hey, it happens.) This is possible; it just takes some setup. Follow along:

Step 1:  Find out how the data you want to assign to a variable relates to your Click Element

In the example above, we know it is the parent div’s first H3. So, with jQuery we could setup a Custom JavaScript Variable that looks like this:

function (){

  var $clickElement = $({{Click Element}});

  var $h3 = $clickElement.closest('div').find('h3');

  return $h3.text();

}

Step 2: Set up a Custom JavaScript Variable

Pro Tip: Click the caret next to the Click Element in the console. (See “Use Preview and Debug Mode to Identify Clicked Elements” above). This will give a list of attributes that could all be assigned to GTM Variables using Custom JavaScript Variables. For instance, you could capture the clicked link’s title by using the following Custom Javascript Variables.

function (){

  var clickElement = {{Click Element}};

  return clickElement.title

}

Step 3: Pop that new variable into the Google Analytics Event tag as the Event Category

It’s that simple.

Debug Auto Event Variables

A lot of these tips have been covered in the previous two sections but there are a couple more tips that will allow you to debug Google Tag Manager implementations like a ninja. Frankly, this could be a whole other blog post but here is the 10,000-foot view.

Make Sure Variable Values Are Correct

Always use the Preview and Debug mode to test the tags that you set up. When you create a new event tag, fire the tag and click on the tag to ensure the values are correct. This can also be found in the JavaScript console with the debug logs containing:

GTM Debug ["TAG_SUCCEEDED", Object]

Expand those to view the values of the variables used in that tag.

Pro Tip: Use the Console Log Filter to view only GTM messages or specific types of messages like TAG_SUCCEEDED. You can do this by clicking the button that looks like a funnel in the console.

What To Do If the Page Unloads Before You Can Check Tags

This can be a really annoying but don’t worry, your powers are strong Chrome Developer Tools Jedi. Take a look at the image of the JavaScript Developer Tools below and let me explain what the heck is going and why it works so well.

This is the Sources pane in the Chrome Developer Tools if you expand it into its own window. Ignore all the code in the middle and just pay attention to the far right panel and the bottom drawer.

1. At the top right I asked the Developer Tools to “Watch” the dataLayer object. This way any time that variable changes, that window will show the updated dataLayer variable. This is incredibly handy because it means you don’t have to keep typing “dataLayer” into the Console to check the value.
2. On the far right in the “Event Listener Breakpoints” section, I have assigned breakpoints to the unload and beforeunload events. This means that all JavaScript on the page will pause when these events happen. This allows you to check the dataLayer and the debugger to ensure that your variable values are correct when the Triggers and Tags are fired.
3. On the bottom is the normal JavaScript console. The important part is that it is showing all the Preview and Debug logs. This is useful because you will not be able to use the Google Tag Manager debugger when the page’s JavaScript is paused. You will instead have to use the console, which you can work with as much as you like. See the “Make Sure Variable Values Are Correct” section for more on that.

Setup your developer tools appropriately and the time you spend working with Google Tag Manager will be much, much more pleasant.

I hope this becomes useful for you or at least makes Google Tag Manager Auto Event Tracking setup easier than whatever the guy in the first image is doing.

If you want help with your web analytics implementation, contact me. Otherwise, any questions, comments, or complaints- please leave them in the comments!