Search
Clear search
Close search
Google apps
Main menu

Help us improve Analytics Education. Tell us how you like to learn!

Event tracking with Google Tag Manager

Event Tracking is one of the best ways to understand the user actions on your website such as how many times a button was clicked, a form was submitted, or documents were downloaded.

You can measure interactions on your site by either implementing the Google Tag Manager Data Layer Event code or leveraging Google Tag Manager's Auto-Event Tracking functionality.

To learn more about what event tracking is and how to use it, check out our Help Center documentation.

With Auto-Event Tracking in Google Tag Manager, capturing these actions is easy. Rather than hardcoding each click action with Javascript (such as ga('send', 'event', 'category', 'action', 'label') in analytics.js), you can create event tags directly within the Google Tag Manager interface and fire them with triggers based on predefined variables or on custom variables that you can build within the Google Tag Manager UI.

It is important to note that auto-event tracking is more susceptible to problems resulting from website changes, so we recommend using it for measuring website interactions on elements with identifiable properties that are not likely to change (e.g. link URLs, class IDs, etc.). For elements with no such identifiable attributes or that can’t be listened to with Google Tag Manager (such as clicks within Flash), use the Data Layer Event code. The rest of this section will focus on Auto-Event tracking via the Google Tag Manager interface.

Event tracking is initiated via click triggers, so before you begin to create event tags, first make sure all of your click variables are checked on in the Built-In Variables menu:

Make sure all of your click variables are checked in the Built-In Variables menu.

Predefined Variables (more details):

Creating event tags using built-in variables is quick and easy. In the first example, we will show you how to implement an event on a button-click to ‘Continue Reading’. When a user clicks on this button, they are taken from the home page to a new page with a full article.

Step 1

First, we need to create a new tag in Google Tag Manager. You can do this by either selecting ‘New’ under the tags menu and choosing the settings for a Google Analytics tag, or you can copy your original Google Analytics Pageview tag and edit the tag. We recommend copying the original Pageview tag to ensure that all of your settings are the same and you don’t encounter any typos upon setup.

Once you’ve copied the tag, you’ll want to edit the name. In this example, we’ll name it "GA - Event - 'moretag' Click".

Step 2

Next, you will need to configure the tag. Click into this section to edit. First, you’ll want to ensure your tracking ID is setup by either entering the value or using the gaProperty constant string variable (recommended).

Then you’ll need to change the Track Type to ‘Event’. This will enable the Event Tracking Parameters fields for the Event Category, Action, Label, and Value. Event tracking is a hierarchy, and should be thought of as a way to organize click data.

The top level of the hierarchy is the Category. This can be used to detail where an event is taking place.

In this case, because the click on ‘Continue Reading’ is taking place on the overview page, we will name the Category: ‘Overview.’

The Action is the second level of the hierarchy and should inform you of the user action on your website. In this case, they’re clicking on the ‘Continue Reading’ button so we’ll name the Action according to the button text.

The label is the last level of the event hierarchy. We want the Label to give us more information about what was clicked. In this example, we’ll want the Label to collect the outbound URL because the outbound URL has the article title in it. We can use the built-in variable {{Click URL}} to collect this information. If you’d like to clean up the URL to be more readable in Google Analytics, you can do so later on using GA filters

.

The Value box can be left empty unless you are assigning a numeric value to a click action, which in this case, we are not.

The last field allows us to toggle True/False for a non-interaction event. If you want a click on a button or link that does not create a new pageview to impact bounce-rate, you’ll want this set to True. In this case, because the ‘Continue Reading’ button leads to another page, we want the value of this parameter to stay at the default position of False. More information on non-interaction events can be found on our developer site.

Organized this way, the data sent to Google Analytics will inform the publisher of what articles visitors clicked into from the ‘Continue Reading’ buttons on their overview page. This is a good way to look at organic article popularity (as opposed to popularity based on pageviews, which may have been directly linked to from other sources).

The Tracking Parameter configuration should look like this:

Tag configuration showing track type = event, category = index, and label = {{Click URL}}

Once you’ve set up all of the Event Tracking Parameter fields, click ‘Continue’.

Step 3

Then you’ll need select what this tag should fire on. In this case, you’ll want to choose ‘Click’. Once you choose click, you’ll see a popup box to either choose from existing Click Triggers or create a new one. In this case, we’ll want to create a new Trigger, so uncheck any existing Triggers and then click ‘New’.

This will open a new popup to create a Trigger. The ‘Choose Event’ field will already be populated with ‘Click’. You’ll then need to configure this Trigger by choosing the Trigger type. There are two types:

Just Links
You should use Just Links when the target is any type of anchor tag <a> (e.g. <a href="#">Link</a>).
All Elements

You should use All Elements when the click target is any HTML element, such as <div>, <button>, or <img> tags.

When you have a non-anchor element within an anchor tag (e.g. <a href="#"><img class="image" src="#"></a>), you’ll need to decide what you want to use to identify whether a tag should fire or not and which element it's attached to. If it's the Click URL (i.e. the anchor's href), then use Just Links. If it's the class or some other attribute of the child element, then use All Elements. Basically, the All Elements type will bubble up the information about the lowest-level element clicked on, whereas the Just Links trigger will bubble up information about the anchor tag being clicked upon (even if there's a lower-level child element).

If you are using the Just Links trigger, you will also need to let Tag Manager know where the trigger should be enabled. If you’d like the trigger to be available to fire on every page, you can use “URL matches Regex .*”

The last step to configuring your trigger is to set the ‘Fire on’ condition. You can either select to fire on All Clicks or Some Clicks. In this case, we’ll choose Some Clicks. This will bring up a new selection field to enter the firing conditions.

The Enable When setting determines under which conditions the given trigger will be made available to fire.

The Fire On setting determines which events will cause the given trigger will fire.

To choose the best conditions to use for your website, inspect the element you want to fire an event on.

In this example, the button on our website has class="moretag" as a unique condition which means we can use the built-in ‘Click Classes’ variable to filter this trigger. We will set this up as ‘Click Classes equals moretag’ in the trigger setup.L

The completed trigger will look like the screenshot below. Save the trigger.

Create Trigger, event = click, enable on all pages, fire when click classes equals moretag.

Step 4

Your completed tag should look like this:

Completed GA Pageview Tag

Save the tag, preview/debug, and publish.

User-Defined Variables (more details):

We’ll follow the same step-by-step process as the first example, but substitute in new user-defined variables where needed.

In this example, we will use the Google Store. Specifically, we’ll focus on adding event tracking for the nav bar on the top of the webpage (Accessories, Fun, Kids, etc).

Step 1

First, we need to create a new tag in Google Tag Manager. You can do this by either selecting ‘New’ under the tags menu and choosing the settings for a Google Analytics tag, or you can copy your original Google Analytics Pageview tag and edit the tag. We recommend copying the original Pageview tag to ensure that all of your settings are the same and you don’t encounter any typos upon setup.

Once you’ve copied the tag, you’ll want to edit the name. In this example, we’ll name it ‘GA - Event - Global Nav’.

Step 2

Next, you will need to configure the tag. Click into this section to edit. First, you’ll want to ensure your tracking ID is setup by either entering the value or using the gaProperty constant string variable (recommended).

Then you’ll need to change the Track Type to ‘Event’. This will enable the Event Tracking Parameters fields for the Event Category, Action, Label, and Value. Event tracking is a hierarchy, and should be thought of as a way to organize click data.

In this example, we’d like the category for these links to be ‘Navigation,’ the Action to be the first level nav bar link clink (e.g., Accessories), and the label to be the second level click (e.g., Bags).

Since the click on navigation elements can happen on multiple pages, we’ll want to keep the name for the Category parameter fairly broad, so we’ll use ‘Navigation.’

The Action parameter is the second level of the event hierarchy and should inform you of what the user is doing on your website which, in this case, is clicking on a specific navigation area. We’ll name the Action according to the top-level navigation element button text (e.g., Accessories).

When you inspect the elements for the navigation links on https://www.googlemerchandisestore.com/shop.axd/Home, you’ll notice there are no elements that Google Tag Manager recognizes on these links. Because of this, we are not able to use a built-in variable for the Action or Label, so we will have to create our own user-defined variable for each.

The ‘Accessories’ element looks like this:

<a class="" href="/Google+Redesign/Accessories/">Accessories</a>

The ‘Bags’ element looks like this:

<a href="/Google+Redesign/Accessories/Bags/">Bags</a>

The Category will always be ‘Navigation,’ but we will need to create a custom variable for both the Action and Label, as these will vary, depending on what is clicked.

The action user-defined variable will look something like this:

The label user-defined variable will look something like this:

Once you have created these variables, you can select them in the Action and Label fields. The final tag configuration should look like this:

Once you’ve set up all of the Event Tracking Parameter fields, click ‘Continue’.

Step 3

Then you’ll need select what this tag should fire on. In this case, you’ll want to choose ‘Click’. Once you choose click, you’ll see a popup box to either choose from existing Click Triggers or create a new one. In this case, we’ll want to create a new Trigger, so uncheck any existing Triggers and then click ‘New’.

This will open a new popup to create a Trigger. The ‘Choose Event’ field will already be populated with ‘Click’. You’ll then need to configure this Trigger by naming it and choosing the Trigger type. There are two types:

Just Links
You should use Just Links when the target is any type of anchor tag <a> (e.g. <a href="#">Link</a>).
All Elements

You should use All Elements when the click target is any HTML element, such as <div>, <button>, or <img> tags.

When you have a non-anchor element within an anchor tag (e.g. <a href="#"><img class="image" src="#"></a>), you’ll need to decide what you want to use to identify whether a tag should fire or not and which element it's attached to. If it's the Click URL (i.e. the anchor's href), then use Link Click. If it's the class or some other attribute of the child element, then use Click. Basically, a Click trigger type will bubble up the information about the lowest-level element clicked on, whereas a Link Click trigger type will bubble up information about the anchor tag being clicked upon (even if there's a lower-level child element).

For this example, we’ll use ‘Click’, then select ‘Some Clicks’.

If you right click and ‘inspect element’ on the nav bar elements, you will see the click URL contains ‘Google+Redesign’.

We will then set the Trigger to fire on the condition ‘Click URL contains Google+Redesign’ since ‘Google+Redesign’ is unique to navigation elements on this site.

The completed trigger will look like the screenshot below. Save the trigger.

Step 4

Your completed tag should look like this:

Save the tag, preview/debug, and publish.

Previous: Cross-domain tracking for Universal Analytics | Next: Custom dimensions with Google Tag Manager

Was this article helpful?
How can we improve it?
Google Analytics training and support resources

Check out our comprehensive list to learn more about Analytics solutions.