How to Track Any Button Click in Google Tag Manager (Step-by-Step Guide)

Hey All!

This week, we'll talk about how to create click triggers in Google Tag Manager in simple steps for non-technical users.

I don't think you'll need to learn/read anything else to learn about click triggers after finishing this quick guide, there's a video version of the article that you can also find at the end of the article.

Before diving into this, I'd really appreciate it if you could do the following if you like my content:

1. Like & Share this on Linkedin (you'll find it on my profile if you're viewing this from your email)
2. Subscribe to my newsletter: https://subscribepage.io/aOcEmV
3. Subscribe to my YouTube channel: https://www.youtube.com/@AnalyticsWithAhmed

Scroll to the end of the article if you prefer a video version of this article

Step 1: Create a Click Trigger in GTM

1. Open Google Tag Manager and navigate to the Triggers tab.
2. Click New and select Click – All Elements as the trigger type.
3. Choose Some Clicks to refine when the trigger should fire.
4. Set up the condition by selecting Click Element and choosing matches CSS selector.
5. Now, you need the CSS selector for the button you want to track.

Step 2: Find the Correct CSS Selector (The Main Point of this article)

To make sure your trigger fires only for the right button:

1. Go to your website and find the button you want to track.
2. Right-click the button/object you'd like to be the trigger and select Inspect to open Chrome Developer Tools.
3. The Elements panel will highlight the button’s HTML code.
4. Identify a unique class for the button, you should copy any value from the class without the spacing. (e.g., if you see the following "class= button --button" you can get one of them without the space "button" or "--button").
5. Press command/CTRL F and past the class value you copied from the above step, add a "." before it, and make sure there's only 1 value for the class you've copied.
6. If there's more than 1 value, look at the class above it and past it in the search bar, before the value you already added, also add a dot before it

For example, if the button has the class banner__buttons and the above class is button--primary, your CSS selector in GTM will be:

.banner__buttons .button--primary        

Step 3: Apply the CSS Selector to Your GTM Trigger

1. Go back to Google Tag Manager and paste the CSS selector in the Trigger Conditions.
2. Example condition: Click Element matches CSS selector .btn-primary
3. Save the trigger.

Now, this trigger will fire only when a user clicks this specific button.

Step 4: Test Your Click Tracking Setup

1. Assign the trigger to any dummy tag or real.
2. Click Preview in GTM to enter Debug Mode.
3. Open your website and click the button you’re tracking.
4. In GTM’s Debug Panel, check if your trigger is fired.

If the event doesn’t appear, double-check:

• The CSS Selector is correct.
• The Trigger conditions match the button’s attributes.

Want a video version? Here you go!

Don't Forget To Subscribe To The Channel

Final Thoughts

By following this method, you can track any button click accurately in Google Tag Manager without relying on generic triggers that often fail.

This setup ensures your data is clean, reliable, and useful for measuring user interactions effectively.

If you have any questions or need help troubleshooting, drop a comment below!

#GoogleAnalytics #GTM #GA4 #AnalyticsWithAhmed #GoogleTagManager #MarTech #MarketingAnalytics #MarketingTechnology