Hey there, I'm Benjamin from Loves Data. Welcome
to the six-lesson in my Google Tag Manager training series. During the series we've covered
how to get started, adding tags, testing tags, and more. In this lesson, we're going to cover
how we can track clicks, buttons, and forms using Google Tag Manager. We'll create triggers to
send data to Google Analytics, but you can also apply the same techniques to fire other tags,
like a Facebook event. Okay, let's get started! To start we're going to look at how we can track
people clicking on particular elements on our website. For example, if we have an announcement
bar or a special offer featured on our website, we can use Google Tag Manager to fire a tag
for specific clicks. Let's start by heading to my demo site... The first thing you need to
do is identify the element you want to track. At the top of my demo site, we can see there is
an announcement bar, so let's look at how to track people clicking on this. So let's right click the
announcement bar... And let's select 'Inspect'... We can see there is a link and the link has a
class of 'sqs', 'dash', 'announcement', 'dash', 'bar', 'dash', 'url'... So we are going
to use this class to configure a trigger in Google Tag Manager. Now that we've
identified the element we want to track, let's head to Google Tag Manager...
And let's create a new tag... Let's name the tag 'Google Analytics
4 GA4 Announcement Click'... For this example, I'm going to create
a Google Analytics 4 event tag, but you can use the same approach to send an event
to a Universal Analytics property, or another type of tag. So let's choose 'Tag Configuration'...
And select 'GA4 Event' as the tag type... We need to select our existing GA4 configuration
tag... And now let's name the event 'select', 'underscore', 'promotion'... And let's
select 'Event Parameters'... And add a row... Let's enter 'promotion', 'underscore', 'id'...
And let's select the variable icon on the right... Now let's choose the 'Built-in' variable
option on the top right corner... And let's enable the 'Click Class' variable...
This will mean that the value of the class people click will automatically be passed to Google
Analytics. Remembering back to the demo site, this will be 'sqs', 'dash', 'announcement',
'dash', 'bar', 'dash', 'url' for clicks on the announcement bar. Now let's add another row...
And let's enter 'location', 'underscore', 'id'... Let's select the variable icon again... And the
'Built-in' option on the top right corner... This time, let's enable
the 'Click URL' variable... This will automatically pass the link that is used
in the announcement banner to Google Analytics. So we will be able to report on the number of
clicks, along with the URL and class of the element. Next we need to add a trigger to the
tag, so let's select 'Triggering'... And let's click the plus sign to create a new trigger...
Let's name the trigger 'Announcement Click'... And let's select 'Trigger Configuration'...
Since the announcement bar is a link, we're going to choose 'Just Links', but if you wanted to
track people clicking on other types of elements, then you could consider using the 'All Elements'
trigger. Now let's select 'Some Link Clicks'... And let's ensure 'Click Class' is selected... Now
we can select 'Equals'... And enter 'sqs', 'dash', 'announcement', 'dash', 'bar', 'dash', 'url'
to match clicks on the announcement bar link... Now let's save the trigger... And the tag... We can now preview our changes... And open the demo site... We can then click on the announcement
bar... And head to the Tag Assistant tab... We can now see our tag has fired... And that
we're sending an event to Google Analytics every time someone clicks our announcement bar... Now that we've covered how to
track clicks on website elements, like promotions, let's look at how we can fire
a tag when someone clicks on a website button. Let's head back to my demo site to take a look...
Here we can see a button on my demo site... When we click the button a form opens... Let's close
the form... And let's right click on the button... And choose 'Inspect'... We can see the button...
And we can see it has three classes applied... We're going to use the 'sqs', 'dash', 'editable',
'dash', 'button' class to configure our trigger. So let's head back to Google Tag
Manager... And let's create a new tag... Let's name the tag 'Google
Analytics 4 GA4 Button Form'... And let's select 'Tag Configuration'... Now let's
choose 'GA4 Event' as the tag type... We need to select our GA4 configuration tag... And let's name
the event 'select', 'underscore', 'content'... And just to flag, you're free to use any
of the other recommended event names, or even create your own event name. Now
let's select 'Event Parameters'... And add a row... Let's enter 'content', 'underscore',
'type' as the name... And 'button' as the value... Now let's add another row... Let's enter 'item',
'underscore', 'id' as the name... And let's click the variable icon for the value... Let's select
the 'Built-in' option on the top-right corner... And let's enable 'Click Text'... This will
let us capture the button text and send it to Google Analytics. An alternate option is to simply
manually enter the value you would like to see in your reports, like we did for the 'Content Type'
parameter. Now let's add a trigger to our tag... Let's create a new trigger... And let's
name the trigger 'Form Button Click'... And let's select 'All Elements'
as the trigger type... Now let's choose 'Some Clicks'... And choose
'Click Class'... Then 'Contains'... And enter 'sqs', 'dash', 'editable', 'dash', 'button'...
We can now save our trigger... And our tag... Now let's preview our changes... And open the demo site... We can then click on the button...
And head to the Tag Assistant tab... Great! We can see our tag has fired... Okay, so now we've covered tracking clicks
and buttons, let's look at how we can track forms. Let's head back to my demo site one
more time... Here we can see a form that captures people's email address... Now the way
you configure a trigger for form submissions will depend on a number of factors. This will
include the way your website has been developed. For example, the platform you're using.
My demo website is using Squarespace. And it will come down to how the form functions
on your website. There might be times when you have a standard form where you can configure
your tag to fire based on the form's class. And there might be times the form uses AJAX
to dynamically capture details and pass back a confirmation message. Okay, let's right-click...
And select 'Inspect'... We can see the form... And we can see it has a class of 'newsletter',
'dash', 'form'... Since I'm using Squarespace, I won't be able to simply use this class.
However, if you're not using Squarespace, then this is a good starting point. So for my
Squarespace example, let's submit the form... We can see a thank you message appears on the same
page, so we haven't been redirected to a dedicated thank you page. Let's right click on 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'. So I'm going to use this to configure
my trigger, but remember, you might be able to simply use the form's class. Okay, let's head to
Google Tag Manager... Let's create a new tag... And let's name the tag 'Google
Analytics 4 GA4 Newsletter Form'... Let's select 'Tag Configuration'... And
choose 'GA4 Event' as the tag type... Let's select our GA4 configuration tag... And
let's name our event 'sign', 'underscore', 'up'... Now let's select 'Parameters'... And enter
'sign', 'underscore', 'up', 'underscore', 'type' as the name... And here's a quick
tip... Instead of selecting the variable icon, like we did for clicks and buttons, let's
simply type in two opening curly braces... And select 'Choose Built-in
Variable' from the drop-down... This is a quicker way to add variables. Now
let's enable the 'Form Classes' variable... This will now mean that our 'Sign Up Type' is set
to the class of the form. Now let's add a trigger to our tag... And let's create a new trigger...
Let's name the trigger 'Newsletter Form'... And let's select 'Element
Visibility' as the trigger type... What I'm going to do is trigger my tag when the
thank you message is visible after someone has successfully submitted the form. So let's select
'CSS Selector'... And then enter 'dot', 'form', 'dash', 'submission', 'dash', 'text'... This
will mean the tag fires when the div with the class of 'form', 'dash', 'submission', 'dash',
'text' is visible. Now let's save our trigger... And our tag... And let's preview our changes... Let's open the demo site... And let's complete the form... And let's head to the Tag Assistant tab... We can see that our tag has fired. We can now report how many people submit
the form in Google Analytics. So that's how you can use Google
Tag Manager to fire tags for clicks, buttons, and forms on your website. And remember,
that we used the triggers we created to fire our Google Analytics tags, but you can use the same
technique for any other tags you want to fire on your website. In the next lesson, we will
cover extra tips for using Google Tag Manager, and resources you can use to learn
even more about tag management. What tags and triggers have you
configured in Google Tag Manager? I'd love to know! Let me know in the comments
below. And I'll see you in the next video!
