In this video, you will learn how to track clicks in GA4 using Google Tag Manager.
You can use this technique whenever you want to report on particular elements people are
clicking that aren't automatically tracked in GA4.
For example, you might want to track when people click a particular button, when they
click a particular item in your menu, or when they click on a banner you're featuring on
your home page.
Hey there!
I'm Benjamin from Loves Data.
I'm going to walk you through some examples of different clicks you might want to track
into Google Analytics.
We're going to track these custom clicks using Google Tag Manager, and after we've walked
through click tracking, I will also cover clicks that Google Analytics can automatically
track.
Okay, let's jump in and get started!
We're looking at my demo site and we can see there is a banner at the top, along with a
button.
So let's walk through how we can track people clicking on this button.
To do this, let's head to Google Tag Manager.
There are different ways you can identify the element you want to track so you can configure
your tag, trigger, and variables in Google Tag Manager.
In this video, I'm going to show you the approach I use which is really useful because it will
show us what's automatically available for us to use without having to spend time guessing
the best approach.
To do this, let's navigate to 'Variables'.
We can see there are some built-in variables that are already enabled for us.
If you're new to Google Tag Manager, variables let you capture different information from
your website to use in your tags and triggers.
For example, we can see there are built-in variables for 'Page Hostname', 'Page Path',
and 'Page URL'.
We can use these variables to understand the page someone is looking at on our website.
The hostname gives us the domain name of our website, the path is everything after the
domain name, and the URL is the domain, the path, and any query parameters and fragments.
There are additional built-in variables.
To view these, let's select 'Configure' on the top right corner.
We can see the built-in variables that have already been enabled.
Let's scroll down.
And let's enable the built-in variables under 'Clicks'.
These are 'Click Element'.
'Click Classes'.
'Click ID'.
'Click Target'.
'Click URL'.
And 'Click Text'.
These are super useful because they will give us information about the elements we click
within the website.
While we're here, I also want you to go ahead and enable the built-in variables under 'Forms',
as we will be using these a little bit later.
So let's also enable 'Form Element'.
'Form Classes'.
'Form ID'.
'Form Target'.
'Form URL'.
And 'Form Text'.
Okay, now let's close this.
And let's navigate to 'Triggers'.
Now let's click 'New'.
Let's name the trigger 'Click All Elements'.
And let's select 'Trigger Configuration'.
Now let's choose 'All Elements'.
This trigger will fire every time we click on the website.
We're not going to use this to fire any tags, but what we are going to do is use it to identify
the elements and the information for the elements that we do want to track.
Okay.
Let's save the trigger.
Now let's click 'Preview'.
Enter the URL for our website.
And click 'Connect'.
We can see our website loads and tag assistant is now connected.
This means we can click the element, or elements, we want to track as we travel through our
website.
Since I want to track the button in the banner, let's click this.
Now let's open the tag assistant tab.
We can see there are two click events on the left.
There's 'Click'.
And 'Link Click'.
We can use either of these to identify how to track the button.
Since link click is more precise, than just click, let's select this option.
Now let's select the 'Variables' tab in the middle.
We can now see all of the built-in variables we enabled, along with the values Google Tag
Manager has identified.
We can see 'Click Classes'.
'Click Element'.
'Click ID'.
And so on.
Scrolling back up, we can see the class for the element is 'sqs', 'dash', 'button', 'dash',
'element', 'dash', 'dash', 'primary'.
Let's copy this.
And scrolling down.
We can see the click text is 'Learn More'.
This is the text for the button element.
We might want to use this too, so make a note of it, just in case.
Now let's head back to the website.
And navigate back to the page with the banner.
It's worth checking to see if there are any other links to the same page or any other
elements that might be tracked too.
Basically, we want to ensure that we will only be tracking clicks on the element that
we want, and that we're not tracking any other clicks by mistake.
The only other link that goes to the same page is in the menu.
If we wanted to be extra careful, we can click this.
And then open the tag assistant tab again.
We can then select the new link click event on the left.
And checking in the variables tab.
We can see that the click classes variable is actually blank, so it's not the same as
the class for the button we clicked earlier.
This means we can now configure a trigger and tag to track the button in the banner.
So let's head to Google Tag Manager.
And let's create a new trigger.
Let's name the trigger 'Home Page Banner Button'.
And let's select 'Trigger Configuration'.
And let's choose 'Just Links' because we identified that we wanted to use the link click event.
Now let's select 'Some Link Clicks'.
Ensure that 'Click Classes' is selected.
And let's change 'Contains' to 'Equals'.
And let's paste the class we copied from tag assistant.
Now we could probably just save the trigger, but to be extra safe and ensure we're only
triggering out tag for the button we identified on the home page, let's click the plus sign
to add another condition.
And let's change 'Click Classes' to 'Click Text'.
And select 'Equals'.
And enter 'Learn More' as the value.
And let's add one more condition.
Let's select 'Page Path'.
Then 'Equals'.
And enter 'forward slash'.
This means our trigger will only fire when these three conditions are met.
So someone needs to click the button with the correct class, the button needs to contain
the text 'Learn More', and it needs to be one the home page of our website.
Now let's save the trigger.
And let's navigate to 'Tags'.
Let's create a new tag.
Let's name the tag 'Google Analytics GA4 Banner Click'.
Now let's select 'Tag Configuration'.
And choose 'GA4 Event' as the tag type.
Now let's select our existing GA4 configuration tag.
And I'm going to enter 'select', 'underscore', 'content' as the name of the event.
This is one of Google's recommended events, but you can name your event anything you like.
To learn more about events and how to name them, I've included links to extra resources
in the description below this video.
Okay, now let's select 'Event Parameters'.
And click 'Add Row'.
Let's enter 'content', 'underscore', 'type' as the name.
And let's enter 'banner' as the value.
Let's click 'Add Row' again.
Let's enter 'location', 'underscore', 'id' as the name.
And now let's select the Click URL variable as the value.
Using the variable means that we will automatically be passing the URL of the element that's clicked.
You could add additional parameters for your tag, but I'm going to leave these two, and
let's scroll down and select 'Triggering'.
Now let's select the trigger we just created.
This is the 'Home Page Banner Button' trigger.
And let's save the tag.
And now let's click 'Preview'.
Tag Assistant loads.
And we head to our website.
Now let's click the button.
And let's open the tag assistant tab.
We can see our banner click tag has fired.
And we can select the GA4 measurement ID at the top.
This shows us the events that have been sent to Google Analytics.
And we can see our 'select content' event.
Let's select this.
And near the bottom, we can see the two parameters we created, along with their values.
Okay, let's head back to the website.
We're going to configure a trigger and tag to track when people click the sign up button
on this page.
So let's complete the form.
And click 'Sign Up'.
Now let's head back to tag assistant.
And let's select the last click event which is for the button click.
And looking at the variables tab, we can again see the variables and information we can use
to trigger a tag.
Let's scroll down.
We can see the form classes variable.
Let's copy the value.
And let's scroll down.
And we're going to copy the 'Form Text' value.
And the 'Page Path' value.
Now let's head to Google Tag Manager.
And navigate to 'Triggers'.
Let's create a new trigger.
And let's name the trigger 'Email Sign Up Form'.
Let's select 'Trigger Configuration'.
And let's choose 'Form Submission' as the type.
Since we only want to track when people successfully complete the form, let's enable the 'Check
Validation' option.
I need to flag, that this option doesn't always work.
It will depend on your form, so as we will see in a moment, we might need to adjust how
we trigger our tags depending on our form.
Since we've enabled the 'check validation' option, we should limit our trigger so that
it only fires on particular pages.
So let's select 'Page Path'.
And enter the path we copied from tag assistant.
Now let's select 'Some Forms'.
And select 'Form Classes'.
Then 'Equals'.
And paste the class we copied.
Now let's add another condition.
And select 'Form Text'.
Then 'Equals'.
And enter the text from our button.
Now let's save the trigger.
Let's navigate to 'Tags'.
And let's create a new tag.
Let's name the tag 'Google Analytics GA4 Newsletter Button'.
And let's select 'GA4 Event' as the tag type.
Now let's select our GA4 configuration tag.
And let's enter 'generate', 'underscore', 'lead' as the name of the event.
I'm going to skip adding custom parameters, so let's select 'Triggering'.
And let's select the trigger we just created.
Now let's save the tag.
And let's click 'Preview'.
Our website loads.
And let's complete the form.
And click 'Sign Up'.
Now let's select the tag assistant tab.
And select the click event.
On the 'Tags' tab.
We can see our Newsletter Button tag didn't fire.
Let's select this.
We can see two of our conditions matched, but Google Tag Manager wan't able to see that
the form was successfully submitted.
This means we can't use the form validation option for our trigger.
So our choice is to track the button even if someone hasn't successfully completed the
form.
Or we need to use a different approach.
Today we're going to use another approach to track people completing the form.
Let's head back to the website.
And let's right click the thank you message.
And select 'Inspect'.
We can see the thank you message is contained in a Div with a class of 'form', 'dash', 'submission',
'dash', 'text'.
Let's copy this.
And let's head back to Google Tag Manager.
Now let's navigate to 'Triggers'.
And select the 'Email Sign Up Form' trigger.
Let's click to edit the trigger.
And let's change the trigger type to 'Element Visitibility'.
Now let's choose 'CSS Selector' as the selection method.
And let's enter 'dot'.
And paste the class we copied as the element selector.
Now let's leave the defaults.
And adjust the conditions, so we have one condition.
For 'Page Path'.
Then 'Equals'.
And then enter the page path for the form.
This is 'forward slash', 'example', 'forward slash', 'email', 'dash', 'newsletter'.
Now let's save the trigger.
And let's click 'Preview'.
Our website loads.
And let's complete the form.
We can now see the thank you message, so let's open the tag assistant tab.
And we can see our tag has fired because the thank you message was visible.
So this is a great technique to use if you're forms aren't compatible with the form validation
option available in Google Tag Manager.
Now let's head back to Google Tag Manager.
And let's remove the 'Click All Elements' trigger.
And now let's navigate to 'Variables'.
And let's click 'Configure' for the built-in variables.
Now let's disable all of the variables we don't need.
So let's deselect 'Click Element'.
'Click ID'.
And 'Click Target'.
We didn't use these, and we can always enable again if we need them in the future.
And we can also disable all of the form variables, as we didn't use these either.
Now we can close this.
And we can click 'Submit' to publish the changes to our live website.
We name our version.
And click 'Publish'.
We will now be tracking the banner button and when people successfully complete the
form on our website.
Finally, I want to briefly run through the events that Google Analytics can automatically
collect using the enhanced measurement feature.
Let's head to my blog to see a summary of these events.
Scrolling down, I've listed all of the events that will automatically be collected by default.
We can see there is the 'click' event for outbound links.
The 'file download' event for clicks to download files.
Form start and submit events.
And video events when people click to watch embedded YouTube videos on your website.
So it's worth taking a moment to check if any events are being automatically collected
into your reports.
To learn more about these automatic events and the enhanced measurement feature, you
can check out my dedicated tutorial.
I'd love to know what custom clicks you're going to track into GA4.
Let me know in the comments below!
And if you haven't already, please take a moment to subscribe to my channel for all
of my latest tutorials.
Thanks for watching and I'll see you in the next video!