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!
