• GTM Courses
  • Blog
  • Services
  • Resources
    • View All Resources
    • GTM Recipes
    • GTM Community
  • About
    • About
    • Contact
  • GTM Courses
  • Blog
  • Services
  • Resources
    • View All Resources
    • GTM Recipes
    • GTM Community
  • About
    • About
    • Contact

June 14, 2019

Google Tag Manager Click Tracking: All You Need to Know

Updated: June 14th, 2019. As a feature, click tracking in Google Tag Manager is a perfect bait for a beginner. It’s fairly easy to get started: read one or two blog posts, maybe watch a video and done! You can track buttons, outbound link clicks, etc. However, what I’ve noticed among GTM beginners is that they do not fully realize the click tracking configuration flow in GTM and why is it necessary to complete one thing or another.

Moreover, intermediate Google Tag Manager users are not always aware of some more serious click tracking techniques that open entirely new possibilities in tag management.

That’s why I’ve decided to publish this (once again) extended/definitive/you-name-it guide on Google Tag Manager click tracking, covering not only basics but some advanced stuff as well.

 

Learn how to track link clicks in GTM Fundamentals course

If you’re just starting with Google Tag Manager, everything might look a bit overwhelming. I totally understand that. Most likely, everyone has been here at some point. For your convenience, I’ve created a free Google Tag Manager Fundamentals course that also gives an introduction to the link click tracking as well. In addition to that, you’ll get a better understanding of what are tags, triggers, variables, how to implement custom scripts, etc.

So if you find yourself being a “video-content” person, take a look at my course.

Enroll in Google Tag Manager Fundamentals course

 

GTM click tracking: Table of Contents

  • #1. Why click tracking is so important?
  • #2. Two types of click triggers
  • #3. What’s the plan?
  • #4. Google Tag Manager Link Click Tracking
    • #4.1. Use Case No.1. Outbound link tracking
      • #4.1.1. STEP 1. Enable a generic link click trigger in GTM
      • #4.1.2. STEP 2. Enable built-in click Variables
      • #4.1.3. STEP 3. Create a tag
      • #4.1.4. STEP 4. Update the trigger
      • #4.1.5. An alternative configuration of the Outbound link click trigger
      • #4.1.6. STEP 5. Test (in GTM and GA)
      • #4.1.7. Important!
    • #4.2. Use Case No.2. Track contact links
    • #4.3. Create a Google Analytics goal based on a click event
  • #5. Google Tag Manager button click tracking
    • #5.1. STEP 1. Create a generic All Elements click trigger
    • #5.2. STEP 2. Enable click variables in GTM
    • #5.3. STEP 3. Create a Tag
    • #5.4. STEP 4. Create/update the click trigger
    • #5.5. STEP 5. Test
  • #6. Working faster with GTM recipes
  • #7. Going deeper with Google Tag Manager click tracking
    • #7.1. Get additional click data with the Auto-event variable
    • #7.2. Using CSS selectors in click triggers
  • Google Tag Manager Click Tracking: Final Words

 

#1. Why click tracking is so important?

I will not give you any statistics here but think about what are the most common interactions you do on any website. It’s page-loading, scrolling, and clicking. You click links and buttons to navigate from one page to another, to reach a particular goal.

That’s why it’s crucial to track such interactions – to better understand user/visitor behavior. Capture clicks, send their data to 3rd party tools, like Google Analytics, and analyze the data.

With Google Tag Manager the most popular tracking use cases are:

  • Button click tracking (say “Add to cart” button clicks)
  • Outbound link clicks (track when a visitor clicks a link leading to an external resource (3rd party website))
  • Contact link clicks (e.g. clicks email addresses or phone numbers)
Subscribe and Get the Ebook - Real Book Img - GTM for Beginners

 

#2. Two types of click triggers

There are two types of click triggers in Google Tag Manager: All elements and Just links.

Click triggers

As their titles imply, All elements trigger tracks clicks of any element (link, image, button, etc.), while Just links trigger tracks link clicks only. If an HTML element is clicked and it (or its parent elements) has no hyperlink, the Just links trigger will not catch that click.

Here’s an example, a button that has a link.

buy now

And here’s its HTML:

JavaScript
1
2
3
4
5
<div class="button-main">
<a href="https://www.example.com/purchase">
   <span>Buy now</span>
</a>
</div>

The button is a block that is called <div> in HTML (full name: division). Inside of the div, we have a link (<a> tag, a.k.a. “anchor” tag) and inside that link, we have a text “Buy now”. 3 levels in total.

GTM click triggers (Just links and All elements) will act differently here.

If I enable Just links tracking and click the “Buy now” caption, GTM will start climbing up the website’s document until it reaches a link. In this case, it will climb from the <span> element (because I clicked the “Buy now” text) and it will stop on the <a> HTML tag because IT IS a link.

How just links trigger behaves

All elements trigger is more straightforward here. If you click “Buy now”, it will track the click of the “Buy now” text, which is in the <span> HTML element.

How just all elements trigger behaves

In plain English:

  • Just links trigger tracks only link clicks.
  • All elements trigger tracks clicks of elements that were actually clicked, regardless of whether they have a link or not (e.g. image, website background, button text, etc.
Google Tag Manager Ebook Bundle

#3. What’s the plan?

Anyway, the best way to master Google Tag Manager click tracking is by doing. And that’s exactly what we are going to do in this guide. But before that, let’s review the workflow that you’ll need to follow every time you want to track clicks.

  • Step 0. Decide what you want to track, links or any elements.
  • Step 1. Have at least one click trigger (the type of a trigger depends on the step 0) enabled on the page.
  • Step 2. Enable all click-related built-in variables
  • Step 3. Create a tag (say, Google Analytics event tag)
  • Step 4. Update the click trigger to track only particular clicks and then assign the tag to it.
  • Step 5. Test.

The same workflow applies to both Just links and All elements triggers. Let’s see it in action.

 

#4. Google Tag Manager Link Click Tracking

By default, Google Tag Manager does not track clicks. You can check that by enabling the Preview and Debug mode and refreshing the web page that you’re working on. You’ll see three events in the debug panel, Page View, DOM Ready, and Window Loaded.

No Pageview trigger in GTM Preview and Debug mode

Now, click any element on the page (not in the GTM debug panel) and see what happens on the left side of the panel. Nothing. You will still have those 3 events (unless, of course, you have implemented some other tracking functionality in your GTM container sometime before).

This happens because, by default, Google Tag Manager does not track clicks, therefore, you need to configure it by yourself. Let’s start, shall we?

Remember that 5 step workflow from the previous chapter of this blog post? Well, 6-step, if you count the step 0. In this guide, I’ll mention it several times because I want you to memorize it. That workflow is crucial in order to master click tracking. In fact, it applies even to more triggers, e.g. Youtube.

OK, let’s think which link clicks should we track first. How about outbound link clicks?

 

#4.1. Use Case No.1. Outbound link tracking

According to our Google Tag Manager click tracking workflow, step 0 is to decide what we want to track. This step is already complete because we chose outbound link tracking. Let’s proceed to step 1.

 

#4.1.1. Step 1. Enable a generic link click trigger in GTM

In order to enable link click tracking, we need to enable a thing called link click listener (a.k.a. link click auto-event listener). It’s a feature in GTM that listens to link clicks on a page. If it spots one, it will display that event in the GTM Preview and Debug (P&D) mode and we’ll be able to use it as a condition to fire tags. To be more precise, the listener pushses the click data to the Data Layer.

In fact, there are many auto-event listeners in Google Tag Manager. Speaking of built-in listeners, there are Youtube listener, scroll listener, element visibility listener, etc. Also, there is a whole bunch of custom auto-event listeners, e.g. Vimeo listener, Mixcloud player listener, etc. Some of them are available in the GTM Recipe library.

How can we enable that auto-event listener? – you may ask. The answer is by having at least one link click trigger enabled on a page. And this is exactly what we’ll do in this chapter.

In Google Tag Manager, go to Triggers > Trigger Configuration > New > Just Links. Leave all the settings as they are and name the trigger All Link Clicks (or anything else).

generic link click trigger

Speaking of two checkboxes, here is a quick overview:

Wait for tags is useful if the link opens in the same browser tab. If you have any tags linked to the link click trigger and Wait for tags is enabled (say for 2000 milliseconds), GTM will put the redirection temporarily on hold (for up to 2000 milliseconds) to give tags a chance to properly fire. Once the tags have properly fired or 2000 milliseconds have passed, the user will continue navigation to another page. You can change the duration of that pause, not limited to 2000 milliseconds.

Check Validation checks if the click was actually valid. This setting is mentioned in two guides by Simo Ahava. Pretty often I leave this checkbox unchecked.

===

Back to our generic link click trigger. Save it and refresh the preview and debug mode. Go to the page where you wish to track links. Click any link on a page.

If the link opens in the same browser tab, make sure that you click the link by holding CTRL or CMD keys on your keyboard (in order to open the link in the new tab). Why? Because if the page refreshes, the Preview and Debug mode resets as well, therefore, you won’t be able to check what click data is available once that click is captured by the GTM. And that will be very important in Step 2.

So once you have clicked the link, take a closer look at the Preview and Debug panel. You’ll see a new event, gtm.linkClick. That’s what our link click auto-event listener did. It was listening to link clicks on a page and once it spotted one, it pushed a gtm.linkClick event to the Data Layer and, therefore, it became visible in the debug console.

Update: since 2019, technical event names (such as gtm.linkClick) are renamed to more user-friendly ones (like Link Click or Click, etc.). Keep that in mind if you stumble upon older GTM guides. Somewhere in the background, they are still names as gtm.linkClick or gtm.click, but in the Preview and Debug mode they are now made “prettier”.

gtm.linkclick in preview and debug mode

If you don’t see this event, make sure you have refreshed the Preview and Debug mode (by clicking the Refresh link in the orange banner) and then refreshed the web page (that you’re working on) once again.

To quickly sum up, we created a generic link click trigger because we needed to have the link click auto-event listener enabled on a page. If at least one link click trigger is enabled on a page (not activated but just waiting for a moment to fire), the link click listener becomes enabled in the background.

Thanks to this, we are able to see link click events in the P&D mode and inspect what data is available with each click.

Speaking of data, read the following chapter.

 

#4.1.2. STEP 2. Enable built-in click Variables

In order to create more precise triggers, we need yet another ingredient, variables. What are those?

They are little pieces of information which can be used both in Tags and Triggers (and, in fact, in other variables too). For example, Click ID. You can use it as a trigger condition (e.g. fire Google Analytics Event code when the ID of the clicked button equals to “main-cta-button”).

Thanks for GTM Preview and Debug mode we can see what variables are available at every event. Click Link Click event and go to Variables tab. Keep looking for anything related to clicks. If you’re working on a new container, you’ll probably won’t find anything.

Don’t worry, that’s expected. Now go to the Data Layer tab (while Link Click event is still chosen). There, you’ll see some link-click-related parameters, like gtm.elementId or gtm.elementClasses, for example:

Even though the click data is tracked by Google Tag Manager, it is not available in the Variables tab of the P&D console. Why? Because built-in click variables are not enabled in the GTM interface. So what? If some data is not available as a variable in GTM, you cannot use it in your triggers.

Let’s activate them.

In your GTM account, go to Variables and in the Built-in Variables section click Configure. A panel will appear on the left side. Scroll down until you find click variables and enable ALL of them one-by-one.

enable click variables in google tag manager

After that, refresh the Preview and Debug mode, refresh the web page that you’re working on and click a link once again (if it opens in the same table, also hold the CTRL or CMD keys pressed while clicking).

A Link Click event will appear in the event list of the P&D console, click it. Now go to the Variables tab and keep looking for click-related variables. Bingo!

 

#4.1.3. STEP 3. Create a tag

Say, that we want to send outbound link clicks as events to Google Analytics. To do that, go to Tags (in your GTM interface) > Tag Configuration > Universal Analytics.

And enter the following settings:

Outbound Link Click - GA Event tag

In fact, you can enter anything that is meaningful to you in the Event Category, Event Action, and Event Label fields. The screenshot above is just for the demonstration purpose.

If you don’t have any Google Analytics Settings Variable in the container yet, create one by clicking the drop-down list and choosing New Variable.

New GA Settings Variable

At least for now, enter the GA Tracking ID of your property (it looks like this UA-XXXXXXX-XX) and hit Save.

If you want to use other GA features, like custom dimensions, cross-domain tracking, you’ll need to do additional configuration in the GA Settings Variable.

With GA Settings Variable you’ll be able to reuse the same GA settings in multiple Google Analytics tags. Each GA tag requires a Tracking ID and, optionally, other settings to configure. Once you have 20, 50, or even more Google Analytics Tags, the management on the individual level becomes unbearable.

That’s where the GA Settings Variables saves the day: after you make a single change in the variable, all the tags that are using the variable will automatically inherit the change.

Enroll in Google Tag Manager Fundamentals course

#4.1.4. STEP 4. Update the trigger

The next step in this workflow is to update our trigger and then assign it to the Google Analytics tag. We want our tag to fire not on all clicks, but only those that are external (outbound).

What is an outbound link? Which variable in Google Tag Manager should we use as a part of the triggering condition? Let’s check the P&D console and see what we have.

Once you have the Preview and Debug console open, click any outbound link on a page and then click the Link Click event in the events stream. Go to the Variables tab. Which variable should we use in order to distinguish an external link from an internal one?

The domain (Page hostname) of the current page is example.com (see the screenshot above). All the links (Click URL) that are considered as internal if they also belong to Page Hostname, therefore, all external links (Click URL) are the ones of which do not belong to the example.com.

And this is exactly what we need to do: create a link click trigger that listens only to those clicks that do not belong to our website’s hostname (e.g. example.com).

Additionally, we need to exclude link clicks that are:

  • email links (e.g. [email protected])
  • phone numbers (e.g. +123456789)
  • Skype links (links that open Skype window)
  • links that do not redirect anywhere (they usually just display a popup or something like that). In GA reports, they might appear as javascript:void(0).

This can be avoided if we narrow down our trigger to track only those links that start with http. All outbound links start either with http or https.

Go to Google Tag Manager > Triggers and open the previously created “All link clicks” trigger. We’ll edit it to track only outbound link clicks. Rename it and change its settings like in the screenshot below (of course, replace example.com with the actual domain that your website belongs to):

Here’s a little of explanation: what is an outbound link? It’s a link that does not belong to the domain of the current website. That’s why I’ve set the trigger to track all links of which hostname does not equal to “analyticsmania.com”. In your case, you should enter your domain there.

If there are several domains you do not want to track, then change trigger’s condition to Click URL does not match RegEx (ignore case) domain1\.com|domain2\.com (replace these domains with actual domains and add a backslash ( \ ) before all dots.

After you save the trigger, open the GA Event tag and assign the trigger. Like in the screenshot below.

Outbound link trigger in the GA tag

If you want to have an even more precise trigger, you should create a custom variable. Instead of using Click URL, you would be using the variable Click Hostname. To create one, go to Variables > User Defined Variables > New and choose URL Variable and enter the following settings.

Click hostname

Use this variable in your outbound link click trigger instead of {{Click URL}}.

 

#4.1.5. An alternative configuration of the Outbound link click trigger

There are other ways how you could configure the outbound link click trigger in Google Tag Manager. The first option is implemented in the GTM recipe created by Lunametrics (here’s the link to it in the GTM library). They created a Custom Javascript variable that checks whether the clicked link belongs to the current website or to some external resource. Then this variable is used in the click trigger. The advantage of such a solution is that it automatically adapts to any website and does not require any reconfiguration.

#4.1.6. Step 5. Test

Enable (or refresh) the Preview and Debug mode, go to your website and refresh the page. Here are scenarios you should test:

  • Click an internal link (e.g. the one that opens a “Contact us” page). The outbound link GA tag must not fire.
  • Click an external (outbound) link. The GA Tag must fire. If the tag did not fire, click it in the P&D mode.
    ga tag in the preview and debug mode
    and scroll down to Firing triggers section and check if all the conditions were not met (marked with a red X).
    the reason why a tag did not fire
  • Then check GA real-time event reports and see if you are getting the data.
    In Google Analytics, go to Realtime > Events, and you should see the click data you’ve just tracked with GTM.

If, for some reason, you don’t see the data in Google Analytics real-time reports, read this guide.

 

#4.1.7. Important!

Before we continue, keep one thing in mind: if any link click trigger is enabled on a page, you’ll see Link Click events every time any link is clicked. It does not matter whether you have configured the trigger to fire on just particular link clicks. You’ll see Link Click every time any link is clicked. 

That’s ok and this behavior is expected.

Every time a Link Click event fires, Google Tag Manager evaluates all the variables and your trigger conditions (that you’ve set in the GTM interface) and then decides whether to fire particular tags or not. The same applies to the All Elements trigger that we’ll also try in this guide.

So even though you’ll see many Link Click events, that does not mean that your tags will be fired on each one of them. GTM will handle the moment of when the tag is activated.

 

#4.2. Use Case No.2. Track contact links

This time, let’s do a quicker overview because the workflow is pretty much the same (only the conditions in the trigger are different. And a GA tag, of course).

What are contact links, you say? They are phone numbers (a link starts with “tel:”) and email addresses (a link starts with “mailto:”) on a website that can be clicked by a user.

  • Step 0. Decide what you want to track: links or other elements. Done. We want to track contact link clicks, therefore, we’re using the Just Links trigger.
  • Step 1. Have at least one click trigger (the type (Just Links or All Elements) depends on the step 0) enabled on the page. Done. We already have it from the outbound link click use case. It does not matter that the outbound link click trigger does not track contact link clicks. What matters is that the link click auto-event listener is enabled on the page and we can see all the link clicks in the Preview and Debug mode. That’s helpful because we can inspect those clicks and see what click-related data is available.
  • Step 2. Enable all click-related built-in variables. Done. We have also done that in the outbound link click tracking case.
  • Step 3. Create a tag (say, Google Analytics event tag). Create a tag that will send the event data every time a visitor/user clicks a contact link. You can copy the GA tag we used in the outbound link click example and just change the Event Category and Event Label. In the screenshot below, I just changed the Event Action.
    GA Contact Link Click Tracking Tag
  • Step 4. Update the click trigger to track only particular clicks and then assign the tag to it. In this case, we won’t need to update a trigger, we’ll need to create a new one. With the following settings:
    Contact Link Click Trigger
    The condition is Click URL matches Regex (ignore case) tel:|mailto:. This means that if a clicked link contains either “tel:” or “mailto:”, a tag will be fired.
  • Step 5. Test.

Much faster right? Once you get this workflow, things will get much easier to you with GTM. The same applies to Youtube, Scroll tracking, etc. (but definitely not limited to). Let’s do a quick recap:

  • In case of link click tracking, we need to have at least one link click trigger enabled on a page. Trigger conditions do not matter, can be All link clicks, can be Some link clicks. This enables the link click auto-event listener and it starts running in the background. Every time the listener catches the click, it pushes the click data to the Data Layer. We cannot use that data until we instruct GTM to read it (by creating variables).
  • Enable click variables. They will read the click-related data from the Data Layer and make it available in your tags, triggers, and even other variables.
  • Create a tag that you wish to fire on each link click. In this guide, we created Google Analytics tags.
  • Create a new trigger (or update the existing one) to fire only when you really need it (e.g. on outbound link clicks).

 

#4.3. Create a Google Analytics goal based on a click event

Obviously, some clicks on a page are more important than others. If you want to create a Google Analytics goal based on a click event you’ve just sent to GA (via GTM), here’s what you need to do:

#1. In Google Analytics, go to Admin and under the GA view (that you’re working on) select Goals.

#2. Then click NEW GOAL, and then choose:

  • Goal Setup: Custom. Click Continue.
  • Enter goal name, choose goal slot ID and choose Type: Event. Click Continue.

    Usually, Goal slot ID does not matter to me, therefore, I don’t put too much emphasis on it. It’s perfectly fine to choose the slot that Google offers automatically.
  • Enter values of an event that you consider as a completed goal. In the screenshot below, I’ve configured that if a visitor clicks any contact link on my website, it will be considered as a completed goal.

    Several important things to keep in mind:

    • At least one Event field in the Goal’s settings must be entered. It is NOT required to enter values in all the fields.
    • The fields in the screenshot above are case-sensitive. This means that “contact link click” is NOT the same as “Contact Link Click”. So if you are tracking event category with all lower-case letters, make sure that you also enter a lower-case value in the GA goal’s settings.

#3. Test your goal. Once you complete the goal, go to Google Analytics > Realtime > Conversions and it should appear there almost instantly. If not, then your goal settings are incorrect (most likely you have entered a wrong category, action, or label values). Once again, those fields are case-sensitive.

 

#5. Google Tag Manager Button Click Tracking

You probably think that we’ll be using All Elements trigger in this case. And you’re right. But that does not mean that buttons always require this trigger. Many buttons are just links with the style of a button. So you can always try to use the Just Links trigger first before trying the All Element trigger.

However, I want to show you what the All Elements click trigger is and why is it different from the Just Links.

As you can guess from its title, All Elements tracks clicks of all elements on a web page (including links). If you click on a page title, image, or background, all clicks will be tracked by the click listener and you’ll see those events in the GTM Preview and Debug mode.

 

#5.1. STEP 1. Create a Generic All Elements Click trigger in GTM

Just like with the Just Links trigger, you need to have at least one All Elements trigger enabled on a page in order to see click events in the P&D console. You can try it for yourself. If you have enabled only Just links trigger and try to click an image on a page, you’ll get nothing in the debug console.

That’s why we need to follow the same workflow (just as we did with the link click tracking). Go to GTM interface > Triggers > New > All Elements. Leave all the settings as they are and save the trigger. Refresh the Preview and Debug mode, then to a web page you’re trying to work on. Start clicking anything (except the P&D console) and behold: you’ll start seeing Click events in the GTM preview console.

gtm.click

This means that the All elements click auto-event listener has been enabled and all clicks are now being tracked.

 

#5.2. STEP 2. Enable click variables in GTM

If you click on any of these click events in the Preview console and go to the Data Layer tab, you’ll see what click-related data is available with that particular click. We could definitely make use of some parameters here, for example, gtm.elementId (which stands for Click ID). If we want to use it in the GTM tag, trigger, or another variable, we need to turn this data point (gtm.elementId) into a variable.

Click data in the data layer

Luckily, all the built-in click variables were already enabled in one of the previous chapters (outbound link clicks). Just links and All elements triggers share the same set of click variables.

all elements click variables

 

#5.3. STEP 3. Create a Tag

Let’s track some element (non-link) as an example, shall we?

I’ve got something useful, an Add To Cart button. Every time a visitor adds a product to a cart, we can send an event to Google Analytics.

Add to cart button

This button has no link, therefore, Just Links trigger will not help. We’ll have to use an All Elements trigger.

add to cart button html

But before we create/update a click trigger for the Add To Cart button, let’s create a Google Analytics event that will send the click data over to GA. In GTM, go to Tags > New > Tag Configuration and choose Google Analytics – Universal Analytics.

Enter the following settings:

Add to cart GA event

Feel free to add any other values in the Event Category, Event Action, and Event Label fields. This time, I’ve even left the Event Label field empty (as it is not required).

If you don’t know what you should choose in the Google Analytics Settings field, read this blog post about the Google Analytics Settings Variable.

For now, save this tag without a trigger. Let’s move on.

 

#5.4. STEP 4. Create/update the click trigger

In order to create a precise trigger that tracks clicks of only the Add To Cart button, first, we need to click that button and inspect what kind of data is available in the Preview and Debug mode. Based on that data (variables), we’ll create (or update) the click trigger.

So let’s click the button and open the Variables tab in the P&D console. Scroll down and keep looking for all the click-related variables.

Click ID of a button

Cool, that button has an ID! We can use that in our trigger. However, don’t rush too soon. There’s one more thing you need to know. In the screenshot above, I click on a button text, therefore, the Click ID is AddToCartText. But if I clicked somewhere on the background of the button (not on a text), the Click ID would be different, AddToCart.

Click ID of a button background

Why?

It’s because this button is not developed as a single element. Actually, it consists of two elements, text and the button shape/block.

Different Elements - Different IDs

That is also visible in the screenshot below:

Two elements in one button

All elements click trigger works pretty straightforward here. It tracks click of the actual element, regardless of whether that element is a part of some bigger element. If you click on a background, the listener will track the click of a background. If you click a text, it will track the click of a text.

As a result, in this case, there are actually two elements of which clicks we need to track in order to precisely capture Add To Cart clicks.

If that button indeed had a link, the developer would have probably wrapped both elements with a single link, therefore, Just Links trigger would have treated that button as a single element.

In such a case, after the button is clicked, the link click listener climbs up the document of a page and keeps looking for a link. It does not matter which part of the button is clicked, the listener climbs up and finds the same link. But with the All Elements click trigger it’s different we need to be more precise.

So what should we do now? The button has no link, therefore, the Just Links trigger will not help us. The button consists of two elements, therefore we need to track them both, preferably, with a single trigger.

What do those elements (button text and the button background) have in common? Their Click IDs are pretty similar. They both start with the AddToCart. That could be our click trigger condition.

Let’s do exactly that. In GTM, go to Triggers > New > All Elements and enter the following settings:

Click Trigger - Add to cart button

Keep in mind that this rule is not universal and will probably not apply to your project/websites. You’ll need to find a way how to create a unifying trigger on your own.

In fact, there is another way how to track clicks of several elements with a single trigger rule (that I personally use as well) but it’s more advanced. I’ll explain it a bit later. Spoiler alert: two words, the first one is “CSS”, and the second one is “Selectors”.

Back to our AddToCart click trigger. Save it. Then open the Google Analytics event tag that you’ve previously created and assign this trigger.

Subscribe and Get the Ebook - Real Book Img - GTM for Beginners

#5.5. STEP 5. Test

Enable (or refresh) the Preview and Debug mode, go to your website and refresh the page. Here are scenarios you should test:

  • Click the Add To Cart button text. The GA tag must fire.
  • Click the Add To Cart button background. The GA tag must fire as well.
  • Click any random elements on your website, the GA tag must not fire.

If, for some reason, you don’t see the data in Google Analytics real-time reports, read this guide.

 

#6. Working faster with GTM recipes

If you’re not familiar with GTM recipes, they are GTM container templates that can be imported and automatically create tags, triggers and/or variables. In my free GTM Recipe library, currently, you can find two click-related recipes (both are created by the team of Lunametrics):

  • Recipe for Outbound link clicks (this one automatically adapts to any website and tracks clicks of all links that do not belong to the current domain of a website).
  • Recipe for Contact link clicks

Instead of manually creating tags/triggers and variables for every project, you can just import the container and save some time.

 

#7. Going deeper with Google Tag Manager click tracking

Cool, now you know the basics of Google Tag Manager click tracking and how to use it in your tag management stack. But the journey just begins here, there are still some techniques you should master (and I have covered them in the Intermediate Google Tag Manager course).

Enroll in Intermediate Google Tag Manager course

#7.1. Get additional click data with the Auto-event variable

Auto-Event Variables are used to access the target element of an auto-event action (e.g. Click). For example, when you click a link, you can access link’s text.

So what’s the deal?

The thing is that in GTM, you can create custom auto-event variables and use them in tags, triggers, and/or other variables. Let’s say that you want to track clicks of a particular image. That image contains some additional parameter (e.g. “alt”) that you can see by inspecting it with browser’s developer tools (e.g. in Chrome, right-click on an image and choose Inspect Element).

Image alt attribute

What if you wanted to use the value of the “alt” parameter in your tags, triggers and/or variables? You’d need to fetch it somehow.

That’s where an auto-event variable becomes very handy. With it, you could read the value of the “alt” parameter when a user interacts with an HTML element (in this case, that interaction could be a click).

How do you create that variable? Go to GTM > Variables > New > User-defined Variables and choose Auto-event Variable. Enter the settings as I’ve displayed them in the screenshot below.

auto event variable - alt

That’s it. Now you can use this variable in your tags, triggers, and other variables. Just remember that the value of that parameter is accessed when a user interacts with a particular web element.

How to test if the variable was created correctly? Save the variable, then refresh the Preview and Debug mode, and finally, click the element of which “alt” parameter you wish to access. Now, go to Preview and Debug mode’s Variables tab and check if the value is actually fetched correctly.

If you want to learn more about the Auto-event Variable, read this guide. To give you more inspiration, Lunametrics have also posted a guide on how to use so-called “data-” attributes in links and how to track them.

 

#7.2. Using CSS selectors in click triggers

If you’re just starting with Google Tag Manager click tracking, soon you’ll start seeing the limitation of beginner’s skill set. Soon your triggers where Click Classes contains  XXXXX will not be enough. You’ll want more.

You’ll want to track particular set of elements that don’t have any classes or another parameter in common. Let’s go back to our Add To Cart button tracking example. Turned out that one button actually consists of two elements: button text and button background/rectangle.

Different Elements - Different IDs

We were lucky and were able to create a trigger with a single condition (Click ID starts with “AddToCart”). However, sometimes, things might get more complicated when no IDs or useful Click Classes (read: CSS Classes) are available. What if a page element actually consisted of 5 or more elements?

You could create multiple variables for each element and assign those triggers to a single tag but that’s not the way you should do. Your container must be as optimal as possible that’s why we should cope with that by creating a click trigger and using CSS Selectors.

CSS Selectors are patterns that you check for in any given HTML element. In CSS, selectors allow developers to select one or many website elements and assign them a particular style/design. For example, a developer can set that all HTML elements that belong to the class “red-button” should be of red color. This is a very simplified explanation but that’s generally the idea behind it.

CSS selectors can be pretty complex and we can use them in our GTM triggers. To do that, you’ll need to choose a special operator in your trigger conditions. Usually, you probably use contains, equals, matches Regex (ignore case) operators. But this time, we’ll use Matches CSS Selector (or Does not match CSS Selector).

Let’s see how this works in action. We’ll apply CSS selectors to track Add To Cart button clicks (from the chapter No. 4 of this guide). Take a look at the code of that button (in the screenshot below).

Two elements in one button

The button is created with an HTML element called button (with the ID AddToCart) and its direct child is a <span> element that contains the button text. With a single CSS Selector, we could instruct Google Tag Manager that we want to track clicks of an element of which ID is AddToCart and also all we want to track clicks of all its children (descendants).

In GTM, go to Triggers > New > Clicks > All Elements and enter the following settings:

Matches CSS selector

Take note that we’re using Click Element as a variable because we are checking the entire clicked HTML element against our CSS Selector.

#AddToCart CSS selector means that we are interested in clicks of ALL elements that have AddToCart ID (exact match).

A comma means “OR”.

#AddToCart * CSS selector means that we are interested in clicks of ALL the descendant of elements that have AddToCart ID (exact match). In our case, the button text is a direct descendant of the button that has an ID AddToCart. Simo Ahava has published a guide explaining the technique of Wildcard CSS Selectors so go check it out.

It will be quite a challenge to master CSS Selectors for a non-developer but it’s pretty simple to get started and learn at least some very basics. Here are additional guides for you to dig in:

  • CSS Selectors
  • “Matches CSS Selector” Operator In GTM Triggers
  • 10 Useful CSS Selectors

 

Do CSS Selectors in Google Tag Manager look too confusing?  Here’s an idea

I have prepared an Intermediate Google Tag Manager course that gives an introduction to CSS selectors and what role do they play in GTM. Additionally, I share a fun way to learn CSS Selectors.

Enroll in Intermediate Google Tag Manager course

Google Tag Manager Click Tracking: Final Words

In this pretty lengthy guide, I’ve explained the very basics of Google Tag Manager click tracking and what workflow you should follow in order to track clicks properly (complete all the following steps):

  • Have at least one particular trigger enabled on a page. If you plan to track link clicks, then have at least one Just Links trigger enabled on a page (regardless of what are the conditions of that trigger). If you plan to track any element, then All Elements is the way to go.
  • Enable built-in click variables. After the trigger and variables are intact, click the element you wish to track and inspect that event in the GTM Preview and Debug mode. You’ll need to think what variables and condition will you be using in a click trigger.
  • Create a tag that you want to fire when a user clicks a link/ another element.
  • Update the click trigger (if you created a generic click trigger in the first step of the flow) or create a new trigger with the precise conditions and assign it to the trigger(s) you want.

If you want to take your Google Tag Manager click tracking to the next level, consider learning how to use Auto-event Variable and CSS Selectors in GTM. I have given a proper introduction to them in my Intermediate Google Tag Manager course.

Did I miss something about the Google Tag manager click tracking? Do you have any additional questions? Let me know in the comments.

 

 

Julius Fedorovicius
In Google Tag Manager Tips
30 COMMENTS
Chris
  • Sep 21 2018
  • Reply

In terms of 7.2 Simo says to use both: Click Element matches CSS selector div#logo, div#logo *

Does that make a differemce?

    Julius Fedorovicius
    • Sep 21 2018
    • Reply

    Good catch. That's my mistake :) Simo's CSS Selector means that it will track all the clicks of the parent element and also of all the child elements. I'll update my post asap.

Rita
  • Sep 24 2018
  • Reply

May i ask that, i need to track product detail tabs clicks, for example, picture below
https://drive.google.com/open?id=1y9IIoMNvombQZ_8-njtABBwa-hc75OJ8
, there are 5 tabs for this product. Should i use "measuring views of product details "or some other events ?

    Julius Fedorovicius
    • Sep 24 2018
    • Reply

    Hey Rita, I did not quite understand your question. Could you rephrase it?

ramyasree
  • Nov 3 2018
  • Reply

Hi Rita I didn't understand about google tag manager click and tracking please tell briefly like simple method...

Chad
  • Dec 15 2018
  • Reply

Are you aware that your opening headline picture photo, with the white font title phrase "Goo(g)le Tag Manager Click Tracking", needs an additional letter? LOL.. Cheers, mate!

    Julius Fedorovicius
    • Dec 16 2018
    • Reply

    Whoops :) Fixed it. Thanks for the notice!

Steve
  • Jan 11 2019
  • Reply

Excellent article Julius, really helpful.

Silver
  • Feb 14 2019
  • Reply

Hi Julius, this is an awesome article, very helpful to me. Thank you so much

George
  • Mar 5 2019
  • Reply

What about if I want to append button text to a clicked URL (mysite.com) > mysite.com?button-text

PS great article!

    Julius Fedorovicius
    • Mar 7 2019
    • Reply

    Hey,

    This is kind of a strange idea. Why not just track the button text in an event tag?

      Leslie George
      • Mar 7 2019
      • Reply

      Hi Julius,

      The idea is that the button text will be used in a 3rd party platform, not GA. My bad for not being more clear in my comment.

      Here's a string I started in Reddit: https://www.reddit.com/r/GoogleTagManager/comments/axypwe/appending_information_to_an_outbound_link/

        Julius Fedorovicius
        • Mar 11 2019
        • Reply

        Gotcha. Thanks for linking to the Reddit post. I see that Simo has already posted a solution.

Kate
  • Apr 5 2019
  • Reply

This was such a helpful article. Got me up and running with using tags super fast. Thank you!

Pete
  • Apr 18 2019
  • Reply

Very useful article, thank you for that.

One quick question, how can i track a button click but i want gtm to capture the click only if the page loads?
Forexample, someone fills in a form but does not fill in all mandatory fields and so when he clicks on “submit” the page does not laod because he jas to fill in all mandatory fields. If he does fill in all mandatory fields then the page laods after clicking the submit button. I want to track the button only when the page actually laods because then i know that all mandatory fields have been filled in.

Thanks

    Julius Fedorovicius
    • Apr 18 2019
    • Reply

    Hey, you should better check my guide that explains how to specifically track forms with GTM (because it looks like exactly what you're trying to achieve)
    https://www.analyticsmania.com/post/google-tag-manager-form-tracking/

anonymous hehe
  • Apr 26 2019
  • Reply

You are awesome

Alex
  • May 16 2019
  • Reply

Excellent article ... wanted to see if you had any suggestions. On the enterprise intranet we have observed an interesting behavior mostly for certain generation of our users. Where instead of clicking on URL once, they do a double click (Windows style). This results is double event triggering. Any suggestion how to prevent capturing such a scenario?

Thank you!

Brendan Butler
  • May 28 2019
  • Reply

Hi I have a slightly different problem. I have set up multiple event button click tags on a page and they are only firing in a random order. For example the first button of five will never fire first the fourth and final buttton has to be clicked first. Is there aything you can think that would cause this. I haven't done anything different to other times I have done button clicks tracking there are just four similar buttons.
Could it be that the click ids are not different enough. To clarify they are different but have similar elements and have set them as click Id equals.

    Alex
    • May 29 2019
    • Reply

    Could you share trigger configuration for your buttons?

      Brendan Butler
      • May 31 2019
      • Reply

      Hi Alex the trigger configuration for my buttons is Click all elements, some clicks, click Id, equals, and I placed the clickid in here.

        Julius Fedorovicius
        • Jun 15 2019
        • Reply

        You should share a preview and debug mode and provide more information on exact buttons that you are tracking. Such a case can mean that your triggers are not configured well enough of maybe each button consists of multiple html elements that have different IDs and classes.

Shannon
  • Jun 13 2019
  • Reply

How do you track your trigger clicks in Analytics? Can you set up a goal that tracks them? I have been searching so much but cannot find anything to report my triggers to Analytics. You can hook them to conversions in Google Ads, how can I do the same in Analytics? Or can you?

Shannon
  • Jun 13 2019
  • Reply

Good grief right after I post, I find an article that shows how to check your triggers in Analytics! For those that want to check your work!

After opening your reporting view in Google Analytics, select ‘Real-Time’ and then ‘Events’. Since we created an event tag for Google Analytics, we can view the real-time data from our button clicks in this report.

https://www.lovesdata.com/blog/google-tag-manager-button-click-tracking

Usman
  • Aug 4 2019
  • Reply

How can I track Adsense clicks as event in google tag manager ?

Joerg
  • Aug 22 2019
  • Reply

Excellent article for GTM starters in using click triggers!
Many thank, Julius!

Oscar Vera
  • Oct 17 2019
  • Reply

This guide its awesome... In Spanish Lenguage there arent something like this.. REAAAALLLY thanks for this.

(Although my English is not so good :()

From Chile!!!!

Oscar V.

Leonidas Lainis
  • Nov 4 2019
  • Reply

Hello Julius. I read your articles every now and then and I like them. I always learn something new. This time I found out about the Click Text variable, that I saw in one of your screenshots and I had totally forgot it existed. Instead I was using the Click Element, which wasn't exactly what I wanted. Keep it up.

I have two additions to make to the article:

1) It would be wise to mention that someone can press the ESC button on their keyboards to stop redirecting the page, after clicking on the element they want to track, while in GTM Preview mode. Otherwise they may miss the firing tag(s) of the elements if the page changes.

2) It would be even more wise if you included a quick guide about how they can actually track the events in Google Analytics, after implementing them in GTM. I suppose that this is what most people would like to know. For me it was a matter of 2 minutes to create a Google Analytics event, but I understand that other people may find it hard or they don't even know that they should do it. They may think that by creating an event tag you will see a report in Analytics.

Rina Henderson
  • Dec 4 2019
  • Reply

Hi there, I am somewhat new to using GA/GTM as a key function of my current job. A lot of room to learn, and I'm finding your site very useful.

Quick question: I noticed in GTM Preview console, every click is being captured. In left column it just say "Click", and it's any time anyone clicks anywhere on the page.

I'm inheriting the GA/GTM work of other people, so I'm not sure what was setup and why. Is it normal to have every single click anywhere on the page to be reported in preview mode? I think it is also impacting the GA reporting. There's a huge count of the "click" event, and it's just not helpful data.

So, first, is this normal behavior? Second, is there an easy way to find an erroneous / less specific tag or trigger that may be the culprit if this is not desired behavior?

Thank you!

    Julius Fedorovicius
    • Dec 4 2019
    • Reply

    Yes, this is a normal behavior of click triggers. However, the fact that Click is displayed in the preview mode does not mean that the tag will fire because trigger conditions (like Click ID, Page URL, etc. might not be met).

    There is no way to see only those clicks that you want to see.

    P.S. If you are just getting started with GTM and want to cut some corners to learn it faster, you can get some good deals here https://www.analyticsmania.com/courses/

Leave a comment Cancel reply

Your email address will not be published. Required fields are marked *

 

Hi, I'm Julius Fedorovicius and I'm here to help you learn Google Tag Manager and GA (but mostly GTM). Join other 60000+ monthly readers and 12000+ newsletter subscribers in this exciting journey. Read more
Essential resources




Popular articles
  • 🔥 GTM Form Tracking: 7 Effective Methods
  • 🔥 dataLayer.push: The Guide
  • 🔥 GTM vs Google Analytics
  • 🔥 99 Things You Can Do with GTM
  • 🔥 Common GTM Mistakes
  • 🔥 Data Layer: Ultimate Guide
  • 🔥 60+ Custom JavaScripts for GTM
Analytics Mania
  • Google Tag Manager Courses
  • Google Tag Manager Recipes
  • Google Tag Manager Resources
  • Google Tag Manager Community
Follow Analytics Mania
  • Subscribe to newsletter
  • RSS feed
Recent Posts
  • Google Tag Manager Black Friday Sale is Here
  • Google Tag Manager Video Tracking Guide: Beyond Youtube
  • How to Track HTML5 Audio Player with Google Tag Manager and GA
Analytics Mania - Google Tag Manager and Google Analytics Blog | Privacy Policy
Manage Cookie Settings