Tracking Clicks on Website Elements Using Google Tag Manager: Advanced Guide

The three main ways users interact with your website are page views, scrolling, and element clicks. I’ve already covered the first two in previous articles. Today, let’s focus on the third.

In Google Tag Manager, clicks are divided into two types:

• All Elements – allows you to track clicks on any site elements, including links
• Just Links – only tracks clicks on links

At this point, you may be wondering: why use the Just Links trigger if All Elements already exists?

The answer lies in how each trigger works. Let’s walk through an example:

As you can see, there are three levels in the code:

• A button with the class button:
  <div class="button">
• A link that navigates to https://www.example.com/example;
  <a href="https://www.example.com/example">
• And the text "Add to cart":
  <span>Add to cart</span>

If a user clicks on the "Add to cart" text, each trigger behaves differently:

• Just Links climbs up the DOM tree until it finds an <a> element — in this case, it goes from <span> to <a>.
• All Elements stops at the exact element clicked — here, it’s <span>.

Because these triggers behave quite differently, this material will be split into two articles — one for each trigger type. Let’s start with the All Elements trigger. The second article is available here.

• All Elements Trigger Setup
• Built-in Click Variables
• Creating a Trigger for a Specific Click
• Setting Up an Event Tag for Google Analytics 4
• Using CSS Selectors to Track Clicks
• Collecting Extra Info with Auto-Event Variables
• Instead of conclusion

Setting Up the All Elements Trigger

First, go to the Triggers section in GTM and create a new All Elements trigger:

As you can see, this trigger type has no advanced settings. The only thing you can define is the additional trigger conditions, but options are very limited — like specifying which pages to track clicks on. That’s not enough. Users perform many different types of clicks, and we typically care about only a few specific ones.

The trigger already pushes the necessary info to the dataLayer. All we need to do is extract it.

The easiest way to do this is to use GTM’s built-in Click variables.

Built-in Click Variables

All additional info about the click is stored in the following variables:

• Click Element – returns the HTML element where the click occurred (i.e., gtm.element from the dataLayer)
• Click Classes – returns the element’s class (gtm.elementClasses)
• Click ID – returns the element’s ID attribute (gtm.elementId)
• Click Target – returns the target attribute (gtm.elementTarget)
• Click URL – returns the href or action attribute (gtm.elementUrl)
• Click Text – returns the textContent or innerText of the clicked element (gtm.elementText)

You can enable these variables in the Built-In Variables section of GTM:

Creating a Trigger for a Specific Element

Now that the click data is available in variables, we can create triggers for specific elements. For example, here’s a trigger for a click on an element with the ID searchsubmit:

Or this one, which fires on clicks to an element with the class entry-button:

You can get the required class or ID info by clicking the element and checking the Data Layer tab in GTM preview mode:

Or directly in the page source:

Right-click the element and select Inspect (in Chrome) to view the HTML.

Setting Up an Event Tag for Google Analytics 4

o send click data to GA4, create a standard event tag. For example:

Using CSS Selectors to Track Clicks

Sometimes, it’s hard to isolate an element by class or ID — especially if there are multiple elements with the same attributes. In such cases, CSS selectors are the way to go.

Every element on a page has a unique CSS selector, allowing you to target it individually.

You have two options:

• Write the selector manually — useful if you're targeting a group of elements
• Copy the selector using your browser’s Dev Tools — this gives you a unique selector for one specific element

Let’s focus on the second method.

Right-click the desired element and choose Inspect:

Then right-click the highlighted code and select Copy > Copy selector:

You’ll see the element highlighted on the page.

Now go back to your trigger and add a condition like this:

Click Element matches CSS selector <your-selector>

Collecting Additional Data with Auto-Event Variables

Gathering data from attributes like id, class, href, or action is great — but what if you need to extract other attributes like alt?

That’s where the Auto-Event Variable (Змінна автоматичної події) comes in:

You can use it to capture the value of any attribute.

Instead of conclusion

In this article, I’ve done my best to explain how to track element clicks using GTM. If you still have questions, drop them in the comments. And don’t miss the second part of this series — it covers tracking link clicks specifically.

If you enjoyed this content, subscribe to my LinkedIn page.

I also run a LinkedIn newsletter with fresh analytics updates every two weeks — here’s the link to join.