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, to Facebook, Google Ads and more.
What is Button Click Tracking with Google Tag Manager?
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!
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.
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.
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.
To begin with an example, here is our Demoshop website where Google Tag Manager is installed.
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.
We can also go to our Google Tag Manager workspace and click on the Preview button 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.
Reload the page and wait for a small Google Tag Manager console to pop up at the bottom of the screen.
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.
Click on the new button to create a new trigger that will mark the beginning of button click tracking with Google Tag Manager.
Rename the new trigger and click anywhere on the Trigger Configuration window.
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.
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.
Then, click Save to save your Trigger Configuration settings.
Configure Built-In Click Variables
Before we continue, you need to click on the Variables tab.
Go to the Built-in Variables tab and click on Configure.
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.
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.
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.
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.
Open another page on your website by applying the same technique as above to open it in a new tab.
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.
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.
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.
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.
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.
Here, you can see the click URL where we are redirected to.
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.
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.
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.
Then, you need to turn the generic click trigger you made earlier into a specific click trigger which is specific to our button click.
We’re gonna click anywhere on the Trigger Configuration page to configure it.
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.
For this example, you can choose the Click Element variable.
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.
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.
Copy the value of the variable and paste it into the last text box. Then, hit save.
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.
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.
Click on the New button.
Then, rename the tag.
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.
Select Event for the Track Type and type Add to Cart on the Action text box.
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.
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.
Under Tracking Info, click on Tracking Code. This page will display your Google Analytics Tracking ID.
Copy your Tracking ID and paste it on the Tracking ID text box in Google Tag Manager.
Then, you can connect this tag to a click trigger that you’ve prepared earlier.
Click Save to save your tag configuration settings.
Once you’re redirected to the Tags page on Google Tag Manager, click on the refresh button again.
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.
On the fourth event, there was a GTM click. However, no tags were fired.
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.
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.
Seeing that the wrong variable was selected for the trigger, go on to the variables tab to check the state of the click element.
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.
To help correct this mistake, go over to the Triggers tab on Google Tag Manager’s default workspace.
Click on the Trigger you’ve created.
On the Trigger Configuration window, change the variable from click element to click classes.
Hit the refresh button.
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.
Using Preview Mode
On the fourth GTM click, you can now see that the event tag was fired.
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.
Through Google Tag Assistant, you can see that one event tag got fired.
Using Real-Time Report in Google Analytics
Head over to Google Analytics and click on the Events tab under Real-Time Reporting.
On the Events tab, you’ll see a new event entering your Google Analytics account.
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.
Go back to the web page and observe how the Google Analytics tag has been deployed on the Google Tag Manager console.
Other Tools for Button Click Tracking with Google Tag Manager
Now, we can also deploy other tags because we already have that trigger now prepared on Google Tag Manager, we can reuse that trigger.
So, for example here, I have a Facebook event that sends over a track event, add to cart, to Facebook.
Click on the Triggering section.
Attach the click trigger to the Facebook event by clicking on the specific click trigger.
You can see that the click trigger is now attached to the Facebook event.
Google Ads Tag
Similar to Facebook Events, Google Ads can have tagged events via Google Tag Manager as well.
Click on the Triggering section of the AdWords Tag Configuration page.
Click on the click trigger.
Go back to the web page and reload.
And as you see when I clicked on it, we had three events fire into AdWords, Facebook, and Google Analytics.
You can also see the three events here in our Google Tag Assistant.
When you click on the AdWords Conversion Tracking event on Google Tag Assistant, you can see the event metadata.
We can also check via our Facebook Pixel Helper where we can see that the add to cart event has been received.
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.
Enter a descriptive name for your new tag version. Then, click on Publish.
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.
So, there you have it. That is how you can set up button click tracking with Google Tag Manager. If you are new to Google Tag Manager, then we encourage you to signup to our free GTM course or check out our more advanced courses in MeasureMasters.