How to Track Button Clicks With Google Tag Manager

The tracking capabilities from Google Tag Manager have come a long way in equipping website owners to understand user behavior further. One of the many functionalities supported by Google Tag Manager is the ability to track button clicks.

In this post, you’ll learn how to create button click events with Google Tag Manager and then, if desired, creating a Google Analytics Goal with it so that you can more precisely understand what your users may want and can run A/B Tests later. For example, if I change my button color to green, do users click more? Having Goals in Google Analytics can allow you to experiment and make data-driven decisions about website changes.

Let’s get down to it!

Side note: Once you understand the process to track buttons, you’ll realize that — it’s not all you can track.

Step by Step Guide to the Technical Setup in Google Tag Manager — For Tracking Button Clicks

In Google Tag Manager, you’d have to execute on the following steps:

Enable a few built-in variables.
Create a new trigger. (This step is the most involved).
Create a new tag.
QA whether your button click event tag fires.

Step 1: Enable “Clicks” Built-In Variables

First, head over to variables from your workspace, and hit the “configure” button on the top right corner.

From the Variables section, select “configure.”

Consequently, a pop-up would open on the right side of your window. In there, scroll down a little to the “Clicks” Heading, and enable all the variables. Technically, if you precisely know which ones you will work with, you can only go with those; however, I’d recommend enabling all as you never know what can come handy, and what else you can use for an “and” condition.

As shown, enable all of the variables for “Clicks.”

Honestly, that’s it for step 1.

Step 2: Create a New “Click – All Elements” Trigger

To understand the setup, let me show you what button I am tracking, so you can follow along my thought process, and what I did.

In almost all of my blog posts, at the end, I have a Button/CTA that takes users to my author page, with the text “Liked This Article? Explore All Posts From Shaleen Shah.”

I have this button/CTA inserted at the end, in almost all of my blog posts.

The reasons I wanted to track this were:

If many users are clicking here, it might be an indication that they’re reading my entire blog posts. Combine that with Avg. Session Duration, and I can get a more accurate picture of the blog interaction.
I also have scroll depth tracking enabled; therefore, I wanted one more data point to corroborate the story, to evaluate bounce rates.

In general, when creating a click tracking trigger, your best bet is to grab variable firing conditions, using the Google Tag Manager Preview Mode.

How to Grab the Click Variables/Firing Conditions Using Google Tag Manager Preview Mode

Usually, folks recommend using a CSS class, but in my case, I just went with the button text because:

I knew that this text is not used anywhere on the site, except this button (so it’s unique).
The CSS class, while unique at the moment, seemed that it could end up propagating at other places. My CSS class was created based on using a WP button, and background color. So if in the future, I ended up creating another button, with the same background color, my click event trigger might fire in that situation too, unless I remember to exclude it, or I use an “and” condition. Either way though, I just went with the text condition for now.

In any case, to grab the triggering firing conditions (images to follow for visual guidance), the process is:

Turn on preview mode in Google Tag Manager.
Go to your website.
With the GTM debug on, click on the button you want to track clicks to (step 1), and then, from the summary window, select that click (step 2), and eventually, head over to the variables tab (step 3). See the image below for visual reference.

Using my example, repeat the process with your button, with your GTM preview/debug mode.

Next, choose which variable condition you want to grab, from the options available. You can use more than one condition, to be absolutely sure. They will be used as an “and” condition. To see how everything ties together, check out the two images below.

While I only chose to go with “click text,” I could have chosen to go with an “and” condition where, the logic would go like this: Fire this click event trigger when ‘Click Text’ is equal to this AND ‘Click Classes’ equals to this. I could even add a third condition for — AND “Click URL” equals my author page URL.

In the end, as you know, I ended up choosing just the click text.

Creating the Actual Trigger

When you have decided on which variables you’d use, head over to GTM, and:

From the Triggers, create a new Trigger.
Name it whatever you want.
For Trigger Type, choose All elements, under Click.
Following that, for the option of “this trigger fires on,” select some clicks.
For conditions, use the variable info, you grabbed during GTM preview mode. You can use the ‘+’ sign to attach a condition.

Initial setup for a click event trigger. Once you’re all set here, select save, and your trigger is made.

Step 3: Create a New Tag

After you’re done setting up your trigger, it’s time to create your tag with the following configurations (final Image to ensue):

Tag Type: Google Analytics: Universal Analytics.
Track Type: Event.
Category: Name it whatever you want (this is how it’ll show up in Google analytics under Events, and also, is what you’d have to use for setting goals). I chose to go with “Clicks.”
Action: Name it whatever you want. I named it “button click.”
Label: Name it whatever you want. I called it “explore all posts from shaleen shah,” just so I can recognize that for which button, this click is for.
Google Analytics Settings: Chose your variable, or the override option.
Triggering: Select the trigger you created in step 2.

Final Tag Configurations.

Once satisfied, name your tag, hit save, and be done!

Step 4: QA-ing Your Implementation

If everything is executed correctly, go into the Google Tag Manager Preview Mode, and click your button again. Only this time, as opposed to grabbing the variables, you’re looking for your tag under “tags fired.”

When your tag shows up inside “tags fired,” you’re all done with Google Tag Manager. At that point, you can publish your changes.

How to View the Click Event Tracking Data in Google Analytics

Like any event, click tracking data would also be available under Behavior > Events > Overview, to start off. By default, the view will be by event category. In other words, whatever name you gave in sub-step 3, while creating the Google Tag Manager tag.

Your click tracking event, by default, will be viewable as the event category name.

How to Set Up a Click Event Tracking Goal in Google Analytics

From the admin section in GA, under the applicable view, select goals. Then, click on new goal.

Step 1: Create a new goal.

Next, give a goal name, and for the goal type, choose event.

Step 2: Provide goal name, and for the goal type, choose “event,” to proceed forward.

Subsequently, fill out the goal details as follows:

Category: Equals to–>whatever category name you used for the tag in GTM.
Action: Like above, use the same name as GTM.
Label: Likewise, with label.
Use the Event value as the Goal Value for the conversion: Leave it as yes, unless you want to assign a dollar value to it. For example, you could say that every click to this button is, on average, worth $50 dollars to me.

After all four, select verify this goal, and hit save.

You May Also Want to Check Out:

Conclusion

Tracking button clicks in Google Tag Manager for the first time may feel a little cumbersome; however, once you get the gist, you’ll be up and running in no time for the ongoing!

And as mentioned before, you aren’t limited to tracking just the buttons. You can track links, click to your menu, and more.

Liked This Article?
Explore All Posts From Shaleen Shah