Upcoming LunaMetrics Seminars
Los Angeles - Anaheim, Sep 8-12 Washington DC, Sep 22-26 Boston, Oct 6-10 Chicago, Oct 20-24

Google Tag Manager Auto Event Tracking

If you pay attention to developments in Google Analytics, you were probably glued to the live stream of the Google Analytics Summit opening presentations. GA made a number of announcements about forthcoming features. One of the most exciting is about automatically tracking events in Google Tag Manager. It’s a feature that’s been highly requested ever since Tag Manager was released, and it’s especially exciting because it’s available NOW (unlike a number of the other announcements, which are only “coming soon” — such as a forthcoming SLA for Tag Manager for Google Analytics Premium customers).

But, if you go and take a look at Tag Manager trying to figure these out, you might find yourself scratching your head over documentation that is mostly “coming soon”. Not to worry: I’ve banged on the pipes, and here’s a guide to how it all works.

First: The Problem

“Google Tag Manager lets you add or update your website tags and mobile applications, easily and for free, whenever you want, without bugging the IT folks.” You’ll never have to update code on your pages again! That’s what the Tag Manager marketing materials seem to say. And Tag Manager definitely can be a huge help in corralling your tracking codes for various measurement tools.

But telling you you’ll never have to touch your website’s code again might be a bit of a stretch. There are all sorts of events within your web pages you might want to track: clicks on particular links, buttons, forms, and so on. And to track them, e.g. with a Google Analytics event tracking tag, you’ve got to identify them somehow. Manually tagging them is one solution, but that sort of blows the “never touch your code” part out of the water. Instead, up til now, we’ve relied on custom tags in Tag Manager using jQuery to find and identify elements for tracking.

Now, Tag Manager has automated listening for certain kinds of events, cutting down any custom code you need to create and potentially making event tracking doable without touching your page’s code (as promised!). (Some limitations apply; I’ll discuss the fine print below.)

Event Listeners in Tag Manager

Tag Manager now offers several new tags that will automatically listen for certain things. You’ll find these under the Event Listener submenu when you add a new tag:

GTM Event Listener Tags

  • Click Listener listens for any click on the page (on any type of element)
  • Form Submit Listener listens for form submissions
  • Link Click Listener listens for clicks only on link elements
  • Timer Listener fires after a set interval of time

These tags aren’t Google Analytics tags; you’ll need a separate tag for GA or other tools where you want to send this data. Instead, these are utility tags that listen for these events and generate data for the page’s data layer, which you can then use in another tag to send the data to a measurement tool.

Let’s look at the most common scenario, tracking clicks on a link.

Suppose we have some links or buttons for which we want to capture clicks with event tracking in Google Analytics. Here’s how we’ll go about it.

Step 1: Event Listener Tag

First, add a tag with type Event Listener > Link Click Listener. (Alternatively, if the element you are tracking is not a link — a button that is a <div> element, for example — you can use Click Listener, which works the same way, but on any element.)

Your rule for this tag should be on all pages. We can narrow down later which links are of interest to send to GA, but the easiest and most forward-looking way to implement this is to include this code on all pages.

GTM Link Clicks Tag

What this does: Whenever someone clicks (on a link, for Link Click Listener, or on anything at all, for Click Listener), GTM creates an event in your data layer. The event is called gtm.linkClick for Link Click Listener or gtm.click for Click Listener. We’ll be able to use this in a GTM rule to fire a GA tag in the next step.

The information in the data layer also includes a bunch of properties about what was clicked, including the entire HTML element, its ID, class, and the URL of the link. We can use those properties as GTM macros to gather that data in GA.

[Technical Note: GTM also uses some smart unobtrusive JavaScript techniques to make sure whatever you want to track about the click occurs before following the link or executing any other onclick functions. In my testing, I found no problems with this in a variety of scenarios, but of course you’ll want to test this by previewing on your site before you publish, especially if you have complicated JavaScript on your site.]

Step 2: Google Analytics Event Tag

Next, add a tag with type Google Analytics. Note that this is in addition to the tag you’re already using to track your pageviews. This additional tag will track events.

  1. Select “Event” as the Track Type.
  2. Fill in Category, Action, Label, and Value with the information you’d like to send to your GA Event reports. These simply describe what it is someone is clicking.As I mentioned above, you can use macros (the little Lego-block button on the right of a field) to capture some of the information about the element that was clicked. Probably most usefully, you can get the URL of the link. First, create a macro with type Auto Event Variable and choose URL. Name this whatever you like (mine is just “Auto Event URL”).GTM Auto Event Macros

    Then, in your Category, Action, Label, or Value fields, you can use that value to dynamically fill in one of the fields. Here, I’ve used my Auto Event URL macro for the Label field.GTM GA Event Tracking

  3. Create rules to fire this tag.At a minimum, we need to fire the tag when the event gtm.linkClick (or gtm.click) occurs in the data layer. But keep in mind that this will occur any time any link (or element) is clicked. You might want to be more specific. For example, suppose we only wanted to track links to PDFs. Here’s a rule that does that:GTM PDF Click Rule

    Note that you can create multiple tags with different rules, and different Categories, Actions, Labels, etc. So you might have a tag for PDF tracking, as above, and another tag with a rule only for links with a class of “button”, that each fire different events.Here are some example rule ideas to get you started:

    • File types: {{event}} equals gtm.linkClick and {{Auto Event URL}} ends with .pdf (or .doc, or .mp3, or whatever)
    • Outbound links: {{event}} equals gtm.linkClick and {{Auto Event URL}} starts with http:// and {{Auto Event URL}} does not contain mysite.com
    • Buttons: {{event}} equals gtm.linkClick and {{Auto Event Class}} contains button
  4. Make sure under “More Settings” for this GA tag that you’ve matched the settings on your page tracking tag.

Step 3: Preview and Publish

As with all GTM changes, you’ll want to create a new version, preview it on your site to make sure it’s working correctly, and finally publish it live.

You’ll remember that I also pointed out that there are listener tags for forms (user fills out a form) and timing (a certain interval of time passes). I’ll leave implementing these as an exercise for the reader, but they should be pretty straightforward after you understand the steps above.

The Fine Print About Not Needing to Add Code to Your Site

The toughest part about this is identifying the links you want to track through the rules. Of course, if you just want to track every single link, it’s easy, but that’s uncommon.

You’ll notice I suggested several rules above to focus your tracking on certain kinds of links, but sometimes to find a particular link or a particular kind of link (like the button example above), you need an ID or class on the links(s) you are looking for. If you’re lucky and your pages are clearly marked up, those already exist in your page’s code. If you’re not, you’ll either need to add them, or continue to jump through hoops with jQuery or custom JavaScript to find those links within the page.

So, this can definitely reduce the effort of implementing event tracking with GTM, and can reduce your dependence on complex jQuery, but it still relies on relatively clean, well-marked-up code in your pages. If you don’t have what you need, you might still need some code changes to accommodate what you want.

Jonathan Weber

About Jonathan Weber

Jonathan Weber is the Data Evangelist at LunaMetrics. He spreads the principles of analytics through our training seminars all over the East coast. The next seminar he'll be leading will be a Google Analytics training in Boston. Before he caught the analytics bug, he worked in information architecture. He holds a Master’s degree from the University of Pittsburgh School of Information Sciences. Jonathan’s breadth of knowledge – from statistics to analysis to library science – is somewhat overwhelming.

http://www.lunametrics.com/blog/2013/10/03/google-tag-manager-auto-event-tracking/

34 Responses to “Google Tag Manager Auto Event Tracking”

I this example you use a Google Analytics tag. Why not a Universal Analytics tag? And If I use Universal Analytics can I still use your description?

Jordy — sure, the event tracking works the same way for Universal as for the GA asynchronous code. Use whichever corresponds to the rest of the tags you are using on your site for Google Analytics; the relevant settings (Category, Action, Label, etc.) are all the same.

Erika says:

Great article! I only just started looking into Google Tag Manager over the past couple days and I’ll admit some of the documentation had me a little lost. The rule ideas and the description of what is really going on in the background really cleared a lot up for me. Thank you!

Cait says:

How long will it take for the event to show up in analytics?

Cait says:

I’m try to get this working to track a click to mail link… I can’t seem to get it right though…

When creating the macros {{event}} and {{Auto Event URL}} would the macro types be custom event and auto-event variable?

Cait says:

Sorry! I got it working… Thank you!

Florian says:

Hi Jonathan
Thanks a lot for your article, it works perfect. Maybe you have any hint of how _tracksocial Integration with GTM is working. A GA Tracktype “social” is shown in the GUI, but how that should be implemented. My goal is to track Likes, Share, Tweets a.s.o as in the old way done bye _tracksocial function. Also could not find any solution at the google product forum.
http://productforums.google.com/forum/#!searchin/tag-manager/track$20social

Thanks and regards
Florian

JT says:

Can this same process be used for non-GA tags? Setting up the listener in Step 1, and the rule in Step 3, but have the rule trigger a different tag? Trying this and no luck so far.

Charlotte says:

Thanks Jonathan! You’ve made it nice and easy to digest!

Justin says:

Nice article,

Your explanation was the best that I found on the web as far as matching the current version.

I can’t seem to get this to work for outbound links, only internal links. Unfortunately I want to track outbound link clicks and not inbound. I’m going to keep trying, if anyone has any suggestions please let me know.

Neil says:

I’ve come up with a slightly different usage scenario for info requests and application clicks. Here is my tutorial…
http://pr0v.com/google-tag-manager-click-listener-element-url/

sebaspindu says:

Hey thanks a lot for sharing got the click link event working !!! Sweet

Dave says:

Bit of a stupid question perhaps but I have setup several events in GTM, the GTM Code snippet seems to be working correctly (GA Debugger gives it the all clear) but I cannot see events report in Google Analytics. Where in GA should the events show up (Intelligence Events) or have I missed something?

Florian — You can use the GA “social” tag type (which just fires the _trackSocial method). Follow the same process as above, but substitute this tag for a GA “event” tag. The tricky part will be locating the right buttons/links and setting up the rules to target just the ones you want.

JT — Yes, you can substitute a different tag for the GA tag. The rest of the setup should be the same (with the Auto Event tag and rules).

Dave — Try Behavior > Events. (The Intelligence Events reports are a totally different thing, about alerting you when there is something unusual in your data.)

david says:

Hi Jonathan,

Could you give some information on How to implement differed tracking with tag manager for analytics or adwords as example.

ON my e-commerce website I like to fire an event from server side, when I get the confirmation tracking from bank. As not all user are going back to website confirmation page.

This seems to be very difficult to find information on how to implement this process.

regards

David

Tim says:

Having trouble getting the Element ID to transfer to Google analytics – it seems like everything’s mapped correctly, and I’ve gotten Element Url to transfer but not Element ID. It’s mapped to “label” in my GA event – any ideas?

Hannah says:

Hi Johnathon,

I wonder if you can help me. I’m trying to get GTM to track form submits on a page where there are two forms. I have assigned an id to the submit button of the particular form I want to track, and have set the rule for this tag so that it should only fire when element id contains the id I set. However, upon testing it doesn’t appear to be firing at all.

Do you have any advice for getting this to work?

Hoang says:

Thank you Johnathan!
But mytrouble is i need to check email click and how could i do it? and my rule condition does not have {{Auto Event URL}} ( have i create it? )

James Gentes says:

Thanks for this – I figured out how to setup the event listener, but couldn’t tie it back to the GA Event tracking. Appreciate the walk-through.

-James

Tom Enns says:

Thank You Johnathan!

Have you ever noticed how the auto-listener can sometimes break form submissions on a page? I’ve seen this happen twice; a dev told me that it could have something to do with jQuery validation.

Keith Aldrich says:

On older Tag Manager profiles you may need to create the listener macros as they may have not been added automatically.

Kibru says:

Should the code that I get from GTM replace my GA code on the website or I publish it o top of my GA code? If I replace my GA code, how can see my page view statistics?

aditya says:

Hi Jon,

Thanks for the helpful post. Quick question- I have GA implemented natively on the site (tracking pageviews through code embedded and not through GTM).

I now want to bring in event tracking through GTM. Is it ok if I just setup a GA event tracking tag through GTM and let the native implementation do it’s work simultaneously? I hope it won’t cause double counting/misfiring etc..

Regards

Aditya

Jared says:

Great article. Helped me understand GTM better.

David says:

What do I do differently to track a click from an image (button)?

@WebsiteAnalyst says:

When I set up Link Click Listener, I dont get the option to set parameters.

In GA, I am therefore getting no Label on what links are being clicked on.

How can I set Tag Manager to report within GA which links are being clicked on?

Thanks!

Azucena says:

Hi Tim, Hannah

I have been having a tough time also trying to use element id to differentiate different things, apparently doesn’t work.
Do you figure out something with it?

Cheers!

Thomas says:

I really like reading through an article that will make men and women think.
Also, many thanks for permitting me to comment!

sebastien says:

Hello Jonathan,

Thanks a lot for this article. There’s just one point that remains unclear to me. Is there any modification to make in the dataLayer before setting up the events listeners, or will the dataLayer be modified when the event listeners are triggered ?

Aaron Abbott says:

Thanks for this article! It is exactly what I needed to figure out why my events were not working properly! Great information!

#universalanalytics

Alex says:

Hello Jonathan,
Wondering why replacing “Auto Event-variable” with {{element classes}} gives the same results? What is the difference between them?
Thanks!

Chris says:

Hi Jonathan,

Thank you for the great article. It has been very helpful. One question I have is, if I’ve set up and used the Auto Event URL macro as the label, how would I set up the goal tracking (for pdf downloads) in Google Analytics, if the goal type is Event. Would I select regular expression and enter my regular expression?

Thanks,
Chris

Leave a Reply