Google Tag Manager (GTM) is a fabulous tool to house all your website or mobile app tags and code snippets. While the basics are fairly easy to follow and implement, some of the more advanced capabilities can seem daunting and overwhelming. I recently tackled learning how to track button clicks and am breaking it down into simple, easy-to-follow steps so you can implement this feature as well.

Which Buttons Might I Want to Track on My Website?

Here are just a few examples of buttons you might want to track:

• Navigation Bar
• Subscribe/Sign-Up
• Learn More
• PDF Downloads
• Affiliate Marketing Partners
• Third-Party Links

How Google Tag Manager Can Track Clicks

There are two ways that GTM can track events like clicks. One is using Data Layer Event Code. The other is Auto-Event Tracking. I found several ways to configure your tags and triggers and I’m going to outline the one I found the simplest using auto-event tracking.

Step One: Make Sure Clicks Are Enabled in the Built-In Variables 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, then exit out. You’ll see all the click options now added under variables.

Step 2: Create a Site-Wide Click Trigger

This step is to help us learn how to identify the click event or button we want to track.

1. In GTM, click on “Triggers”
2. Click “New”
3. Name the Trigger in a way that makes sense to you. I’m choosing “Site-Wide Clicks”
4. For your trigger type, go to Clicks, then select “All Elements”
5. Select “All Clicks” since this is your site-wide click trigger
6. Hit “Save”

Step 3: Learn How Your Website Captures Your Button

Now that we have told GTM to see all the clicks on the site, we’ll use the Preview Mode to see what happens when we actually click on the button what we’re trying to track. For this blog post, I’m going to capture Newsletter Sign-ups. Hang in here with me – this is the trickiest part.

1. In GTM, publish your work by hitting the submit button and continuing through the other prompts. This allows what we completed from the first to steps to become active.
2. Next, in the GTM Workspace tab, click the Preview button. This will allow us to peak in on which Tags and Triggers are firing on our website.
3. You’ll go into Tag Manager Preview Mode. Enter your website and click connect. A new tab should appear with your site. Click “Continue” in the Tag Manager Preview Mode. All updates you make on the new tab on your site will be tracked in the Preview Mode for you to review.
4. Navigate to the button you want to track and click it. Each click will generate new steps in the Tag Manager Preview Mode tab. Because you clicked on your button, you’ll generate new activity to be tracked.
5. Go back to the Tag Manager Preview Mode tab and look at how your clicks were recorded. If the button you are tracking is on your home page, you’ll have only clicked once and it should be easy to spot. If you had to navigate through your site to get to the button, you’ll look for the last “Click” that is highest in the summary since that’s the last action you took. We can double-check that this looks correct by selecting the Variables tab. Look at the “Click Text” variable to make sure it matches your button. If there isn’t text, then there will be other identifiers here for you to see that it’s the right code. In my case, I’m tracking newsletter sign-ups that had an “arrow” button without text. (BTW – you’ll see I have scroll depth tracking for this account. You can learn how to enable that here if you’re interested!)
6. Find the “Click Classes” variable (see the arrow in the screenshot above). This tells you the code for how this particular event is named. Copy the code. In my example above, it’s “inputSubmit submit newsletterSubmit”.

Step 4: Redefine Your Site-Wide Click Trigger

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 on your Site-Wide Trigger
2. Rename it for the button you’re tracking. For me, this will be “Newsletter Sign-Up”
3. Instead of having “All Clicks” selected, now choose “Some Clicks”
4. In the left-most drop-down menu, select “Click Classes”
5. Select “contains” from the middle drop-down menu
6. In the right most drop-down menu, paste the code you copied above
7. Click “Save”

Step 5:  Add the Trigger to a Tag

Now that we have the correct trigger, we must assign it to a tag.

1. Click “Tags”
2. Select “New”
3. Input a name that makes the most sense to you. I like to be as clear as possible, so I’m choosing “Analytics – Event – Newsletter Sign-Up Button”
4. For Tag Type, choose the Analytics that is appropriate for your account. In this example, I’ll use “Google Analytics: Universal Analytics”
5. For Track Type, select “Event”
6. There isn’t a right or wrong way to name the fields here, but complete this as it makes the most sense for your button. Here is how I completed it for this example:
   • Category: Button Clicks
   • Action: Click
   • Label: Click on the lego like icon and select “Page Path”
7. In the Google Analytics Settings Box, select the dropdown. If you don’t have a Tracking ID set-up, you’ll need to create one. You know you have one set up if you see {{Google Analytics}} as an option. If you don’t see that, follow these steps:
   • Click “New Variable”
   • Name the Untitled Variable. I think “Analytics ID” makes sense
   • Enter in your Universal Analytics Account number in the Tracking ID section. You can find this in Google Analytics. It’s the number that begins with “UA-“ and a series of numbers.
   • Leave “Cookie Domain” as “auto”
   • Click “Save”. This takes you back to the Tag Screen.
8. Almost there! Now we must add our button trigger to this tag. Click on the trigger icon below
9. Select your button trigger
10. Hit “Save”
11. Click “Submit” to publish your changes.

Step 6: Let’s Make Sure it Works!

1. Click “Refresh” in the Tag Manager preview tab.
2. Go back to your website and refresh it.
3. Click the button you are tracking.
4. In the Tag Manager preview, find your click again. You should see your Google Analytics Trigger Appear. Success!

Step 7:  One Last Double-Check

1. Go into your Google Analytics Account. I’m in a UA account for this example.
2. In the Real-Time Section, go down to “Events”.
3. You should see your event there. If you don’t, go back to GTM to make sure you published everything. Then refresh your site and click on your button again. Check Analytics again to see if the event is now there. If you still don’t see it, go back through these steps to see if you can catch any steps you may have missed.

I can’t tell you how many times I’ve referred back to this post myself, so I hope you find it helpful as well!  If you are looking for other GTM triggers to test, check out this blog for some ideas. We also have another post for you that includes a different way to track PDF downloads.

Comment below to share your experiences and how this post helped you!