How To Track Button Clicks with Google Tag Manager

In this video, we will learn how simple it is track button clicks using Google Tag Manager. You will learn how to identify the class or id of the button you want to track and how to setup your Google Tag Manager tag to fire when the button is clicked. Watch the video below:

Video Transcript

Tracking button clicks with Google Tag Manager is a very simple and easy process. For this example, we’re going to use datadrivenlabs.io as our example.

We’re going to be tracking the button clicks here on the view services button. You can also track other clicks on any other elements on the page such as these more info buttons, this learn more button or any of these link clicks that you would like to track. For this example though, we’re going to stick to tracking just this view services button.

First, you’re going to want to jump over here to your Google Tag Manager. Google Tag Manager uses a system of tags and triggers. When a trigger is identified, the tag will fire. The tag can be event tracking a Facebook Pixel, any kind of code that you want to fire off. In this case, we’re going to go ahead and we’re going to want to set up a trigger to just track when someone clicks on the view services button.

First thing we need to do is we need to enable some built-in variables. We’re going to go over here to variables. We’re going to hit configure and then you’re going to scroll down and you’re going to turn on the click element, click classes, click ID, click target, click URL, and click text.

I’ve already turned these on for this particular environment, however, make sure that all six of these are checked.

Next, we’re going to want to enable a trigger that can fire on all clicks. This is going to be so that we can see what variables are being presented, which is an easier way than trying to go in and identify exactly what that button is. For this, we’re going to go over here to triggers. We’re going to hit new. We’re going to just call this click all clicks. Then we’re going to select click on all elements and then we’re going to make sure that we have a trigger fire on all clicks. We will hit save. Now we will go ahead and we will hit preview.

Now that we’re in preview mode, we’re going to go back over to our website and we’re going to go ahead and refresh the screen. Once you refresh, you will get the quick preview coming up. It’s going to show everything going on. Notice over here our different summary items. Because we set a trigger to fire whenever we click, you’ll notice that if we click anywhere on the page, so for example when we click here, it’s going to register GTM click. If we go ahead and we click over here, it registers another click. If we click on anything else on the page, it will register these clicks.

Now what we’re going to want to do is we’re going to want to inspect these in more detail. For example, we’re going to go ahead and select one of these clicks and we’re going to hit variables. Instead of here, you’ll notice that we can actually see the click classes. You can also see the click elements & click texts. We just want to click on data driven, digital marketing and design for small businesses. You’ll see all the different clicks are being notated and also their click classes are being notated as well. Now that we can see these variables, what we’re going to want to then do is we’re going to want to go ahead and filter and figure out what we need to filter for our button.

To do that, let’s go ahead and go back to our page. This is the button we’re going to want to click on. Now because this button does open up a new page, what we want to do is we want to hold down the control or command key if you’re on a Mac, click it, and it will open in a new window. We’re going to ignore what opened in the new window and just focus over here on that click that we did. As you notice, we now have new variables to look at. We have click classes, click element and so forth. Here we can actually see that the click element was the website address. The click classes is this string of classes there on that button.

Click text was view services and the click URL was to that new page. Now that we have this information, we can go ahead and set up our button click. We’re going to just come back over here to Google Tag Manager and then we’re going to go ahead and navigate to our click all clicks, and we’re going to rename this to view services CTA button. Then we’re going to come down to where it says this trigger fires on, and we’re going to change it to be some of the clicks. Now we have the ability to filter by those different variables that you saw, click class, click element, click URL and so forth. In this case, we’re going to do the click class. We’re going to do contains.

Once we go back over here to grab our code, one thing I do want to point out is not every click is the same. For example, we see here that on this one, we have this as our string for a class. However, if we were to click it again and we will actually click on the text itself or even click on the arrow, one of the things that you’ll notice is sometimes this class can change. That’s because different pieces of this button have different classes. This is actually when we look inside, you’ll see this is a tag to create and this has its own class here. This one here is an actual icon, so it has its own class. Then you have the actual button up here and you see its class as well.

We have different classes coming from the click. In this case, what we’re going to want to actually do is we’re going to want to switch our tracking over to the link click. Because one of the things you’ll notice is on all of these, the link click stays the exact same. What we’re going to do … To show you, let’s go back into inspect element. You’ll see us because this is the actual hyperlink, so it’s always going to pull this and that’s what we want to track. To change that inside of Google Tag Manager, you’re going to come back over here and we’re going to change all elements to be just link clicks. Then we’re going to go ahead and still key on some clicks.

We’re going to come back over here to grab our class. Now we’re going to go ahead and copy this class and we’re going to bring it back over here, add it in, save. Once we have saved, we’re going to go ahead and … It’ll close out automatically. We’re going to create a tag to fire so we can test this. We’ll hit new. What we’re going to do is I’m going to just select custom HTML for now so that we can test this. We will hook this up to event tracking in a little bit. Let’s call this test. We need to hook it up to the trigger we just created. We’re going to hit save. We’re going to refresh our preview.

Come back over here, refresh our screen. Now when we click on this, we’re going to come over and see if the tag fire. The tag did not fire on this click, so what we want to do is we want to figure out well, why did this tag not fire. We’re going to come back over here to variables. This looks like the variable that we did put in. However, we can go back over the tags and we can find our different tags that did not fire on this event such as test. When we open it up, it will show us that the event equals a GTM click, so that was correct, but one of the things that did not match was the click classes apparently did not contain this information here, so this means that we did something wrong there.

What we’re going to do is we’re going to take a closer look at this and we’re going to figure out why did this not work. One of the things that stands out to me is we have a space here in this word. One of the things that I see is it shows it here is going down to another line. That line break must have caused an issue there. What we’ll do since we’re troubleshooting, we’re going to come back over here, we’re going to go back over to our triggers, select that trigger, and we’re going to edit this. Here is that space. We’re going to remove that space and see if that fixes it. We’ll hit save. Refresh again. Come back over. Refresh our page. We’re going to try again.

We’re going to go and click and there we go. It will show this tag was fired. We come over here. We’ll see tags fired on this event. We’ll see that our tag was fired. When you run through, you’ll see all green checks down the board, which means now this button is being tracked when it’s clicked. Now that we know that our tag is being fired, let’s go ahead and make this tag save an event to Google Analytics. We’re going to come back over here to Google Tag Manager. We’re going to go over to our tags, select our test tag. Let’s go ahead and call this view services button click. We’re going to change this type to be our universal analytics and event.

Then we’ll go ahead and put on our category, our action, and our label. We’re going to select our Google Analytics variable and hit save. Now we are tracking our clicks inside of Google Analytics as an event. We’re going to go ahead and submit this. Publish it live. Now we’ve published our new trigger and our new tag live onto our website, which means we will now be tracking anytime somebody clicks on this button. Setting a button tracking is very simple and very quick to do. It’s what we went through here.

It was actually great that we ran into an error because that error allowed us to understand how to troubleshoot and figure out what’s going on so that we can go ahead and make sure we are tracking right. The other way you can always look to verify as we showed earlier is by doing inspect. When you inspect, you can always come up and you’ll see the classes are actually written into the HTML. You’ll see here when this was coming over, we had that space in there and there was no space. That was how we were able to troubleshoot that. Get that fixed and cleaned up. I hope this video helps.

Comment down below if you have any questions and we can definitely see if we can help you out with fixing up those issues. Have a great day.