[MUSIC PLAYING]
MATT LANDERS: Hello, and welcome back to the Google Analytics
Tutorial Series.
I'm Matt Landers.
And in this tutorial, we're going
to implement a custom event.
Now, in the previous tutorial, we
implemented a recommended event, the share event,
and that's an event that's already known by GA.
But a custom event is an event that's
specific to you and your business
and GA doesn't know anything about it yet.
There's a few extra steps that we
need to do to make that data available to us in our reports.
So what I've done to our demo website
is I've created a newsletter signup,
and what we want to do is any time someone signs up
for the newsletter, we want to fire an event,
a newsletter sign up event, and then
that data will be made available to us
in GA for reporting, segmentation, audiences,
and all of the above.
All right, let's dive into our demo website
and make it happen.
OK, we're back on our demo website
where we've made a couple of changes
so that we can test out custom events.
Now, one of the changes that we've made
is we've added a little bit more content,
making the site look slightly better, which
it should progressively get better over time.
But we've also added some forms to sign up for a newsletter.
So if we scroll to the bottom, we'll
see in our footer we have a Subscribe to our Newsletter
form, but we also have a link to a newsletter form
where you can sign up for the newsletter on its own page.
And what we want to do is we want
to create a custom event to track when newsletter
signups happen and then what form was used for that sign up.
That way, we can know which one was most effective.
All right, let's dive in and make that happen.
OK, now, we're in Google Tag Manager,
and this is where we're going to fire our custom event.
Now, there's nothing that we need to do in Google Analytics
in order to create a custom event.
We just need to start sending a new event.
So it's very similar to what we did for recommended events.
Let's go ahead and go through the process
to make this happen.
One of the things that we want to do,
as well, is track which form was used to submit the newsletter.
And in order to do that, we need to enable some variables.
So if we go to our Variables, we can go to Configure,
and we'll scroll down, and we want to select Form ID.
Whenever the newsletter form is submitted,
we're going to capture the form ID
and submit it as a parameter.
All right, we'll save that.
Now, let's jump over and create our tag.
So we go to Tags.
We'll say, New Tag.
And we'll name our tag.
GA4 Event Newsletter Signup.
Now, we'll add a tag configuration,
which we want a GA4 event.
We'll choose our website for the configuration tag.
And then we need to name our event.
Now, you can name your event anything
you want, but I recommend naming it with lowercase letters
and underscores for spaces.
This is to follow the standard pattern
that you see for recommended events
so it doesn't look completely different from everything
else that's coming through.
So we'll call it newsletter_signup.
And we also want to create a parameter here
because we want to know what form was used for the signup.
That way, we can evaluate the performance
of forms on different pages or whatever location we add them.
So let's go to our event parameter.
We'll add a row.
And we'll call it form_ID.
And then, for our value, we're going
to click the little brick, and we're
going to choose the form ID, which is what we just
set up in the variables.
And what that means is that it's going
to take the ID of the form element in HTML
and place that value into our event parameter,
so then, we can use that in our reporting.
Now, if you don't know your form ID, that's OK.
You can ask your developer of your site to find that for you,
or you can go into your site and use the Chrome Developer
Tools to find that as well, which
we will do real quickly when we look at our site.
All right, so now, we have our tag configured.
All we need to do now is decide when
it's going to actually fire.
And we're going to do it on a new trigger.
So we create a new trigger for a form submission.
Just naming this trigger.
And we'll do it for news-- we'll call it newsletters.
So any forms that are submitted that are for newsletters,
we want this trigger to fire.
Create a new trigger.
We'll scroll down, and we'll choose form submission.
All right, we don't want this to happen in every form,
because maybe we have sales forms and other types of forms
on our site.
We only want this to happen for newsletter forms.
So we go to some forms.
We'll choose that form ID.
And make sure that it contains a newsletter.
Now, you'll need to check on your site what
the form IDs are so that you can properly fill this out.
All right, we'll go ahead and save that.
And then, we'll save our tag.
And now, we should be able to test the tag
and see it working.
All right, let's go back over to our site.
OK, before we publish the changes,
we're actually just going to preview this on our site.
So we're going to click the Preview link in GTM.
And that's going to pop out and ask us where our site is.
We're testing this locally right now,
but you would put your own domain in here.
And we'll go ahead and say connect.
All right, so now, we have our Tag Assistant up and running,
and we'll be able to see all of the events that
are firing as we go through from our new GTM configuration
without having to publish those live just yet.
OK, let's go ahead and scroll down
and we'll see our subscribe to newsletter form.
Now, we want to know--
I want to show you where that form ID is.
So I'm going to do a Command-Option-I. That brings
up the debugger in Chrome.
And I'll scroll down a little bit,
since the window got smaller.
I'll select this icon over here, and I'm just
going to select the text box.
Now, in our elements, you'll see that we have this form.
That's an HTML form.
And it has an ID.
So this is the form ID for the variable
that's going to get filled out.
And you'll see that this particular form
says newsletter form footer.
So that says that this newsletter is in the footer,
and we just named that ourselves.
But then, if we go over to the newsletter
form on the newsletter page and we look at that form name,
we'll see that it's different.
It's just called newsletter form.
So now, whenever that newsletter signup fires,
it's going to send in that form ID
each time so that then we can tell
which form was used in order to sign up for the newsletter.
All right, that's pretty cool.
Let's get out of the dev stuff.
And let's sign up for a newsletter.
So we'll just do test@test.com.
We'll submit.
And now, we should be able to go over to our Tag Assistant
and see what has happened.
So you'll see that we have our tags have fired.
The newsletter signup has fired, and our configuration tag
has fired.
So that's great.
It's working.
So now, we should to go over to Google Analytics
and see this in our real-time reporting.
So let's jump over there.
All right, now, we're in our real-time reporting
for Google Analytics.
And if we go over to the right and scroll down,
we will see all of the events that are fired, and one of them
is our newsletter signup.
And if we click on that, we'll be
able to see different parameters that were passed in,
and we see our form ID, and then we see our newsletter form.
So we submitted this form from the actual newsletter page
and not from the footer.
So let's just go ahead and, just for sanity check,
let's make sure that this works whenever
we use a different form.
So we'll go back to the home page and scroll down.
We'll use our footer form.
We'll subscribe.
All right, let's go back over to Analytics.
We should see a new signup event.
Not quite yet.
Almost here.
Waiting.
And now, our newsletter signup has arrived.
We'll click on that.
We'll go to form ID.
And we'll see that we have one from our newsletter form
and one from our newsletter form footer.
So this is great.
Our tag is working.
Our custom event is now making it into Google Analytics.
Now, there is one small caveat.
We won't be able to do a whole lot with this data
until we create a custom dimension and metric.
And we'll be covering custom dimensions and metrics
in a different tutorial.
Now, keep in mind, the data that you see here
in your real-time report won't show up
on your actual reports for about 24 hours
while GA processes that data.
All right, hopefully, you get a lot out
of this video and this tutorial.
We learned how to create custom events,
add custom parameters to that as well,
and get that data into GA using Google Tag Manager.
Now, keep in mind, you could use GTag or a measurement protocol
as well, but for this series, we're
really focusing on Google Tag Manager
as we think it's the best way to manage
your tags on your website.
All right, I look forward to seeing you
in the next tutorial video, and till then, happy measuring.
[MUSIC PLAYING]