GTM Click Tracking: Buttons, Links, and Dynamic Elements

You redesigned your pricing page. Conversions went up. But which element actually drove the improvement? Did users click the “Start Free Trial” button or the “See Plans” link? Did they engage with the feature comparison table or the testimonial carousel?

Click tracking answers these questions. Instead of guessing which elements drive action, you measure it. GTM makes this possible without touching your site’s code — once you understand how click triggers work.

How GTM Click Tracking Works

When a user clicks anything on your page, the browser fires a click event on the DOM element they clicked. GTM listens for these events and evaluates them against your triggers.

GTM provides two types of click triggers:

All Elements Click — Fires on any click, anywhere on the page. Buttons, text, images, divs, empty space — everything.

Just Links Click — Only fires when a user clicks an anchor (<a>) element or an element inside an anchor. More specific, less noise.

For most click tracking, you’ll use All Elements Click with conditions to narrow it to the specific elements you care about.

Setting Up Basic Button Click Tracking

Step 1: Enable Built-In Click Variables

GTM has built-in click variables that are disabled by default:

1. GTM → Variables → Configure (Built-In Variables)
2. Enable under Clicks:
   • Click Element — The DOM element that was clicked
   • Click Classes — CSS classes on the element
   • Click ID — HTML id attribute
   • Click URL — For links, the href value
   • Click Text — The visible text of the element

For a deeper dive into all GTM variable types, see our GTM variables guide.

Step 2: Identify Your Target Element

Before creating the trigger, you need to know how to identify the element in the DOM. Open Chrome DevTools:

1. Right-click the button or link → Inspect
2. Note the element’s attributes:
   • id="cta-button" → Use Click ID
   • class="btn btn-primary signup-cta" → Use Click Classes
   • Text “Start Free Trial” → Use Click Text
   • href="/signup" → Use Click URL

Best identifier hierarchy:

1. ID (most reliable — IDs should be unique per page)
2. Custom data attribute (e.g., data-track="signup-cta")
3. CSS class (reliable if specific enough)
4. Click text (fragile — breaks if copy changes)
5. Click URL (for links only)

Step 3: Create the Trigger

1. GTM → Triggers → New
2. Trigger type: All Elements (for buttons) or Just Links (for anchor tags)
3. This trigger fires on: Some Clicks
4. Add condition:
   • Click ID → equals → cta-button
   • Or: Click Classes → contains → signup-cta
   • Or: Click Text → equals → Start Free Trial

Name it: Trigger - Click - Signup CTA

Step 4: Create the GA4 Event Tag

1. GTM → Tags → New
2. Tag type: Google Analytics: GA4 Event
3. Configuration:
   • Event Name: cta_click
   • Event Parameters:
     • button_text: {{Click Text}}
     • button_location: {{Page Path}}
     • button_classes: {{Click Classes}}
4. Trigger: Your click trigger from Step 3

Name it: GA4 - CTA Click

Step 5: Test in Preview Mode

1. Click Preview in GTM
2. Click the target button on your site
3. In the GTM debug panel:
   • Look for a “Click” event in the timeline
   • Click it → check the “Variables” tab to see all click variable values
   • Check the “Tags Fired” section to confirm your tag fired

If the trigger isn’t firing, compare the variable values you see in Preview Mode against your trigger conditions. A common issue: you set Click Text to “Start Free Trial” but the actual text includes extra whitespace or is in a different case.

Tracking Outbound Link Clicks

Outbound links take users away from your site. Tracking them tells you which external resources users care about and which partners drive engagement.

Trigger Setup

1. Trigger type: Just Links
2. Check: Wait for Tags (important — gives GTM time to fire the tag before the browser navigates away)
3. Set max wait time: 2000ms
4. This trigger fires on: Some Link Clicks
5. Condition: Click URL → does not contain → yoursite.com

This fires on any link that goes to a domain other than yours.

Tag Setup

Event Name: outbound_click
Parameters:
  - link_url: {{Click URL}}
  - link_text: {{Click Text}}
  - page_path: {{Page Path}}

Why “Wait for Tags” Matters

When a user clicks an outbound link, the browser immediately starts navigating to the new page. If GTM doesn’t fire the tag before navigation begins, the event is lost. “Wait for Tags” tells the browser to pause navigation briefly, giving GTM time to send the hit.

Caution: Setting this too high (over 2000ms) creates a noticeable delay for users. Keep it at 2000ms or lower.

Tracking Clicks on Dynamic (AJAX) Elements

Modern websites load content dynamically — product cards that appear after filtering, modals that pop up on button click, infinite scroll content. These elements don’t exist in the DOM when the page first loads, which means standard click triggers might not work.

The Problem

GTM’s click listener attaches to the document level and uses event delegation, so it actually works with dynamically loaded elements in most cases. The issue is usually that your trigger conditions don’t match the dynamically loaded element’s attributes.

Solution 1: Use CSS Selectors with matches CSS selector

If Click ID and Click Classes don’t uniquely identify the element, use a CSS selector condition:

1. In your trigger condition, choose: Click Element → matches CSS selector
2. Enter a CSS selector:
   • button[data-action="add-to-cart"] — Buttons with a specific data attribute
   • .product-card .buy-button — Buy buttons inside product cards
   • #modal-signup form button[type="submit"] — Submit button in a specific modal

CSS selectors work regardless of when the element was added to the DOM.

Solution 2: Custom Data Attributes

Ask your developers to add data-track attributes to important elements:

<button data-track="add-to-cart" data-product-id="SKU123">Add to Cart</button>

Then in GTM:

1. Create a trigger: Click Element → matches CSS selector → [data-track="add-to-cart"]
2. Create an Auto-Event Variable to read data-product-id:
   • Variable type: Auto-Event Variable
   • Component: Element Attribute
   • Attribute Name: data-product-id

Now your GA4 event includes both the action and the product ID.

Solution 3: Custom JavaScript Variable for Complex Cases

When the clicked element is deeply nested (e.g., clicking an icon inside a button inside a card), the Click Element might be the icon, not the button. Use a JavaScript variable to traverse up the DOM:

function() {
  var el = {{Click Element}};
  // Walk up the DOM tree to find the parent with the data attribute
  while (el && !el.getAttribute('data-track')) {
    el = el.parentElement;
  }
  return el ? el.getAttribute('data-track') : null;
}

This handles the common case where clicks on child elements (icons, spans inside buttons) don’t directly carry the attributes you’re looking for.

Click Tracking Recipes

Recipe 1: Track All CTA Buttons

If your CTAs share a common class (e.g., cta-button):

Trigger: All Elements, Click Classes contains cta-button Tag: GA4 event cta_click with button_text and page_path

Recipe 2: Track File Downloads

Trigger: Just Links, Click URL matches RegEx \.(pdf|zip|doc|docx|xls|xlsx|csv)$ Tag: GA4 event file_download with file_url: {{Click URL}} and file_name: {{Click Text}}

Recipe 3: Track Phone Number Clicks

Trigger: Just Links, Click URL starts with tel: Tag: GA4 event phone_click with phone_number: {{Click URL}}

Recipe 4: Track Email Link Clicks

Trigger: Just Links, Click URL starts with mailto: Tag: GA4 event email_click with email: {{Click URL}}

Recipe 5: Track Social Share Buttons

Trigger: All Elements, Click Element matches CSS selector .social-share a or [data-share] Tag: GA4 event social_share with platform: {{Click Text}} and shared_page: {{Page Path}}

Recipe 6: Track Navigation Menu Clicks

Trigger: All Elements, Click Element matches CSS selector nav a Tag: GA4 event nav_click with link_text: {{Click Text}} and link_url: {{Click URL}}

Understanding which navigation items get clicked helps you optimize your site’s information architecture.

Handling Click Tracking on SPAs (Single Page Applications)

Single Page Applications (React, Vue, Angular) don’t reload the page on navigation. This creates challenges:

1. History Change events replace Page View events in GTM
2. DOM elements may not persist between virtual page loads
3. Page Path may not update when the URL changes

SPA Click Tracking Tips

• Use data-track attributes that persist across route changes
• Ensure your GA4 event tags read {{Page Path}} at fire time (not at page load time)
• Test click tracking after navigating between SPA routes — triggers that work on initial load sometimes fail after navigation

If you’re using a data layer for your SPA, push click events directly from your application code rather than relying solely on DOM-based GTM triggers.

Debugging Click Tracking Issues

The click fires but the tag doesn’t

Check: Your trigger conditions. In GTM Preview Mode, click the element and look at the Variables tab. Compare every variable value against your trigger condition. Common mismatches:

• Extra whitespace in Click Text
• Case sensitivity (Sign Up vs Sign up)
• Click Element is a child element, not the parent you targeted

The tag fires but GA4 doesn’t show the event

Check: GA4 configuration. Open DebugView and verify the event arrives. If it doesn’t:

• Measurement ID is wrong
• Consent Mode is blocking the hit
• The event name has a typo

Clicks fire multiple times

Check: Is the trigger too broad? An All Elements trigger without conditions fires on every click. Is there event bubbling causing multiple elements to match? Add more specific conditions to your trigger.

”Wait for Tags” causes visible delay on links

Fix: Reduce the wait time to 1000ms. If tags still don’t fire in time, switch to a Beacon transport method which sends data without blocking navigation. GA4 uses Beacon by default, so this is mainly a concern with third-party tags.

Form Click Tracking vs. Form Submission Tracking

A common mistake is tracking clicks on form submit buttons as a proxy for form submissions. This misses:

• Form submissions via Enter key
• Forms with validation errors (click happens but submission doesn’t)
• Programmatic form submissions

For forms, use GTM’s Form Submission trigger instead of click tracking. See our GTM form tracking guide for the correct approach.

Check Your Click Tracking Setup

Click tracking is foundational for understanding user behavior, but it’s only as good as your GTM configuration. A single misconfigured trigger means silent data loss.

Run a free scan on your site to verify your GTM tags are firing correctly, your GA4 events are being received, and your click tracking isn’t missing critical user interactions.