Tracking a button click in Google Tag Manager is one of the simplest processes you can do. If you are new to tag manager, then this can be the hardest task. To help you get started with event tracking in Google Tag Manager, I have written this detailed tutorial to track a button click.
Follow each step carefully if you are new to GTM.
Why Tag Manager?
Google Tag Manager is a complete tag management solution. It has the power to control all analytics and marketing tags on your site without touching your website code.
This allows you to control all tags from a single place, on top of eliminating the struggle of modifying your website code every time you have to install a new tag.
Most important thing is it helps improve your website speed by calling all the external files at a time without waiting for other tags to load.
Getting Started with Tag Manager
Installing tag manager on your website is quite easy but if you still need a guide to get started, you can refer to my previous blogs in which I have covered this tutorial extensively. However, I will take you through the steps for installing Google Tag Manager.
Create a Google Tag Manager account by typing https://tagmanager.google.com in your browser
Fill your website details
Copy the GTM container code
Place the container code in the head section of your website
Verify the setup
This is just a five minutes setup and doing so will give you tons of opportunities to manage your website tags. For the Wordpress site owners, you can follow this awesome step by step guide to install google tag manager on wordpress.
Before you Start
Before getting started with tracking anything, it is necessary to look around the Google Tag Manager interface especially if you haven’t used it before. To have a brief overview of the tag manager interface you can go through the step by step guide to Google Tag Manager.
To track a button click, login to your tag manager account and select a specific container.
The very first thing you need to do after logging into your account is, enable all the built-in click variables.
To do so, click on variables from the left menu, and under built-in variables click configure button.
Under the configure built-in variables scroll down to see click variables and check all of them.
Once, you have enabled the click variables you’ll need to create a trigger.
3 Ways to Create a Trigger
A trigger condition evaluates during the run time. You can track a button by assigning it a unique id, a class or by using the button text.
The best way to follow is by using the button id. If the button isn’t assigned any ID, look for a class and if it isn’t assigned either, go with the last option.
I will show you all three ways to create a trigger., but for now, let’s create a generic trigger to check the properties of the button.
From the right menu, click triggers and then click the new button.
Enter the trigger name as “generic trigger”
Click the trigger configuration and select “all elements”
Save this trigger. Click the preview button and open your website in a new tab
When you open your website you will see a tag manager preview at the bottom of your page.
Press the command/ctrl button and click the button you want to track.
In the original tab, you will see a new element under summary.
Click the Variables tab to see the variables associated with your button.
Check the values for click id, click classes and click text. Our priority for each for them is going to be in the same order as too.
In my case, there is no value for click id, so I will look for click classes. I can see the button has a class named “item-readmore” and the click text is “READMORE”.
Now that we have got the right information, it’s time to modify the previously created trigger.
We will see how to create a trigger based on click ID, click classes and click text.
If your button is associated with an id, copy it and if not, copy the value of click classes and in neither cases, copy the click text value.
Go to your tag manager account and open the trigger we created earlier.
Change the name of the trigger to what you want it to track. In my case, i will name it Read More.
1. Using Button ID
In the first case, that is if your button is associated with an ID, follow these steps.
Click on the trigger configuration and change All clicks to some clicks.
From the drop down select click id and in the last text box paste the id value of the button you copied earlier.
Save the trigger.
2. Using Button Class
If your button is associated with a class, follow these steps.
From trigger configuration, change All clicks to some clicks.
From the drop down select click classes and in the last text box paste the class value of the button you copied earlier.
Save the trigger.
3. With Click Text
In case there is no id and class associated with the button, follow the below steps
From trigger configuration, change All clicks to some clicks
From the drop down select click text and in the last text box paste the button text you copied earlier.
save the trigger.
Create the Respective Tag
Now it’s time to create the tag that will fire once the above trigger condition is met.
Click on the tags tab from the left menu and then click new button to create a tag.
Enter the name of the tag as “GA - Event - ReadMore”. You can change “readmore” to the button you are tracking.
Click on the tag configuration and select “Universal Analytics”.
Select the track type as event
Set your event parameters. You can set unique parameters so you can easily identify in Google Analytics reports.
Change the values of category and action according to your requirements. I selected the label as click URL because it will display the URL of the page where the button was clicked.
Also, change the google analytics tracking id
Under the tag configuration, click on the trigger area and select the trigger we created earlier.
Save the tag and refresh the preview mode.
Open your website in a new tab to verify if the tag is firing properly.
Press command/ctrl button and click on the button you want to track.
If you did everything right you will see the tag firing successfully, otherwise go through the steps again to make sure you didn’t made any mistake.
If the tag is fired successfully, go back to tag manager account and click the leave preview mode button and then click the publish button. Your changes won’t go live until you publish the changes.
To view event reports, open your Google Analytics account and navigate to Behavior >> Events >> Overview. You can then create an event goal in Google Analytics to check the conversion rate.
If you have any queries related to this topic, please let me know in the comments below, I would be happy to help.