Tag: click tracking

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.

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.

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:

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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:

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.