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!