How to Track Button Clicks in GA4 with Google Tag Manager

Tracking button clicks tells you which CTAs are working and which are being ignored. Here is how to set it up in GTM without touching your website code.

Step 1: Enable Click Variables in GTM

1. Go to Variables > Configure
2. Enable all built-in Click variables:
3. - Click Element
4. - Click Classes
5. - Click ID
6. - Click Target
7. - Click URL
8. - Click Text

These variables capture data about whatever the user clicks.

Step 2: Create a Click Trigger

Option A: Track All Clicks (for discovery)

1. Triggers > New > Click - All Elements
2. Fire on: All Clicks
3. Save

Use this temporarily with GTM Preview to see what click data is available, then narrow it down.

Option B: Track Specific Buttons by CSS Selector

1. Triggers > New > Click - All Elements
2. Fire on: Some Clicks
3. Condition: Click Element > matches CSS selector > `button.cta-primary`

Common CSS selectors: - button.cta-primary — buttons with class "cta-primary" - a[href="/pricing"] — links to the pricing page - #signup-btn — element with ID "signup-btn" - [data-track="cta"] — elements with a data attribute

Option C: Track Links to Specific URLs

1. Triggers > New > Click - Just Links
2. Fire on: Some Link Clicks
3. Condition: Click URL > contains > `/demo`

Step 3: Create the GA4 Event Tag

1. Tags > New > GA4 Event
2. Event name: `cta_click`
3. Parameters:
4. - `button_text`: `{{Click Text}}`
5. - `button_url`: `{{Click URL}}`
6. - `page_path`: `{{Page Path}}`
7. Trigger: your click trigger from Step 2

Step 4: Test in Preview Mode

1. Click Preview in GTM
2. Open your site
3. Click the button you are tracking
4. In the Tag Assistant panel, verify:
5. - Your trigger fired
6. - Your GA4 tag fired
7. - Event parameters have the correct values
8. Check GA4 DebugView for the `cta_click` event

Advanced: Data Attributes for Clean Tracking

Instead of relying on CSS classes (which change during redesigns), add data attributes to your HTML:

<button data-track="cta" data-track-name="Start Trial" data-track-location="hero">
  Start your trial
</button>
html

In GTM, create a Data Layer Variable or DOM Element variable to read data-track-name and use it as a parameter.

This approach survives CSS refactors and gives you explicit control over tracking labels.

Making It a Key Event

If a button click represents a meaningful business action (e.g., "Book a Demo" button), mark it as a key event:

1. GA4 Admin > Key events > New key event
2. Event name: `cta_click`

Or create a filtered key event if you only want specific CTAs: 1. Admin > Events > Create event 2. Name: demo_cta_click 3. Conditions: event_name equals cta_click AND button_text contains Demo

Not sure if your click tracking is working? Audit your GA4 setup →