How to Track Button Clicks Using Google Tag Manager

Google Tag Manager can be used to easily track clicks on any button on your website and send usage data to analytics platforms such as Google Analytics. You can then use that data to measure performance and make informed decisions. If you’re not yet measuring feature usage on your site then this is definitely a good place to start.

Assuming you have both a Google Tag Manager container and Google Analytics setup, let’s get started with tracking button clicks!

Setup a Click Trigger

To create the button click trigger, go to Google Tag Manager and click ‘Triggers’ from the menu on the left and then the ‘New’ button in the main area.

Click the ‘Trigger Configuration’ area to bring up the list of trigger types to choose from. From the list, look for the ‘Clicks’ section where it lists two options:

1. All Elements
2. Just Links

If you know for a fact that the button you want to track is is a link as in the code example below then choose the second option; ‘Just Links’.

<a class="btn" href="www.widgets.com/red-widgets">Buy Red Widgets</a>

Otherwise, if the button you’re tracking isn’t a link (maybe it’s an <input> a <button> or something else), or if you’re just unsure, then choose the first options; ‘All Elements’. We’ll be able to specify the individual element afterwards.

We’ll go through an example of each using our home page as an example.

Option 1: Click Trigger on a Single <button> Using ‘All Elements’

Strictly speaking, this option can track any element (the clue is in the title!), but in this example we’re going to be a tracking a <button> element that handles the search feature on this website (using the default Twenty Twenty theme for WordPress).

So, to get started, select ‘All Elements’ from the list of trigger types and select ‘Some Clicks’ from the ‘This trigger fires on’ section.

Then choose click the first drop-down and select ‘Choose Built-In Variable’ to bring up a list of variables to choose from. At the very top, you should see ‘Click Element’. Pick this one and then from the second drop-down list pick ‘matches CSS selector’.

We now need to identify the CSS selector of the specific element we want to track, ideally with the HTML element’s ID or Class. A quick way to find this is to right-click the element in your browser and select ‘Inspect’ to bring up the browser’s developer tools. This should then show the HTML code for the page and highlight the specific element that you selected as below.

In this case, the element has multiple classes. Because classes can be used by multiple elements on a page, we need to find the one that’s most likely to be unique. In this case, we’ll go with ‘search-toggle’ as it’s more specific than just ‘toggle’ and not device-specific like ‘desktop-search-toggle’.

To make certain, though, we’ll also find the class or ID of the whole header area as we can be confident that there’s only one search button in that section. Scroll up the hierarchy of HTML code and look for the parent element. In this case, I’ve found the following line:

<header id="site-header" class="header-footer-group" role="banner">

As you can see, this element has an ID so in theory this should be the only element on the page that uses it.

Joining the two together with a bit of CSS knowledge, we can create the following CSS selector:

#site-header .search-toggle

A quick explanation for you, if needed. The hash/pound sign indicates an ID and the period/full stop indicates a Class. The space in between the two essentially says select all elements with the class of ‘search-toggle’ that are children of the element with an ID of ‘site-header’. In our case, this will be just the search button we’re looking to track.

Returning to Google Tag Manager, let’s paste our newly created CSS selector into the third field of the trigger and give the trigger a name; in this case we’ll give it the imaginative name of “Click on Header Search Button”. Finally, click the blue ‘Save’ button at the top-right of the screen.

The trigger is now setup to fire a tag when any element with that specific CSS selector is clicked.

Option 2: Click Trigger on Multiple <a> Links Using ‘Just Links’

If we know that the button we want to track uses a link element (<a>, where ‘a’ means anchor or link), we can select ‘Just Links’ from the list of trigger types instead. In this example, we’re going to track clicks on the ‘Continue Reading’ button under each blog post on the home page and category archives.

Follow the same steps as Option 1 to setup the trigger:

1. Pick ‘Choose Built-In Variable’ from the first drop-down.
2. Choose ‘Click Element’ from the list.
3. Pick ‘matches CSS selector’ from the second drop-down.
4. Use the inspect feature and developer tools in your browser to find the right selector.*

*The only difference here is that we are wanting to track multiple instances of the button, not just a single button like in the first example. With this in mind, we need to tweak step four.

We’re looking for a CSS selector that will match multiple instances on the same page. We know that IDs are typically used on only one element while classes are used for multiple, so we’ll need to find a class. Inspecting the button itself shows us that it uses a class called ‘more-link’ – this is ideal! Double-check that the other buttons use the same class – which they do – and we’re good to go.

Go back to Google Tag Manager, put the CSS selector in to the third field, give the trigger a name and save it.

Setup Google Analytics Event Tag

With at least one button click trigger setup, we can now create the tag that will fire off an event to Google Analytics so that we can start tracking the number of clicks on the button(s). For this section, we’ll focus on tracking Option 2 (the ‘Continue Reading’ buttons that use link elements).

In GTM, choose ‘Tags’ from the menu on the left and click ‘New’. For the ‘Tag Configuration’ choose ‘Google Analytics: Universal Analytics’ and for ‘Track Type’ select ‘Event’. This will bring up the event tracking parameters that will be sent to Google Analytics.

Google Analytics events take several parameters; category, action, label and value. You do not need all of them, but the more you use the more granular you can be in your measurement and reporting.

In this case, we’ll set the following values:

• Category: “button”
• Action: “click”
• Label: “continue-reading”

Don’t forget to select your Google Analytics Settings variable, too.

With the ‘Tag Configuration’ sorted, now select the trigger that you setup earlier. In this case it’ll be ‘Click on Continue Reading Button’ trigger.

Finally, give the tag a descriptive name – such as ‘GA Event – Continue Reading Button Click’ – and save it.

Check the Button Click Tracking is Working

With our tag now setup, it’s time to test it out and see if it’s working.

Use GTM’s Preview Mode

First, let’s enter Preview Mode by clicking the ‘Preview’ button in GTM and once activated, loading up the website that we’re tracking. With the GTM preview mode ‘drawer’ showing at the bottom of the page, click on the button that you specified in your trigger. If you set it up correctly, you should see the tag that you setup move to the ‘Tags Fired On This Page’ section of the summary.

Watch carefully, though, because if the button you click takes you to another page then the GTM preview drawer will disappear and reload again from scratch.

That’s exactly what we want to see!

Check Google Analytics’ Realtime Report

If you’re satisfied that the tag is firing through using GTM’s Preview Mode, it’s time to check that Google Analytics is receiving the event data.

Leave Preview Mode and publish your updated container. Once that’s done, load up Google Analytics and go to the Realtime > Events report.

Switch over to your website and reload it now that you’ve left Preview Mode. Once it’s fully refreshed, click on a button that you’re tracking. Now, switch back to Google Analytics and you should see our button click event listed there as in the screenshot below.

There you have it! The event is now showing up with the category and action labels that we specified within Google Tag Manager.

---

Tracking button clicks can be really straightforward, but sometimes it can be a real pain. Whether it’s finding the right CSS selector or Javascript interfering with the click itself, there are infinite variations of this process.

Are you having trouble getting it working? Do you have any other questions about tracking button clicks with Google Tag Manager? If so, let me know in the comments below.