Updated: January 1st, 2022.
Note: this blog post contains Google Analytics 4 examples. If you are looking for Universal Analytics examples, click here.
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, menu link clicks, etc. However, what I’ve noticed among GTM beginners is that they do not fully realize the flow of click tracking configuration in Google Tag Manager and why is it necessary to complete one thing or another.
Moreover, intermediate Google Tag Manager users are not always aware of some more advanced 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 the 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 link click tracking.
So if you find yourself being a “video-content” person, take a look at my course.
Table of Contents
+ Show 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. Menu link click tracking
Step 1. Enable a generic link click trigger in GTM
Step 2. Enable built-in click Variables
Step 3. Create a tag
Step 4. Update the trigger
Step 5. Test (in GTM and GA)
#4.2. Configure a Google Analytics conversion based on a click event
#5. Google Tag Manager button click tracking
Step 1. Create a generic All Elements click trigger
Step 2. Enable click variables in GTM
Step 3. Create a Tag
Step 4. Create/update the click trigger
Step 5. Test
#6. Going deeper with Google Tag Manager click tracking
#6.1. Get additional click data with the Auto-event variable
#6.2. Using CSS selectors in click triggers
Google Tag Manager Click Tracking: Final Words
Video tutorial
If you prefer video content, take a look at this video on my Youtube channel.
#1. Why is click tracking 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 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))
File link clicks (e.g. when someone clicks on a link that downloads/opens a PDF file)
Menu link clicks
Unlike Universal Analytics (GA3), Google Analytics is capable of tracking a bunch of events automatically. However, it does not cover all possible scenarios, therefore, it’s still important that you learn this topic.
GA4 can automatically track outbound link clicks and file downloads. Consequently, in this blog post, I will skip them and focus on other clicks.
#2. Two types of click triggers
There are two types of click triggers in Google Tag Manager: All elements and Just links.
As their titles imply, All elements trigger tracks clicks of any element (link, image, button, etc.), while Just links trigger tracks link clicks only.
#3. What’s the plan?
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.
Here is the process of a proper Google Tag Manager click tracking setup:
Step 0 is to decide what you want to track, links, or any elements. Then:
Step 1. Have at least one click trigger enabled on the page (the type of a trigger depends on step 0).
Step 2. Enable all click-related built-in variables
Step 3. Create a tag (e.g., Google Analytics 4 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, Container Loaded, DOM Ready, and Window Loaded.
In the screenshot below, please ignore the Universal Analytics pageview tag. It is from another setup.
Now, click any element on your website (not in the GTM debug panel) and see what happens on the left side of the panel.
If you don’t have GA4 installed and this is your new Google Tag Manager container, you will see nothing.
If you see some clicks, it means that you:
have at least one Just Links or All Element Clicks GTM trigger activated on a page
or have “File download” or “Outbound links” tracking enabled in your Enhanced Measurement Settings.
Anyway, I will presume that you don’t see any information related to clicks in the preview mode. This happens because, by default, Google Tag Manager does not track clicks. You need to configure it by yourself. Let’s start, shall we?
Remember that 5-step workflow from the previous chapter? Well, 6-step, if you count the step 0. In this guide, I’ll refer to 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 about which link clicks should we track first. How about menu link clicks?
#4.1. How to track menu link clicks
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 the menu link click tracking. Let’s proceed to step 1.
Step 1. Enable a 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 pushes 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 is 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 the link click auto-event listener? – you may ask. The answer is by having at least one link click trigger enabled on a page.
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).
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), Google Tag Manager 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 (by clicking the Preview button in the GTM interface again). Go to the page where you wish to track links. Click any link on a page.
Take a closer look at the Preview and Debug panel’s left side. You’ll see a new event, Link Click. 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 Link Click event to the Data Layer, and, therefore, it became visible in the debug console.
If you don’t see this event, make sure you have refreshed the Preview and Debug mode (by clicking the Preview button in the GTM interface).
To 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.
Step 2. Enable built-in Click Variables
In order to create more precise triggers, we need one more ingredient, variables. What are those?
They are little pieces of information that 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 link equals to “main-cta-link”).
Thanks to GTM Preview and Debug mode, we can see what variables are available at every event. Click Link Click event and go to the Variables tab of the Preview mode. Keep looking for anything related to clicks. If you’re working on a new container, you probably won’t find anything.
Don’t worry, that’s expected. Now go to the Data Layer tab o the preview mode (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 Google Tag Manager 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, including Click ID, Click URL, etc.
After that, refresh the preview mode (by clicking the Preview button once again).
Then go to your website and click any of the menu links. Actually, click at least two of them. Return to the preview mode and you should see Link Click events in the preview mode. Click the first Link Click event and go to the Variables tab of the preview mode.
Then click on the second Link Click event. I am currently looking for some variable that I could use to distinguish a menu link click. I don’t want to fire my GA4 event tag on any link click. I want to fire it precisely on a menu link click.
After taking a closer look, I see that both menu links contain the same Click Classes value, site-nav__link site-nav__link–main. By the way, nav means “navigation” in this context. Great! I will use this in my Just Links trigger.
Important: in your case, the classes might be different. Maybe you won’t even have any classes at all. Then you should be looking for other variables (or go more advanced with CSS selectors).
Step 3. Create a tag
Now, it’s time to create a Google Analytics 4 event tag. Go to Tags > New > Google Analytics: GA4 Event. Select your existing GA 4 Configuration tag and then enter the event name. Its value is up to you. Any of the following options are perfectly fine:
menu_click
menu
menu_item_click
menu click
etc.
These are just some of the examples. Since we are working with a custom event, we can name it whatever we want (as long as we follow the limitations of name length, for example).
In my case, I used menu_click event name. But this time, sending just the event name is not very useful. You’d probably want to know which exact menu items are clicked more often. How about we also send the name of the menu item and the URL?
We could do that by sending additional event parameters. Even though you could use parameters that are already mentioned in the documentation of the Enhanced Measurement (like link_url and link_text), let’s create two custom parameters (because I just want to show you how to configure them).
I am going to pass two parameters, menu_item_url and menu_item_name. I made these parameter names up and you can do it too. That’s what the flexibility of the data model offers.
To send custom parameters, you must expand the Event Parameters section in the Google Analytics 4 event tag and then click Add Row.
Enter the name of the first parameter. In my case, that is menu_item_url. In the Value field, I will insert a variable that returns a clicked URL. Luckily, GTM already offers such a variable, it’s called Click URL. Click the Insert Variable button and then select the {{Click URL}} variable.
Let’s add another parameter, menu_item_name. For that purpose, GTM offers another built-in variable, {{Click Text}}. Insert it as well. Since visitors of your website can translate your page, {{Click Text}} value will also change, hence you will see a more diverse list of collected values in your GA4 reports.
If you want to send more parameters, you are free to do that. You can send up to 25 custom parameters with a single event.
Step 4. Update the click 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 menu links.
In Step 2, we have already identified the main characteristic of the menu link. Its Click Classes value is site-nav__link site-nav__link–main.
In Google Tag Manager, go to Triggers and find the trigger that you have created in step 1. We’ll edit it and add a condition: Click Classes contains site-nav__link–main
Also, change its name. Save the trigger. Assign it to the GA4 tag. You can do that by clicking anywhere on the Triggering section of the tag and then select that Just Links trigger.
Save the tag.
Step 5. Test
Refresh the GTM Preview mode (by clicking the Preview button in the GTM interface) and click a couple of your menu items. Go back to the Preview mode and click those Link Click events. Check if the GA4 event tags for Menu Link Clicks have fired.
Now, you will need to go to Google Analytics 4 and check the DebugView. You will learn more about that in this blog post.
IMPORTANT: even though you will see your custom parameters in Real-time reports and DebugView in GA4, you will not be able to see them in other GA4reports. Unless you register those parameters as custom dimensions in Google Analytics.
In GA4, you will need to go to Custom Definitions (on the left sidebar) > Custom Dimensions > Create Custom Dimension. Here you will need to register both parameters (menu_item_name and menu_item_url). Here’s one of the examples:
It’s important that the scope of both dimensions is “event”. After you register these dimensions, you will start seeing them in the reports (within 24 hours). Learn more about custom dimensions in GA4 here.
After everything is tested, publish your GTM container by clicking the SUBMIT button in the top-right corner of the Google Tag Manager interface.
#4.2. Create a Google Analytics conversion based on a click event
Some clicks might be more important to your business than others, thus they should be configured in Google Analytics 4 as conversions. If you want to learn more about conversions (previously known as “goals”), here is a blog post (+ video) on how to do that.
#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 that are coded to visually look like buttons. 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.
So, how do you track a click of a button?
Step 1. Create an 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.
This means that the All elements click auto-event listener has been enabled and all clicks are now being tracked.
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.
Luckily, all the built-in click variables were already enabled in one of the previous chapters (about menu link clicks). Just links and All elements triggers share the same set of click variables.
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.
This button has no link, therefore, Just Links trigger will not help. We’ll have to use an All Elements trigger.
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 GA4 event.
Enter the following settings:
For now, save this tag without a trigger. Let’s move on.
Step 4. 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.
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.
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.
That is also visible in the screenshot below:
All elements click trigger works pretty straightforward here. It tracks the 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.
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:
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, “CSS 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.
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.
Then go to the DebugView of GA4 and check if you see the incoming data.
#6. 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).
#6.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).
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.
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.
#6.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.
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 can use to 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. 5 of this guide). Take a look at the code of that button (in the screenshot below).
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:
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 descendants 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 confusing? Here’s an idea
I have prepared an Intermediate Google Tag Manager course that gives an introduction to CSS selectors, what role do they play in GTM, and how to use them. Additionally, I share a quicker way of how to learn CSS Selectors.
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 about what variables and conditions 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. You can do that 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.
The post Google Tag Manager Click Tracking: All You Need to Know appeared first on Analytics Mania.
Read MoreAnalytics Mania
