Implementing analytics, or any type of conversion tracking, is a big pain in the ass. There, I said it! But it’s been getting easier and easier with adoption of Tag Management tools. Google Tag Manager is going to make it even easier with the introduction of a new feature called Auto Event Tracking.
Auto Event Tracking let’s you track almost any user action without any additional JavaScript. It automatically captures user actions like clicks and form submissions.
TL;DR: watch this video.
For all you Google Analytics users, this means that it is no longer necessary to add JavaScript to track PDF downloads, outbound links or other user clicks. Those tasks, and many others, can be automated with Google Tag Manager.
I know – it’s exciting! Less coding = faster data collection = more reliable data quality = better insights.
There are a number of new additions to GTM that make auto-event tracking possible. Let’s take a look at how the system has changed to make this possible.
How Auto-Event tracking works
Here’s a brief overview of how the new auto-event tracking works.
Listen, Capture Collect. How the Auto-event tracking works for Google Tag Manager.
1. Listen: A new type of tag, called an Event Listener tag, will listen for different types of user actions, like clicks or form submissions.
2. Capture: When the Event Listener tag detects an action it identifies it and captures it (technically it pushes a Google Tag Manager event onto the data layer).
3. Collect: You can then automatically collect the action using additional tags, like an analytics tag.
Remember, this all happens without any additional coding. All you need to do is add the necessary settings in GTM.
There are three new pieces of functionality that make this possible:
1. The new Google Tag Manager Event Listener tag.
2. New events that indicate a user action has occurred.
3. New macros that collect information about the user’s interaction with the content.
The Event Listener Tag & Automatic Events
Let’s start with the new tag, called The Event Listener tag. This is a special tag that – wait for it – listens for a user action on a page :)
When the tag detects an action it automatically collects the action and identifies it. From a technical perspective is pushes a Google Tag Manager event to the data layer.
There are four different types of user actions that the tag can detect. Again, each action results in a Google Tag Manager event.
Click listener: this tag will listen for clicks on a page. This includes button clicks, link clicks, image clicks, etc. When a click occurs, the Google Tag Manager event gtm.click is automatically generated.
Form listener: this tag will listen for any form submissions. When a form submission occurs the Google Tag Manager event gtm.formSubmit is automatically generated.
Link click listener: same as the click listener, except it only captures clicks on links. When a link is clicked, the Google Tag Manager event gtm.linkClick is automatically generated.
Timer listener: the timer listener will collect data at some regular interval that you specify. For example, if you specify an interval of 10,000 milliseconds, GTM will fire an event every 10 seconds.
Obviously, if you want to automatically listen for user actions you must include one of the above tags on the page where you would like to capture the user action.
For example, let’s say you want to capture clicks on outbound links (this means links to other websites). Chances are you have outbound links on all of your pages. So you should add the Link Click listener tag to all pages of your site.
Remember, to add a tag you need to specify a rule that governs when the tag is added to a page. Here’s the default rule to add a tag to all the pages on your site.
Use the GTM All Pages rule to add a common event listener to every page on your site.
But let’s say you want to capture a form submission, like a contact form. There really isn’t any need to include that tag on all of your site pages. So you can create a rule to add the tag to just your form page, like this:
To control the form listener tag, restrict the placement with a rule.
The new Events are important because they identify that an action has happened. I’ve got some example below.
Understanding the New Auto Event Macros
In addition to the new tags & events there are also a number of new macros that help collect the action that occurred.
A macro is a piece of data that you can use in your tags. Some macros are automatically populated, like the url macro (which is the url of the page), the hostname macro (which is the hostname of the site), or the referrer macro (which is the HTTP referrer).
With the Auto Event Tracking macros you can automatically add data about the element the user interacted with to your analytics tag (or any other tag).
There are five new macros that can provide elements information:
Element url: This macro stores the value of the href or action attribute of the element that triggered the event. For example, a click on the link < a href="http://www.cutroni.com">Analytics Talk< /a> would result in an value of http://www.cutroni.com.
Element target: This macro stores the value of the target attribute of the element that triggered the event. Nerd Bonus: The value is stored in the gtm.elementTarget variable in the data layer.
Element id:This macro is the value of the id attribute of the element that triggered the event. For example, a click on the link < a href="http://www.cutroni.com" id="outbound_link">Analytics Talk< /a> would result in an element id value of outbound_link. Nerd Bonus: The value is stored in the gtm.elementId variable in the data layer.
Element classes: This macro is the value of the class attribute of the element that triggered the event. Nerd Bonus The value is stored in the gtm.elementClasses variable in the data layer.
Element: This macro is also the value of the action or href attribute of the element that triggered the event.
Let’s put this all together and look at some of the common analytics tracking tasks you can implement with data layer.
Tracking Clicks
Sometimes we need to track user clicks – a click on a button, image or link. Before Auto Event Tracking we would need to add extra JavaScript to the site in order to fire analytics code. Now we just use the Click Listener tag to detect a click.
Let’s walk through how to track ALL clicks on a page and capture them with a Google Analytics event.
First, add the Click Listener tag to the necessary pages. You can add it to all pages, or just a select few. It depends on what you need to track.
The Click Listener tag will listen for user clicks and execute when a click is detected.
Next, we add our Google Analytics tag to execute, and thus collect, when the click happens. Notice that I am hard-coding the Event Category to be click but the Action and Value will be dynamically populated with data from the HTML element that the user clicked on.
We can use a GTM macro to automatically capture the HTML element that the user clicked on.
The value of the action is capturing the generic name of the HTML element. This might be [object HTMLInputElement] for a form element or [object HTMLBodyElement] for the body of the page. These are fairly descriptive and can help you understand what happened.
But a better strategy would be to capture the element class or element id. These are usually more descriptive.
Here’s the rule that determines when to acctualy collect the click. Basically it will collect EVERY click on the page using a Google Analytic event. We’ll look at a few examples later that will restrict the collection to only certain elements.
The gtm.click event indicates that a user clicked on something. This causes the Google Analytics tag to fire.
I should note that this approach will NOT work for content that is in an iFrame. For example, if you embed a YouTube video in your page, you can not capture clicks on the buttons, etc.
Using this general approach can generate a lot of data – crappy data! Let’s look at reducing the amount of data by tracking certain types of clicks.
Tracking Outbound Links
We all want to know where people go after they visit our site. Did they leave using a link in an article or did they just navigate away?
To track a click on an outbound link we follow the same general process we outlined above. The big difference is we need to make sure we only track clicks on links that go to another site.
First, we add the Link Click Listener tag to the necessary pages. Because there usually outbound links on every page, I apply the Link Click Listener tag to every page on the site.
The Link Click Listener tag will listen for user clicks on links.
Now we need to add an analytics tag to collect data when a click happens. Let’s use Google Analytics and collect the data in an event! Notice that I am hard-coding the Event Category value to outbound-link.
The Event Action will be dynamically filled with the destination URL. That’s the URL of the page the user will land on. This is all made possible thanks to the element url macro.
The element url macro will automatically add the destination url to the Google Analytics event.
Here’s the important part – the tag rule. Notice that there are two parts to the rule. First I need to check for clicks on links. But I also added an additional condition that stipulates the link must not match cutroni, which is the domain of this blog. Now the Google Analytics tag will only fire and collect the click if the link is to a different domain.
Add a rule to specify what is an outbound link clicks on your site.
Tracking file downloads
File downloads are very similar to outbound link clicks. I just use a different Listener tag.
Let’s just skip to the analytics tag that will collect the data.
I’m using a Google Analytics event again. The category is hard coded as file-download. The event action will be the URL of the file and it will be dynamically populated using the element url macro.
The element url macro will automatically add the PDF url to the Google Analytics event data.
Just like I did with the outbound link tracking, I need to modify the rule to include a condition. The condition specifies that the user clicked on a link that contains .pdf.
To track a PDF link click add a condition to your tag firing rule.
Hopefully you can use this example and track clicks on any type of file that you want.
Tracking Form Submissions
Now let’s move on to forms. You could track a form using the Click listener tag. Basically you would track all of the clicks on the Submit button. But the form
We start with the Form Submission listener tag. Rather than add this tag to every page on the site, I like to only add it to pages where there is a form.
The form listener tag can be configured to delay the form submission while data is collected.
ALso notice that you can configure the form listener tag to delay the form submission to insure that the data is collected.
The tag will delay the form for up to two seconds only. Anything longer than that will create a bad user experience. GTM is smart like that :)
Just like the click tracking, there is also a form-submit event that will be generated when a user submits the form. We use this event to set up our analytics tag with a rule to control the execution.
This rule will only fire the Google Analytics event tag when a form is submitted.
I can actually pull some of the data in the form elements directly into my analytics tag using a macro.
For example, let’s say I have a form element named Gender. I can use a macro to capture the data, then use that macro when I define my Google Analytics Event, like this:
You can collect data from a form element using a macro and send the data to Google Analytics.
REMEMBER it’s not cool to collect personally identifiable information.
Here’s a bit more information on creating and using macros.
But overall, tracking a form submission is fairly straight forward. Very much like the other scenarios above.
There you have it, some of the common ways to use the new Auto Event Tracking feature.
That was a really looooong post. Hopefully it gave you a good understanding of how this feature works and how you can use it to make data collection easier to implement and maintain.
Give auto-event tracking a shot and be sure to share your experience in the comments below.
Thank you for a great post. Could you comment on the data layer. Does it have to be implemented in addition to the Google Tag Manager in order to capture all the Events?
@Anna: No, auto event tracking does not depend on your modifying the data layer. The event listener tags will automatically listen for user actions then surface those actions as events. You can then respond to those events with other types of tags, like Google Analytics tags.
Hi Justin, this is amazing!
For Tracking Outbound Links, what if we’re using relative path, would it make the data collection confused as almost all the URL contains no cutroni, or does it shift all the url to be absolute url?
Thanks.
@Jason: You’ll need to customize the URL pattern based on your site setup. So yes, if they’re relative URLs you’ll need to figure out a way to change the rule that fires your Google Analytics event tag.
I was wondering if tag manager will be able to differentiate outbound links that are repeated on the page in different locations but link to the same URL?
Also I was hoping that it would allow scrolling tracking on page, that would’ve been awesome!
@Moe: Probably not. If all the URLs to the external site look the same, then they would all be collected using the same Google Analytics event. However, if you have a different ID attribute, or class attribute, you could collect that data and differentiate between the different links.
Great post as usual Justin!
This definitely will make easier to track different user interactions and also speed up the data capture by not having to reply on IT implementing jasvascript on the page.
Does this work only with Universal Analytics or with the standard GA too?
@Dancho: It works with the standard GA tag as well. Just replace all my Universal Analytics tags with the standard GA tag.
Thanks for the walkthrough and thorough guide, Justin! While this makes Google’s tag container a lot more useful, it unfortunately still seems way too involved of a process. I think the simplicity and and ease of use of SkyGlue (I’m just a customer) still trumps the GA Tag Manager for automated event tracking.
@Erik: Thanks for the feedback. I completely agree that the workflow could be improved. It’s still an IT focused tool and not a marketing tool. But it’s quickly adding core pieces of functionality which is the important thing. Prior to the auto-event tracking it was hard to do advanced analytics implementations with GTM. But now it’s very different. Usability next :)
Will the outbound link-tracking delay the clickout?
@Valentin: Yes, there will be a slight delay in the clickout. It’s not long (a matter of milliseconds) but it insures that the data is collected.
Great post Justin,
Does utilizing the Event Listener tag through GTM eliminate the need to add a delay for event tracking in analytics?
As Google is well aware of (https://support.google.com/analytics/answer/1136920?hl=en) , event tracking is often not effective on fast sites that escape before the JavaScript fires. Does this solution solve this issue?
Cheers,
Phil
@Phillip: Yes, there is a built-in timer (although it is not a timer) that insures that the data is collected before the browser is redirect.
Great info Justin, thanks for sharing.
Instead of firing the GA event tracking, can we make it a “virtual page view” tracking for user click events? That will make the sales funnel tracking very much easy on a check out page of which the URL doesn’t change with each funnel step.
@Suranga: Absolutely. I use events because I love them :) But you can fire a Google Analytics Pageview tag when the click happens. You can actually fire any type of tag, it doesn’t event need to be Google Analytics.
Great post Justin! One question – in the example with tracking outbound links, can we collect data on what page/URL each of the clicks is happening?
Cheers,
Zoran
@Zoran: Sure, you can use the {{url}} macro to grab that data and put it into part of the Event, perhaps in the label. The {{url}} macro is just the URL of the current page.
Justin, can you verify that lick/link listeners use callbacks (just as the form listener)? Thanks!
@Pedro: Correct, the click and link click listener tags use a callback to insure that the data is collected.
Great leap forward.
Have been able to set up (in <10 min) events that fire goals in Analytics from a cick on a mailto: link, which previously had to do with much more complex jQuery, and was hard to guarantee that would fire (because of the change of page)
Hi, thank you for your article. I tested it and this tracking didn´t work with old analytics without datalayer. In UA it works great. This is mine testing.
@Tomas: It should work just fine even with the current version of Google Analytics. Try using Debug mode to make sure all of the tags are firing correctly.
Does Universal Analytics support GTM in real time? How about legacy analytics(ga.js)? This is giving me a headache…
@Carl: HA! I know, a lot is changing and very fast. Yes, Universal Analytics does support Real Time. And both Universal Analytics Real Time and traditional Google Analytics Real Time will work when implemented using GTM.
Hello Justin! Great news – yeah i know i found it after some time but it’s still a good news. Does the GTM and auto event tracking works with old Analytics (not only with live data)?
Best wishes
@lariarmedia: I’m not sure of your question. Auto-event tracking should work with both ga.js (old Google Analytics) and analytics.js (Universal Analytics). Hope that helps!
@Justin: Yes, thank You, i was looking for information about ga.js and analytics.js – a lot of people still don’t use GTM, strange. In my opinion its one of the best improvements in web analytics.
Best wishes.
Wow, Justin, this is the second article I have read here at your site. Thanks for the information, although I must tell you it is all a little intimidating and some of it is over my head. I am going to go to GA to try to do some of the things you have mentioned. Thanks for the great insights concerning all of these tools.
hi justin – this is the best blog i have read after struggling over Google’s own terrible support documentation.
question for you – i don’t have access to any of the ‘element’ macros when i log into GTM. is there something special i need to do to have access to these?
@Mary – unfortunately they’re only available on _new_ containers. Something I should have mentioned in the post. Sorry!
Hi Mary,
You can create these element macros yourself in old container, but going to the macros area and choosing ‘auto event variable’ as your macros type.
Hi Justin,
Just wanted to say thanks for doing a great job with both this post and the Analytics Academy. I’ve recently transitioned into a more data-focused role within my marketing team and your resources have been super helpful so far. I’m looking forward to learning more from your articles and videos.
See you around!
Corey
Great article. That is awesome. I just wrote an article on how to implement event tracking with Universal Google Analytics using the jQuery method. Glad to see implementing code is getting easier and easier.
Is this new feature compatible with Omniture. (I’m not technical) But is it possible to configure GTM. To send Omniture friendly signals? Thanks in advance!
@Stan: Yes, you can use Google Tag Manager to implement Site Catalyst. It might take some work, but an implementation specialist can make it happen.
Easily the best walk through I’ve found – thanks!
Uh… but … once I do (as instructed above to track outbound clicks)… how do I see a list of who clicked what when, as established by the variables I’ve set?
@Keith: The data that this tutorial describes is Event Tracking data in Google Analytics. You should see it in the Behavior > Events section of Google Analytics. Hope that helps!
Hi Justin,
great post, thnx! My question: how can I track clicks on embedded content like embedded YouTube videos or SlideShare presentations?
Thank you,
Balazs
@Balaza: Unfortunately the auto-event tracking will not work on embedded content, like YouTube players. But that’s a great suggestion!
Thanks for this post. I have successfully created events and goals based on those events. It is very cool.
Can you prepare a similar step-by-step guide for implementing eCommerce tracking using GTM?
@Jeff: Eventually, yes – I’ll post something about ecommerce.
Awesome! Looking forward to that!
Hi. Thanks for this amazing post. I had a query,,
In the section Tracking outbound posts, while specifying the tag ‘UA event on outbound link’, the event action to be selected should be {{element url}} instead of {{element}}, as the image is currently showing. Am i right in that?
@Adiman: Yes! I need to fix that image. Thank you!
Hi Justin, thank for this great post. I have installed the tag manager on our site and checked it all in preview mode the tag is firing on the registration from and all seems well. I followed your section on Tracking Form Submissions exactly.
The only thing I did not do is create a custom macro for collecting data – dont want to do that yet.
The question is this where do I see these events in my google analytics dashboard? I have assumed everything is working as all tests passed in debug mode.
Our site runs on Drupal and the analytics code is being served through a standard module and is put in the footer.
The only thing I can thing of is that maybe the GA code now needs to be set through tag manager and not through the module as above.
I have spent almost a day watching videos and tutorials and cant get to the bottom of this.
@Adam: I assume that you are creating Google Analytics events when the form is submitted. If that is the case, then check out the Behavior > Event tracking reports. There you should see the data. If you want to see the data in a Dashboard then you’ll need to add the appropriate widgets. Hope that helps!
Hey Justin: A very thorough and well thought out explanation (Yes I am excited!).
I am wondering how this all works with embedded videos such as YouTube & Vimeo (views, pauses, plays, etc…). I did some searches and could find nothing concrete.
Keep these great posts coming!
I just found this script from Lunametrics. “What says you?”: http://goo.gl/v12IO4
@Les: GTM Auto-Event tracking will not work on things like a YouTube embedded player. I have seen the script from LunaMetrics but have not tried it. They usually make pretty reliable stuff :)
Hi Justin
Is it possible to use the Auto Event tracking on a form submission and pull through transaction data?
Thanks
Mcihael
@Michael: Auto-event tracking is all about tracking clicks on links, buttons, etc. What you collect when the click happens is really irrelevant. You could track basic information from the form or you could send an ecommerce transaction to Google Analytics. The point is, you can grab data when an on-page action happens.
Hope that helps!
Hi Justin!
Thanks for such a detailed guide!
I need to track clicks on outbound links, so I created the corresponding tags in the GTM. On debugging the tags are fired. So I published the version.
How can I see the stats in GA now? I guess I need to create an event. But What should I put in the Category and Action?
Thanks
@Kristina: You’re almost done! You do need to create some Google Analytics events. I did add that to the blog post. My suggestion would be:
Category: outbound-link
Action: [the URL of the link]
You can populate the Action using the information in this screen shot. Hope that helps!
Thanks! Everything works just fine!
Hi Justin,
Thanks and question for you. Will the tag still fire if the external link is a re-direct URL that goes to other websites?
For example if the link starts with an internal URL then redirects to another page. (this link doesnt work, just an example of what it would look like)
https://www.example.com/ApplyOnline/ExternalApply.aspx?aourl=https%3a%2f%2fredirect.net%2fexamplesection%2fhourly%2fdetail.ftl%3ftest%3d13016549&useframes=False&DID=example
@John: Yes, as long as you configure your GTM rules correctly it should still fire. Technically, GTM does not matter what the link looks like. If the rule evaluates to TRUE then the tag will fire.
Do you know what happens if there are multiple forms on a page.
Example: Homepage has a modal pop-up for lead gathering, but homepage also has a modal drop-down on the nav bar for sign-in.
Is there a way to tell GTM to only track the “reg form” and not the “sign in form”?
@Rex: I think you can do that. It really depends if you can differentiate the different buttons on those forms. If you can, then you can create a rule in GTM that will only execute the tag if the correct button is clicked.
Very exited about these tools – Thanks Justin!
Any way to get the GTM tracked outbound and download links to display in In-Page Analytics?
@Jeremy: That’s a really cool idea – but no :( IPA only tries to match URLs that have the same structure as your site URLs. But there are other heat mapping tools (CrazyEgg, ClickTale) that will do what you’re asking.
Very helpful! Got clicks and outbound links tracking properly thanks to this.
I’m trying to set up tracking for PDFs though, with no success. Why would you need to set up a different listener tag than link clicks like you say? What does your pdf download listener look like?
Thanks again.
@Ian: You would need a different listener because the rules to fire the listener will be different. The rule will be different because the URL structure for an outbound link is different that the structure for a PDF. It is possible that you could use one generic listener, but it really depends on the structure of your URLs.
Hi Ian, in the rule for Google Analytics event tag change ‘equals’ to ‘contain’ for gtm.linkClick and it will start working.
Tim you’re right. That’s strange, but hey, if it works right!?
Excellent article, I recently started using Google Tag Manager in my website and this helps to clarify the points that are not made so clear by the official help articles. For now, I only have event tracking for the any form submissions in my site but my goal is to track each type of form better. Any tips on hoy to identify them? Button names perhaps?. Thanks!
Using the click listener tag I’m able to track micro conversions with on a registration button, and using a UA tag I can pass the url of the page the event happened on to GA. Is it possible to setup a tag or macro to pass the page’s title instead of URL?
@Jeremy: Sure, you can create a Macro for the page title. A macro can pull a value from the dom or custom JS. A small pice of JS like [code][/code]document.title[code][/code] placed in a macro would store the page title.
Justin –
Extremely useful post, and very impressed with the content. However the final step is where you lost me, and perhaps there’s a companion post that goes beyond the linked Google Development document.
To be specific, we’re trying to read a form element just as with the last “step” in the post and just can’t figure out how to do it without changing the code. In our case it’s the department we’re trying to read. Is this something that’s pushed to the datalayer automatically with the form listener or is there another way to read it?
You’ve made me this dangerous, now I need to be talked to like I’m 2 for this last little nuance.
@Steve: To capture a piece of data, like the ‘Department’ you’ll need to use some custom code to collect the value and push it to the data layer. Then you can use it with your Analytics tag. Hope that helps!
Very useful post! I got my pdf and outbound link tags working properly. I just can’t make a button click tag to work!.
The element class of the button is: “buttonstyle green w400”
The link behind my button goes to an external site, so I use
– a Click listener tag on that specific page – working ok
– a GA event tag, with category click, action element url and label element class. The firing rule for this tag is event equals gtm.click and element class contains button – like this it tracks a button (magenta) click that goes to same domain but not the button (green) that i need to track (external domain). So I tried changing the second part of the rule to element class contains green, but i had no success.
Hope you can help!
thanks for such a great post. Is there any need to call _trackEvent in main Google Analytics code? I mean is there any alteration needed in main GA code?
_trackEvent(category, action, opt_label, opt_value, opt_noninteraction)
what you suggest?
@Atual: No, you do not need to modify the main tracking code. But, when you use Google Tag Manager, and specifically the Auto-Event Tracking, you should not need to add any code to your site. You should make all of your changes, and add all of your events, via Tag manager.