How to Track a Button Click in Google Tag Manager

Tracking a button click in Google Tag Manager is one of the simplest processes you can do. If you are new to Google 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 single 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 single 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.

  1. Create a Google Tag Manager account by typing in your browser

  2. Fill your website details

  3. Copy the GTM container code

  4. Place the container code in the head section of your website

  5. 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.

google tag manager variables

Under the configure built-in variables scroll down to see click variables and check all of them.

enable built-in variables

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.

create a trigger

Enter the trigger name as “generic trigger”

Click the trigger configuration and select “all elements”

create a generic trigger

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.

tag manager preview mode

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.

preview variables

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.

click id trigger

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.

click classes trigger

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.

click text trigger

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.

create a new 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.

set event parameters

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.

set trigger

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.

tag manager preview mode

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.