Hey there, I'm Benjamin from Loves Data.
In this video, you're going to learn how to track button clicks using Google Tag Manager.
We will use Google Tag Manager to identify when someone clicks a button on our website
and send an event to our reports in Google Analytics.
You can even use this technique to track button clicks into other platforms, including Google
Ads and Facebook.
Okay, let's get started!
To track button clicks using Google Tag Manager we will be making use of a variable, a tag
and a trigger.
The variable will let us access information about the button that someone has clicked
on our website.
For example, we might want to track people clicking a button in a form.
We can use a variable to access details about the particular form someone is using on our
website.
We will also be using a tag.
A tag lets us send information to the different platforms we are using.
For example, we can create a Google Analytics tag to send details about the button someone
has clicked to our Google Analytics reports.
Or we could use a tag to send details to Facebook or Google Ads.
And we will also create a trigger.
A trigger lets us control when to fire the tag.
We will configure the trigger to look at the information available in the variable and
if the details match the button we want to track, then the trigger will fire our tag
and the tag will then send data to Google Analytics.
If you're just getting started with Google Tag Manager, then I recommend taking a moment
to download my getting started guide and check out the extra resources in the description
below this video.
The first thing we need to do is find the button we want to track on our website.
I'm going to track people clicking the button for my email newsletter form.
Now that we've found the button we want to track we're going to view the source code.
So I'm going to right-click the button...
And I'm going to select 'Inspect'...
This opens Developer Tools and we can see the button is highlighted in the source code.
We can see the button...
And we can see that it's located in a form...
And that the button has a class of 'newsletter-form-button-label'...
This means we can use the class to track people clicking the button.
Let's look at another example.
Let's scroll down the page...
We can see another button...
And this button isn't contained in a form.
So let's right-click this button...
And select 'Inspect'...
We can see this button also has a class, but that it isn't contained in a form.
We can also see this button is a link wrapped in a div which then has styles applied to
make it look like a button.
This means we can again use the class to track people clicking this button.
So at this stage, we need to identify the way the button is created.
Is it a button?
Is it a button in a form?
Or is it a styled link?
Then we also need to identify if it has a class we can use to then configure our tracking
in Google Tag Manager.
If you don't have a class, then you could also use the ID for your button.
If you have any issues identifying the class or ID for your button, then check out my video
that shows you an alternate option using the debug console.
You can find a link to the video in the card on the top right corner or in the description
below this video.
Now it's time to head to Google Tag Manager...
We're going to begin by enabling the built-in variable that will allow us to access and
use the button class we found when we viewed the source code of our website.
So let's select 'Variables'...
And now let's click 'Configure' under 'Built-in Variables'...
For my example, we saw the button was contained in a form and we identified the class for
the button.
This means we're going to scroll down the list of built-in variables and enable 'Click
Classes'.
If you've found a different way to identify your button, then you will need to enable
the appropriate variable.
For example, if you want to use the form's class, then you would enable 'Form Class',
or if you wanted to use the form's ID, then you would enable 'Form ID', or if you identified
a link ID, you would enable 'Click ID'.
Now it's time to create our tag which will send data to Google Analytics.
Let's select 'Tags'...
And 'New'...
Now we need to name our tag.
I'm going to name the tag 'Button Click Email Sign Up'...
Let's click 'Tag Configuration'...
And choose 'Google Analytics' as the 'Tag Type'...
We need to select 'Pageview' and change this to 'Event'...
Now we can choose how we want clicks on our button to be reported in Google Analytics.
I'm going to enter 'Button' as the 'Category'...
Then 'Click' as the 'Action'...
And 'Email Sign Up' as the 'Label'...
I'm also going to set 'Non-Interaction Hit' to 'True', so that I'm not impacting the bounce
rate in Google Analytics.
And we also need to select our Google Analytics settings variable...
If you're already using Google Tag Manager to track pageviews into Google Analytics,
then you should have an existing variable.
If you don't have a Google Analytics settings variable, then you will need to create a Google
Analytics tag that tracks pageviews on your website, create the settings variable, and
then come back to create your event tag.
Now it's time to add a trigger to our tag.
Let's select 'Triggering'...
And now let's click the plus sign in the top right corner to create a new trigger for our
tag...
Let's name the trigger 'Button Click Email Sign Up'...
Now we select 'Trigger Configuration'...
And I'm going to select 'All Elements'...
Now we need to add a condition to the trigger so that it only fires when someone clicks
the specific button we want to track.
To do this, we're going to select 'Some Clicks'...
And then we're going to choose 'Click Classes' from the dropdown...
And then 'Equals'...
And enter the class we identified when we viewed the source code of our page.
For my example, I'm going to enter 'newsletter-form-button-label'...
If you've found a different way to identify clicks on your button, then you'll need to
select the appropriate variable for your condition.
For example, if you are going to use the Form's class, then you would select 'Form Classes'
instead of 'Click Classes'.
Now we save the trigger...
And we save the tag...
Now it's time to preview the container and make sure we're correctly tracking our button
clicks.
To do this, let's click 'Preview'...
And now let's head back to our website...
And refresh the page...
We can see the Google Tag Manager debug console loads at the bottom of the page.
Now let's click the button on the page and watch for the summary to update on the left-hand
side of the debug console...
You can also 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.
So now that we've clicked our button, let's head to Google Analytics...
Let's select 'Real-Time'...
And then 'Events'...
We can now see that our button has been tracked as an event into Google Analytics.
If you don't see your button in this report, then there are a few reasons why this can
occur.
Check out the extra resources in the description below this video for my top troubleshooting
suggestions.
Since I can see the event is being reported correctly in Google Analytics it's time to
publish my changes in Google Tag Manager.
So let's head back to Google Tag Manager...
Now we click 'Submit'...
Enter details about the changes we've made...
And click 'Publish'...
That's it!
So that's how you can configure button click tracking using Google Tag Manager.
To briefly summarize the steps…
You will need to enable the built-in variable to identify when someone clicks your button.
Then you will need to create a tag to send the details to Google Analytics (or any other
platform).
And finally, you will need to create a trigger, so that your tag only fires when the button
you specify is clicked.
I recommend testing your tag and trigger using the debug console.
Just click 'Preview' in Google Tag Manager.
What button are you going to track using Google Tag Manager?
I'd love to know!
Let me know in the comments below, and if you found this video helpful, please subscribe,
share it with your friends, and hit the like button so I know to make more videos like
this.
See you next time!