Hey there, I'm Benjamin from Loves Data. In this video you'll learn how to track
button clicks into Google Analytics 4 using Google Tag Manager. By following these steps,
you will be able to track button clicks, like people clicking to add an item to their cart,
clicking a button to make a booking, requesting a call-back, or any other
call-to-action button you've added to your website. Okay, let's get started!
We're going to track two buttons into Google Analytics 4. We're going to track a call-to-action
button and an add to cart button. To do this, we will need to configure a variable, a tag,
and a trigger in Google Tag Manager. A Google Tag Manager variable lets us capture information from
our website. We will use a variable to access information about the button that someone has
clicked. For example, we might want to track people clicking a button in a form.
We can use a variable to access details about the form someone is using on our website,
and the particular button they clicked. We will also create a tag. A tag lets us send information
to the different platforms we are using. We will be creating a Google Analytics 4 event tag and
then sending details about the button someone has clicked through to our Google Analytics reports.
And you also have the option of creating other types of tags in Google Tag Manager.
For example, if you want to send details about the button click
to Universal Analytics (instead of Google Analytics 4), to Google Ads, or Facebook.
And we will also create a trigger. A trigger lets us control when to fire our 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 which will then send an event to
Google Analytics 4. If you're just getting started with Google Analytics 4 or Google Tag Manager,
then I recommend taking a moment to download my getting started guides
and checking out my other resources. I've included links in the description below this video.
The first thing you need to do is find the button you want to track on your website. I'm going to
configure Google Tag Manager to track two buttons. I'm going to track people clicking the button for
my email newsletter, and I'm going to track people clicking an 'add to cart' button for my store.
Let's start with the button for my email newsletter... We can see the button on the page,
so we're going to view the source code. 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'... This means we can use the class to track people
clicking the button. Let's copy this, so we can use it in Google Tag Manager later.
Now let's look at another example. Let's navigate to my store... And let's select the product...
We can see the add to cart button. Let's right click this button... And select 'Inspect'...
This button is created using a div, but we can see it also has a class of
'sqs-add-to-cart-button'... Let's copy this, as we will use this in a moment.
So far, we've found the buttons on our website, and we've identified the classes we're going to
use to configure our triggers in Google Tag Manager. In some cases, you might not find
a class for the button you want to track, so you could use the ID of the element instead.
I will also show you another way to identify the buttons you want to track.
This can be useful if you can't find a class or an ID. Now let's head to Google Tag Manager...
If you're stuck trying to figure out how to track particular actions using Google Tag Manager,
like clicks on buttons and links, then you can use this method to find ways to
use those actions to trigger particular tags. First, we select 'Variables'...
And then we're going to click 'Configure' for the 'Built-in Variables'...
Now we're going to enable all of the built-in variables under 'Clicks'... If you wanted to
track form actions, then you can also enable the built-in variables under 'Forms'...
Now we're going to select 'Triggers'...
And we're going to click 'New'...
Let's name our trigger 'All Clicks'...
And select 'Trigger Configuration'... Now
we're going to select 'All Elements'... And we can save our trigger. Now we need to use
Tag Assistant to identify what we can use to track our buttons, so let's click 'Preview'...
We enter the URL of our website...
And we click 'Connect'... Our website loads, along with Tag Assistant...
Now we need to find the button we want to track... And let's click the button...
Once we've completed the action we want to track, we can select the 'Tag Assistant' tab...
Let's select 'Click'... And then 'Variables'... This lets us view the information we can access
in Google Tag Manager. We can see the value for 'Click Classes'...
The value for 'Click Element'... The value for 'Click ID'... And the value for 'Click Text'...
We can also see that there are no values for 'Click Target',
or 'Click URL', so we are not able to use those variables to trigger our tag. For this example,
we would need to use either Click Classes, Click Element, Click ID or Click Text.
So if we didn't have a value for, say, 'Click Classes', then we could create a trigger based
on the 'Click Text' instead. We would then fire a tag whenever the 'Click Text' matches the value of
'Add to Cart'. If you still can't find a way to identify the button you want to track, then
I recommend working with your web developer to adjust the way buttons are added to your website.
For example, if you don't have a 'Click Class', a 'Click ID', or any other way to identify the
button, then ask your web developer to add a class to the buttons you want to track.
You will then be able to use it to configure your variables and triggers in Google Tag Manager.
Okay, now let's head back to Google Tag Manager...
Once you've identified how to track your button, you can remove the trigger...
I recommend disabling any variables that you don't need, so let's select 'Variables'...
And then 'Configure' for the 'Built-in Variables'...
Okay, so coming back the two examples we looked at previously,
which were the button for the email newsletter form and the add to cart button. We identified
that we could use the classes for these buttons in Google Tag Manager,
so we're going to disable the options we don't need, but we will leave 'Click Classes' enabled...
And don't forget, that if you 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 Classes', 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'...
We can see there is an existing Google Analytics 4 (or GA4) configuration tag, and a Universal
Analytics tag. You will need to make sure you already have at least one of these configured,
if you don't, then I've included extra resources for you in the description below this video.
Now let's click 'New'... We need to name our tag. I'm going to name the tag 'Google
Analytics GA4 Button Email Newsletter'... And let's select 'Tag Configuration'...
And choose 'GA4 Event' as the 'Tag Type'... If you're not using Google Analytics 4, then
you can apply the same techniques to any other tags you want to create in Google Tag Manager,
including Universal Analytics tags. You will just need to select a different type of tag.
We need to select our existing GA4 configuration tag...
And then we need to name our event. I'm going to name the event 'click', 'underscore',
'button', but you can name your event anything you like. Now let's select 'Event Parameters'...
And let's add a row... Let's name the parameter 'button', 'underscore', 'class'... And let's
select the variable icon for the 'Value'... Let's select 'Click Classes' as the variable...
This will mean that the value of the class that we saw in the source code will be automatically
sent to Google Analytics. You can send additional parameters with your events to Google Analytics 4,
but I'm going to keep things simple for this example. 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 Email Newsletter'...
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 'Contains'... 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'... 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 let's create a tag for the add to cart button.
Let's click 'New'... And let's name the tag 'Google Analytics 4 GA4 Button Add'...
Let's select 'GA4 Event' as the 'Tag Type'... And let's select our GA4 configuration tag...
Now let's name the event 'add', 'underscore', 'to', 'underscore', 'cart'... And let's select
'Event Parameters'... And add a row... Let's name the parameter 'button', 'underscore', 'class'...
And let's select the variable icon for the value... Let's select the 'Click Classes' variable
again... Just like in the other tag we created, this will automatically pass the value of the
class we saw in the source code. If you have other details you would like to send to Google Analytics
as parameters, then you can add them, but again, I'm going to keep things simple for this example.
Let's select 'Triggering'... And let's click the plus sign in the top right
corner to create a new trigger... Let's name the trigger 'Button Add To Cart'...
And let's select 'Trigger Configuration'...
I'm going to select 'All Elements'... And we need to add a condition to the trigger,
so that our tag only fires when someone clicks the add to cart button. So let's select 'Some
Clicks'... And choose 'Click Classes' from the dropdown... And then 'Contains'... Now we need
to enter the class we identified for our add to cart button. For my example, I'm going to enter
'sqs-add-to-cart-button'... Now we save the trigger...
And 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 click 'Continue'... And head to our website... Now let's find our first button...
And let's click it... Now let's find our second button...
And click it...
Now let's select the 'Tag Assistant' tab... And we can select 'Click' for
the second button we clicked... We can see that our tag has fired...
We can select the tag... And we can then see that our trigger successfully fired the tag...
Let's close this... And let's select 'Click' for the first button we clicked...
Again, we can see that our tag has fired... And we can select the tag...
We can see the trigger fired our tag and sent the event to Google Analytics... Once you've tested
your buttons, you can head back to Google Tag Manager and publish your container to your live
website. 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. Let's summarize the
steps we need to take to track button clicks using Google Tag Manager... 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 Tag Assistant. To do this, click 'Preview' in Google Tag Manager.
What buttons 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!