MeasureSchool logo
Search
Close this search box.
Search
Close this search box.

Button Click Tracking with Google Tag Manager – Everything You Should Know

Last Modified on November 16, 2023

In this tutorial, you will learn how to set up button click tracking with Google Tag Manager on all your website buttons to then send an event into Google Analytics, Facebook, Google Ads, and more.

🚨 Note: If you’re new to Google Tag Manager, check out our Google Tag Manager tutorial and master the basics.

GTM For Beginners

Sign up to the FREE GTM for Beginners Course...

An overview of what we’ll cover:

What is Button Click Tracking with Google Tag Manager?

Button click tracking is when you record clicks on a button, and take that information with its related information to analyze it.

Before we get started with the tutorial, we need to learn a little bit of theory surrounding auto-event triggers within Google Tag Manager. Before you start installing event trackers through Google Tag Manager, you need to be aware that Google Tag Manager can deploy auto event triggers.

The process consists of Google Tag Manager → Auto Event Trigger → Event Tag → Google Analytics.

Are you new to Google Tag Manager? Learn the basics in our Google Tag Manager Self Study Guide!

Screenshot of the button click tracking with Google Tag Manager process

The Auto Event Trigger

Google Tag Manager’s Auto Event Trigger has two functionalities: the listener functionality and the filter functionality. When these functionalities are combined, they are able to determine whether a tag (such as an event tag) is deployed and later transfers that information to Google Analytics. 

In the example below, you have a website where Google Tag Manager is installed. Let’s say you deployed an auto event trigger, in this case, a click trigger.

Screenshot of the functionalities within the process of button click tracking with Google Tag Manager

Listener Functionality

Google Tag Manager’s listener functionality partners with click triggers by listening to any kind of clicks that happens on the different elements of the website. Every time someone clicks on any of the elements on your website, it will forward an event into the listener trigger and will be refined by the filter functionality. 

Filter Functionality

The filter functionality will then determine whether this event is the right event,  determine whether it’s true or false, and eventually trigger your tag to transfer the information to Google Analytics (which could also be Facebook Analytics or AdWords).  

Step by Step: Button Click Tracking with Google Tag Manager

In order to build effective event tracking with Google Tag Manager, a step-by-step process should be in place. First, you must build a generic click trigger and test it out by triggering an event on your website. If this trigger can be listened to and be picked up by the right event, then the trigger can be refined and transformed from a generic click trigger into a specific click trigger. This specific click trigger will cater only for the element that we actually want to track. All of these will then be connected into a tag. 

Screenshot of the steps involved in button click tracking with Google Tag Manager process

To begin with an example, here is our Demoshop website where Google Tag Manager is installed.

Screenshot of Demoshop’s Happy Ninja hoodie product page

If you want to make sure that Google Tag Manager is actually installed, we can always look in our Google Tag Assistant for Google Chrome.

Screenshot of Google Tag Assistant displaying a Tag Analysis result

We can also go to our Google Tag Manager workspace and click on the Preview button in debug mode.

Screenshot of Google Tag Manager’s main dashboard in debug mode

After clicking on the preview button, your browser will be put into a special state, allowing you to see what’s going on with Google Tag Manager.

Screenshot of the Google Tag Manager default workspace preview

Reload the page and wait for a small Google Tag Manager console to pop up at the bottom of the screen.

Screenshot of Google Tag Manager pop-up console on webpage

Build a Generic Click Trigger

Now that you have Google Tag Manager set up, you will now be able to build a generic click trigger. For that, we’ll go over to Google Tag Manager’s Triggers tab.

Screenshot highlighting the Triggers button on the Google Tag Manager default workspace

Click on the new button to create a new trigger that will mark the beginning of button click tracking with Google Tag Manager.

Screenshot of the new trigger button on the triggers page

Rename the new trigger and click anywhere on the Trigger Configuration window.

Screenshot of the renamed trigger and the trigger configuration setup

Choosing A Trigger Type

Through the Trigger Configuration window, you can choose the trigger type as well as the kind of event you want this trigger to listen to. In our case, we will need to choose a click trigger which will work with All Elements. You may also use Just Links, but to keep it more general, we will go with the All Elements trigger instead.

Screenshot of the trigger type options in the trigger configuration setup panel

We want to listen to All Clicks because it’s a generic click trigger and we want to see whether this works for our element.

Screenshot of trigger configuration settings

Then, click Save to save your Trigger Configuration settings.

Screenshot of trigger configuration settings being saved

Configure Built-In Click Variables

Before we continue, you need to click on the Variables tab.

Screenshot of variables section on the Google Tag Manager default workspace

Go to the Built-in Variables tab and click on Configure.

Screenshot of the configure button on the built-in variables section of the Google Tag Manager default workspace

Make sure to enable all the click triggers. You only have to do this once. These triggers can be used once you’ve enabled them.

Screenshot of click text setting on the built-in variables section

Go back to Google Tag Manager’s preview and debug mode, then click on Refresh. You may also click on the preview button one more time. Doing this will refresh our Google Tag Manager in the background.

Screenshot of the refresh button on the Google Tag Manager default workspace

Testing Click Triggers

Reload the webpage. After that, you can observe that the listener functionality has been installed on the page. Now, Google Tag Manager should be able to listen to any kind of click that you do on the website.

Screenshot of listener functionality appearing in Google Tag Manager

Conduct a test by clicking on a button on your website. Do it with Command (or Ctrl for Windows users) and click on the button simultaneously. Doing this will open the page in a new tab.

Screenshot of Demoshop’s Singles webpage being opened in another tab using the command/ctrl + click function

Open another page on your website by applying the same technique as above to open it in a new tab.

Screenshot of Demoshop’s s clothing subpage being opened in another tab using the command/ctrl + click function

For our example, I will also click on the Add to cart button to see whether something moves and if anything is picked up on the Google Tag Manager pop-up console below. I will apply the same technique by using Command /Ctrl + Click to open this page in another tab.

Screenshot of Demoshop’s add to cart button being opened in another tab using the command/ctrl + click function

On the Google Tag Manager pop-up console, click on the Variables tab where we will be able to go through the events transferred to Google Tag Manager.

Screenshot of the variables tab on Google Tag Manager

Trigger the Event You Want to Track

For example, here’s the fourth event. By clicking on it, you will be able to see the variables involved. You may also see the enabled click variables and can see how they get filled. Every time you click on a different element on your website, these variables will get filled differently.

Screenshot of fourth Google Tag Manager event along with the related variables during button click tracking with Google Tag Manager

To help you understand the differences between each click, here are the variables behind the fifth click. This click trigger tracked the activity when I clicked on the title, Happy Ninja.

Screenshot of click variables of different web page elements

Another element I clicked on was the Singles page. Here, you can see how there are other variables that got filled differently. For example, the click element which is a URL.

Screenshot of the Singles page’s click event variables

Here, you can see the click URL where we are redirected to.

Screenshot of the Singles page’s click event variables

On the variables list, sometimes you may also encounter click classes or an ID. So if your element in the background of the HTML has classes or an ID, the click trigger can pick it up and put it into those variables, making button click tracking with Google Tag Manager possible.

On our example, we can see that the single add to cart button was clicked.

The reason why we give our click triggers a rule is to enable them to decide on when to actually fire our tag later on. Making them unique will put everything in order.  In this example, using click classes, a unique variable, is perfect because the other variables don’t really get filled, making it the best choice. 

Screenshot of click classes variable of the Add to cart button

You can choose the Click Text variable which has the value, Add to cart. The reason for this is because it differs widely from the other click text that we have in the example.

Screenshot of click test variable of the Add to cart button

Refine the Filter

After setting up the click triggers, you can now go to the next step which is refining the filter. To do this, we need to go over to the Triggers tab again. 

Screenshot of the triggers button on the Google Tag Manager default workspace before refining the filter for button click tracking with Google Tag Manager

Then, you need to turn the generic click trigger you made earlier into a specific click trigger which is specific to our button click.

Screenshot of the Triggers list on Google Tag Manager’s default workspace

We’re gonna click anywhere on the Trigger Configuration page to configure it. 

Screenshot of the Trigger Configuration window

Instead of firing the trigger to All Clicks, select Some Clicks. After that, choose the variables to be identified in order to make the button clicks unique.

Screenshot of trigger firing options and the conditions involved during events

For this example, you can choose the Click Element variable.

Screenshot of selecting first event condition, click element

There are several matching options on the second dropdown menu such as RegEx, CSS Selector, and so on. But to make things easy, simply choose the contains option. 

Screenshot of selecting second event condition, contains

To complete the Trigger Configuration, add the value of the variable you want to track. In this case, I will add the single_add_to_cart_button.

Screenshot of the variable value being copied for the trigger configuration settings

Copy the value of the variable and paste it into the last text box. Then, hit save.

Screenshot of variable value being included on the Trigger Configuration conditions and being saved

You will be redirected back to the Triggers page. Here, you will see how your generic click trigger has been made into a specific click trigger.

Screenshot of new generic trigger set specifically

Connect Trigger to a Tag 

Before you can test out your click triggers, they must first be connected to a tag which can send specific click events to Google Analytics. Go over to the Tags tab on Google Tag Manager.

Screenshot of tags about to be connected to trigger during the process of button click tracking with Google Tag Manager

Click on the New button.

Screenshot of new tag button being clicked

Then, rename the tag.

Screenshot of a tag being named

Go to tag configurations by clicking anywhere on the Triggering window under the Tag Configuration section. The goal is to send click events to Google Analytics, so choose Universal Analytics for the tag type. 

Screenshot of Universal Analytics tag being selected

Select Event for the Track Type and type Add to Cart on the Action text box. 

Screenshot of Universal Analytics settings

Now that you’ve set your tag’s different aspects, you have to define where to send all of this.  If you already have a Google Analytics account set on Google Tag Manager, you can simply choose that option. But if not, override settings in this tag and manually input your tracking ID.

Screenshot of Google Analytics settings and the Tracking ID being added

Every Google Analytics account has a different tracking ID. To find this, go over to Google Analytics and in the Admin section of your account, click on Tracking Info. 

Screenshot of Google Analytics’ Admin section and Tracking Code button

Under Tracking Info, click on Tracking Code. This page will display your Google Analytics Tracking ID.

Screenshot of the Tracking ID section in Google Analytics’ Admin section

Copy your Tracking ID and paste it on the Tracking ID text box in Google Tag Manager

Screenshot of Google Analytics’ Tracking ID section and its Triggering section

Then, you can connect this tag to a click trigger that you’ve prepared earlier.

Screenshot of trigger selection in Google Analytics

Click Save to save your tag configuration settings.

Screenshot of tag settings being saved on Google Analytics

Once you’re redirected to the Tags page on Google Tag Manager, click on the refresh button again.

Screenshot of Google Tag Manager’s default workspace being refreshed

Testing Triggers: Button Click Tracking with Google Tag Manager

Go back to the web page. Hit the refresh button. Then, open the Add to cart button in another page by pressing Command/Ctrl before clicking on it. 

Screenshot of the Add to Cart button on Demoshop being opened in a new tab

On the fourth event, there was a GTM click. However, no tags were fired.

Screenshot of tags not showing on Google Tag Manager

To find out what had caused the missing tags, we need to check the Google Analytics event tag to check the errors in the assigned trigger.

Screenshot of Google Analytics events tag being clicked

Through the Firing Triggers window, it’s apparent that the click trigger failed to fire. It’s marked by an X. The click element variable didn’t contain the add to cart button either.

Screenshot of click trigger failing and the click element not containing the single add to cart button value

Seeing that the wrong variable was selected for the trigger, go on to the variables tab to check the state of the click element.

Screenshot of the variable button being clicked and the Firing Trigger showing the wrong variable being assigned

Through the variables tab, you can see that the wrong variable was chosen for the trigger. I originally wanted to use the click classes variable. So we can all learn from here that you need to have the right variable and the right value in place in order for your trigger to turn true. 

Screenshot of the click element variable containing the wrong value

To help correct this mistake, go over to the Triggers tab on Google Tag Manager’s default workspace.

Screenshot of trigger button on the Google Tag Manager default workspace

Click on the Trigger you’ve created.

Screenshot of the click- Button Click trigger being clicked

On the Trigger Configuration window, change the variable from click element to click classes.

Screenshot of click classes variable being selected

Hit the refresh button.

Screenshot of Google Tag Manager’s default workspace being refreshed

Go back to your webpage, then hit reload. Open the Add to cart button in another page again by pressing Command/Ctrl before clicking on it.  

Screenshot of the Add to cart button being clicked

Using Preview Mode

On the fourth GTM click, you can now see that the event tag was fired.

Screenshot of the GTM Click tag being fired after button click tracking with Google Tag Manager

Using Tag Assistant 

You can also look up any event tags being fired and sent to Google Analytics through Google Tag Assistant. Click on Google Analytics.

Screenshot of Google Analytics displayed on Google Tag Assistant

Through Google Tag Assistant, you can see that one event tag got fired.

Screenshot of an event click being tracked by Google Analytics

Using Real-Time Report in Google Analytics

Head over to Google Analytics and click on the Events tab under Real-Time Reporting.

Screenshot of events under real-time reports being clicked

On the Events tab, you’ll see a new event entering your Google Analytics account.

Screenshot of 1 new event being tracked on Google Analytics

To browse through the different events that came into your account, under the Behavior tab, click on Events and then choose Overview. This takes up to 48 hours to fill correctly.

Screenshot of the Overview panel under the Behavior tab in Google Analytics

Go back to the web page and observe how the Google Analytics tag has been deployed on the Google Tag Manager console.

Screenshot of the Google Analytics tab being deployed on Google Tag Manager

Other Tools for Button Click Tracking with Google Tag Manager

Facebook Pixel

Now, we can also deploy other tags because we already have that trigger now prepared on Google Tag Manager, we can reuse that trigger.

Screenshot of a Facebook event tag with assigned triggers subjected to button click tracking with Google Tag Manager

So, for example here, I have a Facebook event that sends over a track event, add to cart, to Facebook. 

Screenshot of an html version of a Facebook event that tracks events and add to cart events

Click on the Triggering section.

Screenshot of Google Tag Manager’s Triggering section

Attach the click trigger to the Facebook event by clicking on the specific click trigger.

Screenshot of a selection of triggers in Google Tag Manager

You can see that the click trigger is now attached to the Facebook event. 

Screenshot of a trigger being added to a Facebook event tag

Google Ads Tag

Similar to Facebook Events, Google Ads can have tagged events via Google Tag Manager as well.

Screenshot of a Google event tag with assigned triggers subjected to button click tracking with Google Tag Manager

Click on the Triggering section of the AdWords Tag Configuration page.

Screenshot of an AdWords tag for tracking add to cart events

Click on the click trigger.

Screenshot for selecting a trigger for tracking the AdWords tag

Click save.

Screenshot of AdWords tag configurations being saved

Hit refresh.

Screenshot of Google Tag Manager’s default workspace being refreshed

Go back to the web page and reload.

Screenshot of the Add to cart button being clicked for testing

And as you see when I clicked on it, we had three events fire into AdWords, Facebook, and Google Analytics. 

Screenshot of tags fired on Google Tag Manager after clicking on the Add to cart button

You can also see the three events here in our Google Tag Assistant. 

Screenshot of Google Tag Manager appearing in Google Tag Assistant

When you click on the AdWords Conversion Tracking event on Google Tag Assistant, you can see the event metadata.

Screenshot of AdWords Conversion Tracking on Google Tag Assistant

We can also check via our Facebook Pixel Helper where we can see that the add to cart event has been received.

Screenshot of Facebook Pixel Helper prompting receipt of the event

Once you have made sure that everything works correctly, there’s only one step to make your tags live on your website. Publish your tags as a new version in Google Tag Manager. Click on the Submit button.

Screenshot of tags being submitted and published into Google Tag Manager

Enter a descriptive name for your new tag version. Then, click on Publish.

Screenshot of a series of tags being renamed before publishing

Now that you’ve published the new tag version, they will now be tracking the button click on that add to cart button for all your users on the website.

Screenshot of published event tags

Advanced Click Tracking Techniques

Many websites utilize dynamic content that loads without a full page refresh, such as AJAX-loaded content or content revealed upon user interaction. Tracking clicks on such content can be a bit tricky, but with the right setup, it’s entirely feasible.

  1. Listen for DOM Changes: Use GTM’s built-in “Element Visibility” trigger to detect when specific dynamic elements become visible on the page.
  2. Utilize Custom JavaScript: For more complex scenarios, you might need to employ custom JavaScript listeners that can detect and relay click information to GTM when users interact with dynamic content.

Using CSS Selectors for Precise Tracking

CSS selectors are powerful tools that allow you to pinpoint specific elements on a webpage. By using them in GTM, you can ensure that you’re tracking clicks on the exact elements you’re interested in.

  1. Basic Selectors: Track elements based on their tag, class, or ID. For example, tracking all clicks on elements with the class .buy-button.
  2. Combinator Selectors: These allow for more precise targeting, such as tracking clicks on a link within a specific section of your site.
  3. Attribute Selectors: Useful for targeting elements with specific attributes, like links opening in a new window (a[target="_blank"]).

Tip: Always test your CSS selectors in the browser’s developer tools to ensure they’re targeting the desired elements before implementing them in GTM.

FAQ

Can I track button clicks on any type of website?

Yes, button click tracking with Google Tag Manager can be implemented on any website. Whether you have a simple blog, an e-commerce site, or a complex web application, you can track button clicks and analyze user interactions to gain insights into user behavior.

Can I use button click tracking for buttons on mobile devices?

Yes, button click tracking with Google Tag Manager is compatible with both desktop and mobile devices. It allows you to track button clicks across various devices and platforms, providing a comprehensive understanding of user engagement.

Is button click tracking only limited to Google Analytics?

No, button click tracking with Google Tag Manager can be used with various analytics platforms. While the blog post focuses on Google Analytics, you can configure your tags to send button click data to other analytics tools as well, such as Facebook Analytics or AdWords.

Summary

So, there you have it. That is how you can set up button click tracking with Google Tag Manager.

For advanced users of GTM, we recommend our guides on the DOM element variable and RegEx for GTM.

If you are new to Google Tag Manager, then we encourage you to sign up for our free GTM course.

MeasureMasters

REOPENED!

Master Data & Analytics with MeasureMasters

Exclusive Courses & Workshops | Ongoing Troubleshooting | Support Resources, Tools & much more
Subscribe
Notify of
guest
3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Brandstory
Brandstory
5 years ago

Hey Julian,

You forgot onething, Is it your triggers are working fine?? – Absolutely no. Because in your video you are not firing Facebook trigger from facebook website, Simply you are clicking, all events are happening. This is not right. Trigger should be fired based on source ok.

Anthony
Anthony
2 years ago

i use the third one (google adwords version), i didnt have any problem with debug mode, all tags fired correctly. but when i checked my google ads dashboard, the conversion number count didnt increase at all (zero conversion even after 3 days).
whats wrong with my case?

Harsha
Harsha
1 year ago

Hi, this is excellent. How to avoid duplicate’s in this case ?

MeasureSchool Locker

Unlock our Free Tools, Templates and Resources

now it's time to

Start measuring like a master

Itching to jump into the world of MeasureMasters? This is what you have to look forward to.

Ready to take your digital marketing to the next level?

Subscribe to our newsletter and stay ahead with our latest tips and strategies.