Google Tag Manager Basics: Links and Clicks



While Google Tag Manager touts itself as a code free alternative to website development, sometimes a knowledge of basic web mechanics (and a little bit of code!) can help make your setup go much easier!

Whether or not you’ve started using the new version of GTM, this post will help explain how to target clicks on specific html elements like links, images, or buttons.

1. Background – HTML Elements

Before getting into Google Tag Manager, it helps to understand what we’re dealing with. In the briefest of descriptions, websites as they appear on our screens are made up of HTML.

Let’s pretend that our kids are going out this year for Halloween, and we’ve dressed them up as little Matt Cutts and Justin Cutronis. We’ll pretend that they’ve gone out and are bringing back bags full of candy.

These candy bars are going to be our HTML Elements!

Matt Cutts Halloween Costumechocolate-bars


The pieces that make up the page, like the links, paragraphs of text, and buttons are called elements.

2. HTML Elements have Attributes

Each element has a list of certain attributes that describe certain parts of it. Let’s examine one of the candy bars that our kids have brought back.

Just by looking at a candy bar, you can guess at certain properties about the bars, like the type of bar or its size.


There may some additional attributes that we’d have to look closely to see, like expiration date or manufacturer.

Then there may be attributes that tell us about where the bars are located, like which bar did we grab first or whose bag they’re inside of.

To recap: some attributes are visible, some are hidden, and some are relational.


The HTML elements each have their own attributes that give us more detail about them. Some of the most common attributes that concern us are the following:

  • ID – a unique identifier commonly placed on elements to assist with web development
  • Classes – Non-unique classifications that affect how the element appears

Certain types of elements have different attributes, for instance: links also have an atrribute that tells us what url is being linked to.

3. Which Items Do We Care About

In the earlier days of the web, we used to mark the items we wanted to track with a little piece of code. Think about us going through our bag of candy and writing our name on the candy bars that we want to eat.


This works well, but quickly becomes unmanageable as we optimize our Halloween routes and amass tons of candy.

Thus, we’ve turned to creating rules to decide which ones we care about. Instead of saying, “I’ve marked all the candy bars that I care about,” we can now says things like, “I only care about Snickers or king size candy bars.”

Clearly this way of identifying candy bars is more scalable than our previous method.


Rather than saying, I’m going to decide which links I care about tracking on an individual basis, we’re able to make rules or triggers using an element’s attributes.

For instance, we can say things like “I want to track all links that end in .pdf” or perhaps something like “I want to track anytime an orange button is clicked!”

4. Listening for All Clicks

In order for these rules to work, we need to check each and every item. In our candy example, we can check each item as we remove them from the bag. So our process would look like this:



In Google Tag Manager, we can do the same thing. Our process will look like the following:


Note, this is where things get a little different between Google Tag Manager Version 1 and Version 2.

Version 1: We need to add an Event Listener Tag on any page that we want to listen for clicks. This is a special type of tag that we can fire on every page. It’s only job is to listen for when things are clicked.
Version 2: We don’t need to add a Listener Tag! When we create a rule that involves a click, GTM will automatically add the listener behind the scenes. We’ll get to the rule shortly.

We also have our choice of listeners, we can use either a Link Click listener or a Click listener.

5. Examining Each Clicked Item

Let’s say there are two people involved in the process, making a lean assembly line to help speed up our candy distribution. One person pulls a candy bar from the bag and places it on the table. They continue to remove candy bars, adding each one in a single-file line.

Meanwhile, the other person works as quickly as possible, looking at each candy bar in order and saying “Is this a Snickers?” As soon as they finish looking at one candy bar, they move onto the next candy bar that was removed from the bag.

In this case, our workflow can be described like the following:

Is the current candy bar’s name equal to Snickers?



Without going into too much technical detail, Google Tag Manager creates the same sort of assembly line. As you click on an HTML element, it saves that item to its own assembly line, called the data layer. The important takeaway is that each click will be processed in the order that it happened.

So instead of the current candy bar, we can say, let’s look at the current clicked item. We can do this using a Macro or Variable, depending on your GTM version.

In GTM, there a number of macros that are already created for us that help us with this process. The {{Click Element}} macro is the current element that we’re looking at, for instance, the current link. If I were to click on a multiple items, it would work through each one just like an assembly line.

From before, we know that this element has certain attributes, like the url. If we want to look at just the url, we can use a different macro to just pull out that specific attribute. That macro would look like {{Click URL}}.

So now, our rule looks like the following:

Does the current link’s url end in .pdf?

Does {{Click URL}} end in .pdf?

If we click on multiple items, each click will be evaluated in the order they were clicked on. We can use the same macro to examine each click.

These macros are called Auto-Event Variables, and can return a number of things out of the box, like: ID, Classes, Target, Text, and URL.

6. Putting It All Together

Here’s our real world application to bring it all together.

  1. Elements are pieces of content on a page, like links or images.
  2. Elements have attributes that we can use to decide if we care about them.
  3. In GTM Version 1, we add a Event Listener Tag to listen for all clicks. In Version 2, this is built in!
  4. We can check each item that comes in using an {{Click Element}} macro.

Once you understand how all the pieces fit together, it makes it much easier to start tracking clicks on various items on your site. The following is a more specific example.

  1. A link on your page may look like this:
  2. In the above case:
    ID equals “brochure-download”
    Classes equals “dl-link orange”
    URL equals “”
    Text equals “Click here!”
  3. We can use auto-event variable macros to get attributes from the current clicked item. For example:
    {{Click ID}}
    {{Click Classes}}
  4. These macros can be used in Rules to determine when we want to fire specific Tags.

7. Common Questions

Q: How can I see the attributes of a certain element?

A: Examine the element using your browser

Most browsers have a built-in feature that allows you to examine certain items. This is a little more difficult, so you may want to reference the Chrome Web Developer Tools guide or the Safari developer tool guide. In Chrome, you can right-click on a link and select “Inspect Element.” This will highlight the item in the Elements tab.


After you’ve selected an HTML element, you can look at the Properties tab to see the full list of attributes for that element.


Q: What if there isn’t a distinguishing attribute that I can use?

A: Look for relational attributes or add your own!

Now you’re in a bit of a bind. You can look to the element’s parent or children items (relational attributes), or you can add a unique ID or class to the element in order to make it distinguishable. Consider using custom data attributes!

Q: What if there isn’t an auto-event variable that I can use?

A: You can use a data layer variable macro instead!

The macro {{Click Element}} is the same thing as a data layer variable macro named “gtm.element.” If there’s something that’s not built into GTM, like the ID of an element’s parent, you can get to that using data layer variable that is equal to “” This path can be found by following the chain in the Properties tab and expanding different attributes.


Jon Meck is our Director of Marketing & Training, promoting our services and trainings to the world. He has a jack-of-all-trades background, working for companies large and small in social media, website design and maintenance, and analytics. He is an Excel enthusiast, he loves efficiency, and he is strong proponent of the “Work Smarter, Not Harder” mantra. Jon is also the author of two number puzzle books.

  • Les

    Thanks for the post Jon. Lucille Ball is the perfect example to use (I think). This will help many neophytes figure out GTM.

  • Andy


    I’ve read this article but still have a question in practice:

    I want to track those user whoever logged in once in my website.

    Ex: One of members logged in yesterday, and I want to track him/she as a member even if he/she do not log in today.

    Many thanks,

  • jimmy john

    This article is very confusing with all these stupid analogies

    • Sorry it didn’t connect for you! Analogies don’t work for everyone. Good luck with Google Tag Manager!

  • Jon,

    Thanks for the gtm primer! Once you have tracked the events what does one typically do with that info?

  • Mike

    I like your analogies thanks! One thing I can’t get my head around is what do you do if your Click ID and you Click Classes are empty , “,?

    • Hi Mike – well that gets a little more complicated.

      You need to find SOMETHING that makes this particular link unique enough to track. By default, you can turn on Variables for Click Text, Click URL, Click Classes, Click ID, or Click Target. If none of those options provide you with enough information to target a specific link, there are few other, more challenging, options.

      1. Update the links on your website. This is likely your best bet, though also not the easiest.

      2. Use a Click Trigger with the CSS selector operator. This requires some CSS knowledge, but you can target links inside of other objects on the page, etc. You can set up a condition in the trigger that says “Click Element – matches CSS selector – “.navigation a”

      3. You can get really granular with any property/attribute of the link by using a Data Layer Variable that starts with gtm.element. You need to have a good grasp of the DOM and how to look at these properties though.

      I hope this helps!


Contact Us.

Follow Us



We'll get back to you
in ONE business day.
Our Locations
THE FOUNDRY [map] LunaMetrics

24 S. 18th Street
Suite 100

Pittsburgh, PA 15203


4115 N. Ravenswood
Suite 101
Chicago, IL 60613


2100 Manchester Rd.
Building C, Suite 1750
Wheaton, IL 60187