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.
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.
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.”
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.
- 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.
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.
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.
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.”
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.
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.
Next, give a goal name, and for the goal type, choose event.
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:
- What Is a VPN? A Detailed Guide to Understanding Its Benefits
- How to Exclude Your Home Wi-Fi in Google Analytics Tracking, and Then Verifying the Exclusion
- How to Set Up Scroll Depth Tracking in Google Tag Manager
- Multiple Dynamic IPs, Locations, and Devices: A Comprehensive Guide to Excluding Internal Traffic From All in Google Analytics
- What Are Log Files in Windows 10, and How Can You Delete Them?
- All Other Topics and Posts
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.