How to Track Button Click with Google Tag Manager – Everything You Should Know

Lets see 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?

The process consists of Google Tag Manager → Auto Event Trigger → Event Tag → Google Analytics.

Here’s a brief overview of the steps we’re going to take to track button clicks: 

1. Find your button
2. View the source code
3. Enable the variable
4. Create a tag
5. Create a trigger
6. Preview the container
7. Check Google Analytics
8. Publish the container

1. Find your button

Start by finding the button you want to track on your website. I’m going to use Google Tag Manager to track people clicking the button when they sign up to receive my email newsletter.

 

2. View the source code

Since I’m using Chrome, I’m going to right-click the button and select ‘Inspect’. This opens Developer Tools, allowing me to view the source code of the page.

I can see that the button (number 1) is located in a form (number 2) and that the button has a class of newsletter-form-button-label (number 3). This means that we can track button clicks using the class in Google Tag Manager.

What if the button isn’t in a form?

You can track buttons even if they’re not contained inside a form. Again, you’ll want to find the button in the source code of your page and look for the button’s class. Here’s an example:

<a href="/courses/" class="sqs-block-button-element">View Courses</a>

Now I can use the link class of sqs-block-button-element to configure my trigger inside Google Tag Manager. (And if you don’t see a class, then you can also use the ID of the link, or even the linked text to configure button tracking.)

What if the button is in a form, but it doesn’t have a class?

If your button is contained in a form, but the button doesn’t have a class, then you can also use the class of the form (number 4) or the form’s ID (number 5).

3. Enable the variable

Now it’s time to head to Google Tag Manager and enable the built-in variable.

Google Tag Manager has a range of built-in variables that automatically make the details of particular interactions available when configuring your tags and triggers. For example, we can use variables to check that someone is viewing a particular page, watching an embedded video, scrolling a page, or in our case, clicking a particular button on our website.

Select ‘Variables’ and then click ‘Configure’ under ‘Built-in Variables’.

In our example, we saw that the button was contained in a form and we identified the button’s class. This means we need to scroll down the list of built-in variables and enable ‘Form Classes’.

If you’ve found a different way to identify your button, then you’ll need to enable the appropriate variable. For example, if you want to use the form’s ID, then you would enable ‘Form ID’, or if you identified a link class, you would enable ‘Click Classes’.

4. Create a tag

We can now create our tag which will send data to Google Analytics when our button is clicked. Select ‘Tags’, click ‘New’ and name your tag. For my example, I’m going to name the tag ‘Button Click – Email Sign Up’.

Then select ‘Tag Configuration’ and choose ‘Google Analytics’ as the ‘Tag Type’.

 

Select ‘Pageview’ and change this to ‘Event’. Now we can choose how we want clicks on our buttons to be reported inside Google Analytics.

I’ve entered ‘Button’ as the ‘Category’, then ‘Click’ as the ‘Action’ and I’ve used ‘Label’ to add the details about the particular button someone has clicked.

Next, we need to select our Google Analytics settings variable.

Before we save our new tag, we need to add a trigger...

5. Create a trigger

Triggers tell Google Tag Manager when a tag should (or shouldn’t) fire. For our button click tag we need to create a trigger so that the tag only fires when our button has been clicked. To do this, we select ‘Triggering’ for the tag and then click the blue plus sign in the top right corner to create a new trigger.

Let’s name the trigger ‘Button Click – Email Sign Up’, click ‘Trigger Configuration’ and select ‘All Elements’.

Now we need to change the trigger so that it only fires on some clicks. We then select ‘Form Classes’, ‘Equals’ and enter the class we identified when we viewed the source code of our page. In my example, I’ve entered newsletter-form-button-label.

f you’ve found a different way to identify clicks on your button, then you’ll need to select a different variable for your trigger, like ‘Click Classes’ if you’re using the link class instead of form class.

Next, we save the trigger, and then we save the tag.

6. Preview the container

Now it’s time to preview the container and make sure we’re correctly tracking our button clicks. To do this, we click ‘Preview’ in the top right corner and then in a new tab (or window) we load our website.

At the bottom of the page, the Google Tag Manager debug console will open. Once the debug console has loaded, click the button on the page and watch for the summary to update on the left of the console (number 1). You can try clicking your button while holding down the command key on your computer. In some cases this will load the confirmation page in a new tab. However, this doesn’t always work, so I also recommend heading to Google Analytics to check your tag is firing correctly.

 

7. Check Google Analytics

After opening your reporting view in Google Analytics, select ‘Real-Time’ and then ‘Events’. Since we created an event tag for Google Analytics, we can view the real-time data from our button clicks in this report.

Data is processed within a few seconds, so if you’ve clicked the button and you don’t see any data in the real-time report, then I suggest following these steps:

1. Ensure you’re in preview mode inside Google Tag Manager.
2. If you are in preview mode, then click ‘Refresh’ inside Google Tag Manager.
3. Reload your website and ensure the Google Tag Manager debug console loads at the bottom of the page.
4. Click the button again and check Google Analytics.

8. Publish the container

Once you see data for your button click inside Google Analytics, it’s time to publish the container to your website. To do this, head back to Google Tag Manager and click ‘Submit’ on the top right corner. 

That’s it!

You’ll now we tracking button clicks into Google Analytics.