Are you just getting started with Google Manager and don’t know where to start? Button click tracking is a great place to get going, and it can yield deep digital analytics insights. Check out this step by step guide to set up button click tracking on your site.
What is Button Click Tracking?
When an element on a web page is clicked, specific signals get sent. Button click tracking in Google Tag Manager is the process of setting up a “trigger” and a corresponding “tag” so that the proper signals are identified and isolated (this part is the trigger) and tracked (this part is the tag).
Button click tracking relies on the idea that some clicks are more important than others. In the context of a web site and corresponding digital analytics measurement plan, we will care about some clicks and not about others. For example, a random click on white space on a web page might not be worth considering. A button click to download a PDF case study, however, might be a critical part of the user journey. We’d want to measure that, and it’s a great example of when click tracking can be most useful. Click tracking like this will be sent to Google Analytics as an “event” and can also be configured to fire as a “conversion” within the Goals section of a Google Analytics View. This may seem like a lot of effort. However, it is often an important part an investment in Local SEO, SEO, social media, or PPC strategy.
For the purposes of this blog, we will focus on setting up the button click tracking in Tag Manager and then using Google Analytics to verify that the event is properly registering in our digital tracking environment.
Step 1: Use Google Tag Manager to Build a Generic Click Trigger (or Click Listener)
What is a Click Listener?
When an element on a web page is clicked, specific signals get sent. These signals have names like “Click Element”, “Click ID”, “Click Text”, “Click Target”, “Click Classes”, and more. Those different signals are each called “variables”. There are distinct values associated with each of those variables.
Building a Generic Click Trigger (which we’ll refer to as our Click Listener) allows us to use Google Tag Manager to see which of these signals “fire” when different elements are clicked. Ultimately, we’ll be selecting one of those variables and its associated value to associate with our tag. For now, we’re just trying to build a “listening” device to figure out which variables and values are out there.
Why Do We Need a Click Listener?
Google Tag Manager does not track clicks by default. The good news is that it’s pretty simple to change this. Read on below to continue with the set up process!
Create a New Trigger
Log in to tagmanager.google.com. Select the proper Tag Manager account that you have access to. You’ll see a menu on the left-hand side of the page with menu items named Overview, Tags, Triggers, Variables, Folders, and Templates.
Hit the light blue “New” button to create a new trigger. You’ll see the screen below. Give your new trigger a name. As you can see, we’ve named ours Click ‘Listener’.
Choose a Trigger Type for Your Click Listener
After naming your trigger, determine its type. Click into the space that says “Choose a trigger type to begin setup” shown above. In the screenshot below you see the “All Elements” trigger type under the Click trigger menu. Choose this one.
Configure Your Click Listener to Fire on All Clicks
With triggers, you can determine whether it fires on All Clicks or Some Clicks. For our Click Listener, we want to be listening to all types of clicks so choose “All Clicks” as shown below. Later, we will show how to build a different trigger that only fires on Some Clicks.
Configure Click Variables
Now we need to make sure that our Click Trigger has some clicks to track. From the main Tag Manager, menu, click on “Variables”, which is immediately below where we just clicked on “Triggers”.
You will see a section for “Built-In Variables” and “User-Defined Variables”. We are only dealing with Built in Variables for the purposes of this exercise. Click on the red “Configure” button within the Built-In Variable section. You’ll see a screen like the one below.
Use the check boxes to enable all of the Click Variables shown below. You have now configured built-in variables. Congrats. While you’re at it, you can go ahead and configure the other variables that look like something you might want to track the future. This is something you will do only one time.
Step 2: Use Tag Manager Preview Mode to Identify Variables and Values
What is Google Tag Manager Preview Mode?
Google Tag Manager preview mode allows you to see your triggers and tags in action before they actually are live on the internet. In this case, it will let us see what variables and values generate from different clicks.
To access Preview Mode, hit the “Preview” button in the top right of your screen when logged in to Tag Manager.
How Do You Know You’re In Preview Mode?
You’ll see this orange notification bar when you’re in Preview Mode. You can see two links at the bottom of this screenshot. The “Leave Preview Mode” will do exactly that. The “Share Preview” link allows you to open a new window in Preview Mode. Hit that link to share.
Sharing Preview Mode
When you hit the “Share Preview” link you will see the window below. We now want to access the web site where we want to track button clicks. To do so, copy and paste the “preview link” at bottom into a new browser window. Make sure the blue check mark for “Turn on debugging when previewing” is turned on.
When you paste the preview link into a new browser window, you’ll see the “Preview Container” message below.
What is a Container Code?
A “container” is another name for the Google Tag Manager core account functionality. Essentially, the Tag Manager platform works by consolidating all tags on a website (almost like a “Tag Manager”, get it?). Instead of pasting all of those tags individually into the source code of the web site, Google Tag Manager cleans up all of that by having one single piece of code deployed in the source code. That single piece of code is the code for the Tag Manager account, and that is called the “container code”. All other tags are then deployed through the Tag Manager interface, and they show up on the website through the container code.
So that’s why we’re now previewing the container.
Now Let’s Find the Button Click That We Want to Track!
In our situation, we want to track all clicks on a button to access a PDF sales flyer of the “FX250”. The purple button on the right side below is the button in question.
Get ready to click that button! But don’t click it yet until reading the section below.
Use Tag Manager Debugging Mode at the Bottom of Your Screen
Since we’re in Preview and Debug Mode, the Tag Manager debugging functionality takes up the bottom third of our screen. Check out the left side for a summary of the events that Tag Manager is tracking. You will see three events by default: Window Loaded, DOM Ready, and Page View.
Now, let’s click on the specific button that we want to track. Hold the CTRL button down when you click so you won’t be redirected off the page you’re on. You will see a change in the Tag Manager event summary. As you can see below, we now have a Link Click event and a Click event showing. In this specific case, our button opens a new window via a link to a PDF download. That is why we’re seeing Link Click as one of the events. If the click did not redirect to a new location via a link, we would only see a Click event. In any case, we are going to set up our button click tracking via the Click event (#4) so we can ignore the Link Click (#5) event.
Select the Click event (#4) in the event summary and let’s get ready to investigate some variables and values!
Access the Variables Menu Within Preview and Debug Mode
Within Preview and Debug mode we see four menu items at the top of the page: Tags, Variables, Data Layer, and Errors. Click on Variables. We will see something like the screen shown below. All websites are different and therefore your specific combination of variables and values will be different.
Our task is to identify one specific variable with a corresponding value that is unique to the click we want to track. We can see some variables that are not good candidates. The variable Click Protocol has a value of ‘https.’ The Click Hostname variable has ‘discoveryrobotics.com’ as a value. This simply tells us that the clicks take place on an SSL secured site named discoveryrobotics.com. Neither of those seem helpful in isolating the specific click we want to track.
The Click Filename variable, however, looks more promising. The value shows as FX250SalesFlyer.pdf, which is a unique value associated only with the click we want to track. Click Element and Click URL also look like they could be helpful variables based on their associated values, but we only need one variable. We will go with Click Filename to build our new trigger and tag.
Step 3: Build A New Trigger and a Tag for Our Specific Click
Build a New Trigger
We have isolated the specific Variable and Value associated with the click that we want to track. Now we will use that information to build a new trigger that will only fire on our specific click. We can either edit our prior Click Listener (we don’t need it anymore) or just build a new Trigger. Both should be fast. Let’s build a new Trigger. Within Tag Manager, hit the Triggers menu (below) and select “New” once again.
Now, let’s set up our trigger by performing four specific tasks.
First, let’s give our trigger a name. You can see that we’ve named our new trigger Clicks on FX250 Sales Flyer.
Second, we’re going to pick our Trigger Type. We did this before with our Click Listener. In the same way, we’re going to identify “All Elements” as the Trigger Type.
Third, we are going to tell our trigger to fire on “Some Clicks.” This is different from our Click Listener which we set to fire on all clicks. As we select “Some Clicks”, we now access a menu to select the specific conditions to fire our trigger.
Fourth, we will use the Variable and Value we identified earlier fire our trigger. In the drop-down menu at bottom left, we will see a list of available variables. Let’s pick the Click Filename variable.
Plug in the value we identified: FX250SalesFlyer.pdf. We now have our trigger!
Build a New Tag
From the main Tag Manager menu, select “Tags” which is right above where we just built our New Trigger.
Hit the blue “New” button to start building a new tag. You will see the screen below. We need to give our tag a name, set up the “Tag Configuration” and identify the proper Trigger for our tag to fire. Click in the top left to change “Untitled Tag” to something more helpful. We’ll go with FX250 Sales Flyer Downloads as the name of this tag. Then click into Tag Configuration to continue setting up the tag.
Configure Our New Tag With Tag Type, Track Type, and Event Tracking Parameters
Our first task in Tag Configuration is to pick our tag type. You will see tag types including Google Ads conversion tracking, Google Analytics, Google Optimize, Custom HTML tags, and many more. Remember, Google Tag Manager functions as a “container” for all the different types of code snippets (tags) that you want to deploy on your site. There are a lot of options! For our purposes with button click tracking, we want to track an event in Google Analytics. Select Google Analytics: Universal Analytics as your tag type and Event as the track type in the first drop down menu. Please note, you do need a corresponding Google Analytics property for this to work!
Now, we need to determine our Event Tracking Parameters. These parameters are what will pass into our Google Analytics property when our tag fires on our site. There is no requirement to use all four parameters shown. We are only going to use the first two: the most accessible parameters in Google Analytics.
For this specific event tracking tag, we assign click as the Category and fx250_flyer_download as the Action. We will see both of these names when we ultimately measure our events in Google Analytics. We can name them whatever we want. In naming, it’s important to provide helpful names (is there enough information to know what has happened when you view Events in Analytics?), that are mindful of any other naming conventions you’ve already established.
Configure Our New Tag
Now, we need to associate our new tag with the correct Google Analytics property for our website. There are two ways to do this. If you’ve already established a Google Analytics setting variable, you can select it from the drop down. You can read about that process here from Google. If you haven’t done this (and don’t want to do it now), that’s fine! Just hit the check mark to “Enable overriding settings in this tag” and manually enter your Google Analytics tracking ID.
Don’t know your Google Analytics tracking ID? No sweat! Pop on over to analytics.google.com and access the Admin section of your Property. Within the “Tracking Info” section, select Tracking Code. You’ll see the Tracking ID at the top of the page. Copy it and move back over to your tag in Tag Manager and paste it in to the Tracking ID section.
Your tag is now configured!
Set Up Triggering for Our Newly Configured Tag
Our tag has a name and is now configured. Now all we need to do is determine the triggering mechanism that will actually fire the tag. The good news for us is that we’ve already built our trigger. Click into the “Triggering” section of our tag to choose the trigger we already built. That’s all there is to it.
Hit the dark blue button to save the tag. You now have a tag that should work. All that remains is to test the tag and publish your container in Google Tag Manager.
Step 4: Test Our New Tag and Publish Our Container
Test Our Tag in Google Tag Manager
Let’s go back to our website in Preview Mode. We haven’t yet published our container with our new trigger and tag, so the Preview Mode is the only place where we can see if we’re actually tracking what we want to track.
Remember when we used Preview Mode to inspect the specific Variables and Values associated with clicks? Now we’re going to do the same thing, but for Tags instead of Variables. Tag Manager will show “Tags Fired On This Page” and “Tags Not Fired On This Page” as a way to test whether the tags are firing correctly.
When we click on our specific button, our tag that we’ve named FX250 Sales Flyer Downloads should fire and show up as a tag that “Fired On This Page.” Let’s hold our breath (and the CTRL button) and click…
Success! We can see the FX250 Sales Flyer Downloads tag has fired one time (along with some other tags from earlier work also firing correctly).
Publish Our Updated Tag Manager Container
Now we now that our tag works and is ready for prime time. From Google Tag Manager, you will see a blue “Submit” button in the top right of the screen. Hit that button.
We can can push the changes to a live environment. To maintain order within your Tag Manager container, you can give it a Version Name and also provide a detailed description. In this case, we might choose to add a name with the date and a mention of our new button click tracking. We could then provide more specific details of the button click we are tracking in the Version Description.
Finally, hit the blue “Publish” button in the top right of the screen. Our button click event tracking is now live!
Step 5: See New Events in Google Analytics
Use Google Analytics to See Our New Event Tracking
Remember when we identified event tracking parameters when we configured our tag? We provided a parameter name for Category and also for Action. This is the identification that will now pass in to Google Analytics to track our button click event. If we use the Realtime Event report within Google Analytics we can see our event registering when we click on specific button for which we established tracking.
More great reports in Google Analytics are in Events reporting (Overview, Top Events, Pages, and Events Flow). You may also choose to configure this new button click tracking event as a goal that will record a conversion in Google Analytics. We’re not going to do that now, but you can get in touch for digital marketing training or other services if you’re interested in learning more.
We hope this was a helpful read! Thanks for coming by!