How To: Track Link and Banner Clicks with Google Tag Manager

TL;DR:
Google Tag Manager can track clicks within a specific area of a page without recording every link click across the site. In this example, I use a Just Links trigger and CSS descendant selector to track links and banners within the main content area of a homepage, while excluding the header, navigation and footer. The clicked URL and other useful information can then be sent to GA4 as event parameters.

Why I wanted to track clicks within a specific part of the page

Google Tag Manager makes it relatively straightforward to track link clicks, but sometimes you don’t want to track every link on a page.

In this example, a client wanted to know which links and banners within the main content area of their homepage were receiving clicks, while excluding links in the header, navigation and footer.

The solution is to use a GTM Just Links trigger combined with a CSS descendant selector. This allows us to track clicks on links contained within a specific <div>, <main> or other HTML element.

In this guide I’ll show you how I set up the trigger, restricted it to the homepage and sent the clicked link through to Google Analytics.

This type of engagement tracking can provide much more useful information than page views alone. Similar techniques can also be used to track internal link clicks elsewhere on a website.

Identify the area containing the links you want to track

Most website templates divide a page into several broad areas:

• <header> for navigation, logos and other header links
• <main> for the primary content of the page
• <footer> for footer navigation and other supporting links

In this case, I only wanted to track links within the main content. That meant I first needed to identify the HTML element containing those links.

You can do this using your browser’s Inspect tool.

On my homepage, the main content area had the ID:

maincontent

This is also a convention you’ll find in some platforms and templates, including Magento.

Create the link click trigger in Google Tag Manager

Next, create a new trigger in Google Tag Manager and select Click – Just Links.

We only want the trigger to fire for some link clicks, specifically links contained within #maincontent.

This initially had me stumped. I assumed I could use matches CSS selector with:

#maincontent

That didn’t work as expected because it targets the maincontent element itself rather than the elements contained within it.

After some experimenting, I asked GTM expert Simon Ahava, who pointed me towards using a CSS descendant selector.

As Simon explains in his Wildcard CSS Selectors article, adding * allows the selector to match descendants of the preceding element.

In my case, the selector becomes:

#maincontent, #maincontent *

This matches the #maincontent element and elements contained within it.

Because I only wanted to track these clicks on the homepage, I added a second trigger condition:

Page Path → equals → /

Track the clicked link as a GA4 event

Once the trigger has been created, you need a Google Analytics event tag to record the interaction.

The important piece of information here is the Click URL. GTM’s built-in {{Click URL}} variable contains the destination URL of the link that was clicked, allowing you to see which links or banners within the main content are attracting engagement.

You can also pass additional information such as {{Click Text}} if you want to identify the text associated with the link.

In this example, I’ve created a GA4 event called Home Page Link Click and added the event parameter url, using GTM’s built-in {{Click URL}} variable as the value.

This means that whenever the trigger conditions are met, GA4 records the link click along with the URL that was clicked.

The tag uses the Click - Home Page Internal Link trigger created above, so it only fires for the links within the main content area of the homepage rather than every link on the site.

Test the link click tracking

Before publishing the tag, test it using GTM Preview mode.

On my own homepage, for example, I could use this setup to measure which of the links and banners within the main content attract the most clicks, including whether visitors continue through to individual service pages.

Click several of the links you want to track and confirm that the event fires. I’d also click links in the header and footer to make sure the tag doesn’t fire outside the #maincontent area.

That second test is important. We’re not simply trying to prove that GTM can detect a link click, we’re checking that the CSS selector is correctly restricting the trigger to the part of the page we actually want to measure.

Check the link click event in GA4

Once the GTM tag is firing correctly, check that the event is also being received by GA4.

You can use DebugView while testing to confirm that the main_content_link_click event has arrived and inspect the event parameters to make sure the correct link_url and link_text values are being sent.

If the GTM tag fires but the event doesn’t appear in GA4, I’ve covered some of the common causes in my guide to GTM events not showing in Google Analytics.

What can you learn from link and banner click tracking?

Tracking clicks within a specific content area gives you a much clearer picture of which links, banners and calls to action are actually attracting attention.

The same approach isn’t limited to a homepage or an element called #maincontent. You can adapt the CSS selector and trigger conditions to track links within other containers, sections or components across a website.

That’s what makes this setup useful. Instead of recording every click indiscriminately, you can measure engagement with the specific areas of a page that matter to you.

If you need more customised click, event or interaction tracking, this is the sort of implementation I regularly work on as a Google Tag Manager consultant and as part of my analytics and tracking consultancy.

---