Code Markup Made Easy for Auto-Tagging Events

clean code in google tag manager

By now everyone is pretty familiar with the auto-tagging event feature within Google Tag Manager. This feature allows users the ability to place tags through GTM that will automatically fire when rules are met and record custom events within Google Analytics. As a marketer with some, yet limited programming experience, this has been a great added feature!

The issue that many users of auto-event tracking have run into is that the code they are working with must first go through a lot of changes to get it in shape for being able to execute on those auto triggering tags. So how do we fix that?

We are going to talk about this process on a brand new site, however the logic works, even if you are making updates to a current site.

In order to trigger auto-event tags in Google Tag Manager, you must be able to set a rule based on certain parameters within the site or element. For instance, if you have an image link and you would like to know when a user clicks on that link, you need a way to be able to recall when that link is clicked. The easiest way to do this is with a common class within the element. Let’s say that we want to make all of the image links have a class of class=”imglnk”.

This allows you to identify all of these links as having at least one commonality and give you the ability to trigger an event tag every time a link with the class “imglnk” is clicked on a set number of pages. Once you have that in place, you can then set the category (images), action (link click) and label for the event. Here we have the label set to a preset macro within GTM, {{element¬†url}}. This macro will allow us to see what the URL for the element that was clicked was within Google Analytics, so that we know exactly which image was clicked.

So how does this solve the issue between programmer and metrics implementation specialist on a build? Easy…

1. Structure

Lay out a structure for each of the elements that you are going to want tracked via events in a spreadsheet. You can download my example sheet here.

2. Communicate Class Implementation

In HTML classes can be used to structure and stylize content, or they can simply be there for organizational sake and not do anything. Build in a column for added classes to the spreadsheet so the programmer knows to call those classes with certain elements as well.

3. Wait for Site to be Coded and QA Your Rules

Once the coding is up and in place, all of your rules should work well, based on your implementation guide of classes to your programmer. Double check this and make sure everything is firing based on your guide.

Google Tag Manager’s auto-event tracking doesn’t take the programmer out of play when it comes to tracking actions on a website, but it can make the process run more smoothly with a few upfront alignments between you and the programming team.

For more information on Google Tag Manager’s auto-event tracking implementation, see¬†Justin Cutroni’s blog post.

Chris Kujawski

Founder and instructor at Digital Metrics Guru.

A passionate and driven digital marketer, specializing in Google Analytics, Tag Manager and Data Studio. A qualified expert in Google Analytics and Adwords, with more than 10 years experience delivering sound solutions to clients worldwide.

View all posts

Add comment