Track button clicks with Google Tag Manager

With Google Tag Manager you can track clicks to buttons and send the information to Google Analytics. This is not the same thing as tracking clicks to links, you might have links without a button. So just to make it clear, in this guide we see how to track buttons clicks only.

This is one of the advanced capabilities of Tag Manager because it requires some setup before the actual tag can be built, and that can seem daunting to a new user. But in this guide, I’ll show step by step what you need to do.

Type of buttons to track

These are some examples of buttons you want to track:

• Menu buttons
• Newsletters signup
• Buy now/ complete purchase buttons
• Affiliates links for your blog
• Third-party buttons
• Learn More
• Request a demo
• Software downloads
• PDFs download

How to use the buttons clicks report

Before we dive into the guide, I want to discuss with you about how some of these examples above might seem obvious and you probably ask: “Ok Luca, why do you need to track buttons clicks for purchases? Isn’t already a report for conversions? I don’t need to track buy now button clicks!”

Yes, you know the number of your conversions because users have made an order and your tracking system is showing you a report. However, the “buy now/ complete purchase” button clicks report shows you how many times the button was actually clicked as opposed to how many purchases people have made. There are two different actions: button click and purchase. Not just because someone clicked on the “Buy now” button actually made a purchase. Sometimes you might find discrepancies but you will never know until you actually set up the button click report with Google Tag Manager.

This means you can compare the two reports to get more clues. If your buttons click report shows you a higher number than buy now/ purchases report, you have got an insight.

As for the affiliates links, the report shows you how many times people click on the product you are recommending to visit the merchant’s website. I recommend testing the buttons with colours, positioning, text to see if you can get more clicks on it.

But let’s dive into the practical guide on how to set buttons clicks on Google Tag Manager.

STEP ONE: ENABLE THE CLICKS IN THE VARIABLE MENU

Since events are triggered based on clicks, we need to make sure that click variables are selected to be captured.

1. In GTM, select “Variables” on the Left Side column below Triggers
2. Select “Configure”
3. Scroll down to Clicks and select all of the options

STEP 2: CREATE A SINGLE UNIQUE TAG

In this step, we learn how to create a tag that is unique for all clicks site-wide. Within one single tag, we can track all button clicks regardless of which page, button type and other differences.

1. Click Tag
2. Select New
3. Give this name: “GA – Event – Button Clicks”
4. For Tag Type choose “Universal Analytics”
5. Track Type select “Event”
6. Category “Button Clicks”
7. Action {{Page Path}}
8. Label {{Click Text}}
9. Non-interaction Hit “False”
10. In the Google Analytics setting box, select the drop-down menu. If you don’t have a tracking ID setup, you need to create one.
11. Click “New Variable”
12. Name the new Variable as “Google Analytics ID”
13. Enter your Universal Analytics account number. You can find it in the Admin section of your Google Analytics account > Property > Tracking Info > Tracking Code. It starts with UA-
14. Leave the cookie domain as “Auto”
15. Click Save

Google Tag Manager Tag – Google Analytics ID – Luca Tagliaferro

Now click Save and save the Tag. We are almost there. We need to configure the trigger and add it to this Tag we have just created.

STEP 3: CREATE THE TRIGGER TO TRACK ALL BUTTON CLICKS SITEWIDE

In this step, you learn how to instruct Tag Manager to track button clicks only across your entire website.

1. In GTM, click on Triggers
2. Click “New”
3. Name the trigger “Site button clicks”
4. Trigger type “All elements”
5. Select “All Clicks”
6. Save the trigger

This is where the trickiest part starts. With this trigger, we have told GTM to track all clicks on your website, regardless of whether they are buttons or just links.

Why have we done this?

The reason why we set up the trigger to track all clicks is to learn how your website captures your button. We need to find out what actually happens when we click on a button because we need the button ID to redefine the trigger.

Let’s learn how the website is tracking button clicks because every website has a different code and we need to find the custom code on your website for your own trigger.

STEP 4: FIND THE BUTTON CLASS ON YOUR WEBSITE

In this step, we find out how to redefine the trigger for your custom website button click code. We will take the example of my contact form, where my button says “Get in touch”.

1. In GTM publish your work we have done until here
2. Next in GTM click the Preview button
3. Go to your website and navigate to the button you want to track. In my website, for example, would be the “Get in touch” button for a contact form.
4. See the GTM preview coming up at the bottom of your website.
5. Click to your button you have navigated to. Make sure you open a new tab on your browser and leave the button page open, so you don’t go to the next screen and you don’t have to go back. You need the page with the button open.
6. Look at the Preview summary and you see the Tag fired.
7. Click on the last gtm.click to isolate the tag fired on this event in the Preview.
8. Find the “click classes” within the category “Variable”
9. If you can’t find the click classes variable, you can use another class: click ID or click Element, whichever is available.

To find the click ID, just right click on your button, then select “Inspect”.

Find the click ID. In my case, my click ID is comp-ji1r4ehssubmit.

STEP 5: SETUP AGAIN THE TRIGGER WITH THE RIGHT ELEMENT

Now that we know how our website defines the button we want to track, we’re going to change the existing click trigger to make it specific for the button we’re tracking.

1. Go back to GTM and click the Site buttons clicks trigger
2. Instead of having all clicks selected, choose “Some clicks”
3. On the drop-down menu on the left, select “Click ID”
4. On the right drop-down menu, paste the code you have copied.
5. Click Save

STEP 6: LET’S MAKE SURE IT WORKS

1. Click Refresh in the Preview button in GTM
2. Go back to your website and refresh it
3. Click the button you are tracking
4. If you are taken to the next page, click the back button.
5. If you are not taken to the next page, stay where you are
6. In the summary section, find your click gtm.click. If you see the Google Analytics trigger appear, then it means it’s working!

I hope you find this guide useful!