In this video, I am gonna show you 3 techniques on how you can track forms with the help of Google Tag Manager and Google Analytics. All and more, coming up!
Hey there and welcome back to another video of measureschool.com teaching you the data-driven way of digital
marketing. My name is Julian.
And today I'm going to show you three techniques on how to track forms with the help of Google
Tag Manager and Google Analytics.
Why three different techniques? Well, there are always multiple techniques to get to the
data that you want. You shouldn't be
discouraged when one or the other techniques doesn't work. You also need to be flexible,
know about the capabilities of the tool
and be able to implement, test different tracking techniques so you get the data that you need
in your system. This holds
especially true for forms because there are many shapes and sizes of forms out there,
and different technologies. And sometimes
the trigger or the techniques that I show you in these videos don't work. So you need
to stay flexible and know about these
different tracking techniques. Today, I'm going to show you my three tracking techniques
that I most often use when it comes to
forms, when one or the other doesn't work depends always on the case. And we got lots
to cover so let's dive in.
All right back in
our demo shop here we have contact forms. And the first thing that you need to do in
order to find out which tracking technique you want to use is actually going through
the form and figure out what will be the success that you want to track. Now on the form, it's
usually the form Submit. So the
user goes through the form just like this and enters the message. So let's click on
this button and see what happens. In this
case, I get redirected to a success page. And you want to track of interactions. If
there is a clear success page her and the URL
up here actually changes, we can use that instead of Google Analytics to track this
already. Because inside of Google Analytics,
if you have a deployed and I have this year on my page already, then you will get that
data about the page view inside of your
Google Analytics account already. And you can just classify this as a goal conversion.
So every time somebody goes to this page,
this will actually be a conversion within Google Analytics. All you need to do is go
over to your admin section here on the goals,
you can come up with a new goal. And we have different templates here, I usually go with
the custom template. And we need to give
this all a name. So there's a contact us submit, choose a goal slot ID, and the type of goal
that you want to input. In our case,
this is a page view that we want to classify. And that's what we will go with destination
goal here. So let's click on this and
continue. And then we have to enter either the URL directly so equals to, in our case,
that would be this URL right here. Be aware
that you don't want to put in the full URL, just the page path that comes after your domain.
And that should already do it. Now, I
usually choose a different type of matching option here. I usually go with the regular
expressions, it's very powerful. We did a
video on this as well, if you want to get a little bit more sophisticated with your
tracking and cover different cases and
matching options, then I'd recommend to check out regular expressions. But for us equals
two will also work for now. Let's verify
this goal first of all, by clicking on it, it says zero percent conversion rate, that
is usually not a good sign. But since this
is a demo account, we don't really have much data in here. So another way to test this
is actually just save this for now. And
then let's go back to our reporting here and go under the conversions. Now that we're on
this tab, you can again, go back to our
form and go through another conversion here and see if we get any kind of form submit
inside of our conversion section here. And
here we go, we get a new Contact Us submit so our goal works. And we'll be able to view
that and all of our report later on as a
goal conversion. So it doesn't always have to be complicated when it comes to forms and
tracking the form success. If you have a
success page right after the form submit, I would always take this as a clear sign that
the user has taken the action that I
wanted them to take, convert it and therefore I would fire my tag or set up such a goal
conversion inside of the tool. By the way,
we could also do this in Facebook by choosing custom conversions and just choosing the path
as well. But it gets more tricky. So
in this second contact form that we have right here, let's again go through this form and
send this off. And we see we are
redirected to a success but the URL up here doesn't really change. And we just get a message
that this was submitted successfully.
So we can't really use that same method that we just use with Google Analytics. And the
page view tracking, we would actually need
to build something Google Tag Manager to make this work. And one of the methods is to use
the form submit trigger to pick up the
interaction of sending of the form. How does that work? Well, in Google Tag Manager itself,
you can go to triggers right here and
create a new trigger. And this new trigger is our form trigger. As the configurations
and you click on here, we can choose the
different interactions that we want to fire our tag on, we want to go with the form submission
trigger. And for now, we'll leave
this all unchecked. And as default and as it is, right now, just to try it out, we go
on to the Save button.And one last step
before we try this out is actually go into our variables and activating our form variables,
which you can do under the building
variables right here. Down here, we have our form variables, which I would activate. Now
you only have to do this once. And then
those activated, we can go to our preview and debug mode, go back to our page. And let's
submit this form. Again, we should see
our preview and debug mode down here. And let's pay attention to what happens in this
little box down here once I press the send
button. Now, you see there is a submission inside of this box, unfortunately, redirected
me to that second page right away. So I
wasn't able to inspect it any further, there are several tricks that you can use. The one
that I often refer to is just opening up
this in a new tab by holding a command or control key press, and then clicking on the
send button. This will open up our success
page in a new tab, and leave our other tab untouched, which is really handy for looking
into our form submit right here. So let's
click on this form, submit and then go to the variables. And here's where the variables
that we just activated, come into play, we
can inspect them and see how they get filled, what Google Tag Manager actually picks up
from the form and what information we
could use to build a trigger of that and fire our tag. Now, it's important to remember that
this should be unique to your form. So
your GTM form submit doesn't trigger when another form, for example, the search form
is filled out. So just to show you this, we
can actually have another field right here, this is our new set of field. I'm gonna put
in an email, this is another form on the
same page. And I'm going to press the sign up button here with the command keypress again,
it will open up this in a new tab. So
we have two forms submits here and we can compare them against each other. So we can
look into how we can configure our trigger
correctly to only fire on this form, submit of our main form or our contact form to. And
if you go to the fourth and the fifth,
back and forth, we see that one thing changes down here. And this is the form ID. So if
there's a form ID available in your form,
Google Tag Manager will try to pick that up and put it into your form variables. And we
can use these variables to actually define
our trigger a little bit narrower and filter down on this event. So this is really cool
that we have this in our form ID. So let's
go ahead and in Google Tag Manager, turn our form trigger into a specific trigger that
only fires on our Contact Us form. So this
is a form trigger for our Contact Us form. And now we will install in these configurations
a filter. And this is how you can do
this, click on some forms down here, and then choose the variable that you want to filter
down on. In our case, it would be the
form ID. And then there are different matching options, I can just go with the contains option,
for example, or the equals option
that we have here as well. And I'm going to enter whatever was entered inside of this
variable. This is ninja forms form one,
let's go back here and enter that right here. So now this trigger will turn true on our
form submit of ninja forms form one and
not on the second one here, which is ninja forms form 30. So you need to narrow that
down. And then we can save this and attach it
to a tag. Now, if you want to send us over to Google Analytics, for example, we would
do this with an event because it's an
interaction, it's not actually a page view. So I'm going to build an event tag here for
our contact us submit, let's go ahead and
use our Google Analytics tag here. And this will be an event and this is a form submit
or contact us form.These are categories
action level that you need to fill out, if you want to, you can leave the label and the
value field free. And then I'm going to
select my Google Analytics settings variable. This defines where the data is sent to and
I'm gonna define my trigger we have
already configured earlier. Let's save this, refresh our preview and debug mode, refresh
our page. And now fill this out
again, press the Command key and click on Send. We here see our form submit and our
Google Analytics event was fired to Google
Analytics, we should be able to see this in our reporting under events. Here we go. The
form submit and the Contact Us has been
transferred to Google Analytics. Now, if you wanted to build a goal, again, out of this
inside of your admin section, you can go
to your contact us submit form, goal that we had and change the destination around to
an event. And here is where you can enter
the category. You don't have to actually fill this all out, you could just fill out this
first one. But it needs to model whatever
data gets sent over to Google Analytics. So in our case, when I click on this, let's look
at the values again, it was form submit
and action contact us. For example, I could take this action, just the action and enter
that here, you don't have to fill out the
other ones if you want to stay dynamic when this goal fires. Now when I save this, we
have now changed our configurations. But
when I go back and just submit this form again, click on Send. In our reporting under conversions,
we should see a new goal
conversion happening. So this is the second way to track forms with Google Tag Manager
by using the form submit trigger. Now, you
might have seen these options that I've skipped over in the trigger section, which is wait
for tags and check validation, you can
read what they are all about. My experience with those checkboxes is that you need to
be testing them and not tick them by
default. So if your form now works, and your conversion now is tracked, I would recommend
to if you want to try it out to click on
that button Check validation will give you another box here where you need to simply
use your page path variable or page URL
variable to tell Google Tag Manager when it should listen to this form submits. And maybe
you don't want to listen to all pages.
So you can contain this and say, Okay, I only want to have this on the Contact Us page here.
And then this check validation feature
will be turned on on this form. Which means that if the user has entered something wrong,
for example, not a valid email address,
you usually get an error. And then you don't want to fire your tags. So you can prevent
that with this functionality. But it
doesn't always work for every form. It depends on how the form is built. And therefore I
would test this out before you turn this
on by default. If this solves your problem, keep it checked. If it breaks your trigger,
and suddenly you don't get your form
submit any more than I would turn this off. Same with the wait for tags option and wait
for tags is really an option to make sure
that our event and all our tags have fired before the user actually gets redirected on
to the next page. Usually, a good option to
take. But again, I would thoroughly test this before deploying it. All right, now that we
have looked at our form submit trigger,
we get to our next case, which is our Contact Form three. And when I fill out this form,
instead of forwarding us on, it actually
just gives us a success message down here. Now we could use our GTM forms submitted that
is also a possibility because we have
this phone trigger already set up. But I want to show you another method on how to track
this. Again, we can't go off the URL. We
also don't want to use the form submit trigger, maybe it has some problem, or you don't even
see that event inside of Google Tag
Manager. Then you want to utilize the third method that I often use, which is the element
visibility trigger. Let's take a look at
this in Google Tag Manager. We can go to triggers here and click on new and under trigger configurations.
This time we want to
take the element visibility trigger. What is this element visibility trigger all about?
Well, as the name implies, this trigger
actually would fire if something is visible on the screen to the user. The way it does
this is it inspects and observes the
document object model and sees if there are any changes. So for example, if I click on
this success message here, I can go into
our developer tools by clicking on it inspect. This is the Chrome Developer Tools and here
we can see the representation of the
document object model. Now we can choose one of the elements that we think is changing
during the page load. And frankly, you need
to see the success message first and inspect it before you can actually build this out.
And here we go, we can see that there is a
div with the class WPCF seven mail sent, okay, which is one of the nodes that get inserted
when submit has happened successfully.
Again, I'm I just copied this, if I reload the page,
and we look at that same node here, then we notice that this success class
looks different because it actually gets changed once we fill out this form.
So I'm going to click on the send button, pay
attention to this div class. And we see in these little animations here that there was
a different style appended. And there's
also a new class mail sent Okay appended to this. Now what we can do with our element
visibility triggers, actually look at this
element and make sure that our tag gets fired once this element changes. What we would need
for this is a bit of CSS knowledge,
because we need to tell Google Tag Manager which element it should be observing. In this
case, you have the ability to use ID or
the CSS selector. Since our node right here, our div node doesn't have an ID, we would
need to go with the CSS selector. What do
you enter into the CSS selector field? This is something we can actually try out inside
of our JavaScript console. Here we have
our console. And we can type in the comment document.queryselector. And then in parentheses,
and quotation marks, we can enter a
CSS selector and try this all out. Now, in our case, we had a div right here. So let's
try out div. Press Enter and we get the
first div that's actually on the page. But that's not the div that we wanted to select.
We wanted to select a specific one. In our
case, this was with the class of WPCF seven mail sent okay. And you select such classes
with the dot notation. So I'm going to put
a div and then dot and put that class in the back here, press enter, and we're going to
hover over it. And we see it's exactly the
element that I want to observe. So this is the right CSS selector to enter into my Google
Tag Manager account here. Then we have
further options we have when should actually trigger only once per page, which could make
sense. But in our case, we can actually
enter this multiple times. So let's go with the every time the element appears on screen
option. How much of this needs to be
visible, 50% is fine. So if it's at the edge of the screen, for example, it's not visible
to the user. And therefore, we still
want to trigger our tag. And then we need to choose the observed Dom changes option.
We get a little bit of a warning here but it
shouldn't affect too much of the page load time. But just be aware that it can affect
site performance. And we'll go with all
elements that are selected by this element selector. Let's go ahead and give this all
the name.
So visibility trigger for our
form
success message.
Let's save this,
refresh our page.
And let's connect this actually to our predefined tag that we already had in
here. Our GA event contact form submit we'll just switch out the trigger. We can do this
down here. And let's get rid of the old
trigger and connect it to the new trigger.
Let's save this and refresh,
refresh our page
and close
this. And now just going to submit
this again.
And I'm going to send this off
and we see we have a GTM as element visibility now inside of the preview and debug mode.
And we see our Google Analytics event fired since we have set it up as a goal, we would
also see a new conversion instead of
Google Analytics. So this is the third method of installing form tracking with the help
of Google Tag Manager and using the
element visibility trigger.
All right, so there you have it. This is how you can track forms with the help of Google
Tag Manager and Google Analytics. These
are just three tracking techniques that I showed you. There are multiple others out
there like the AJAX listener, the history
change listener or building in a data layer push directly into the form. Those that I
use most often and cover most of the cases.
But I'd love to hear from you which tracking technique do you most often use. Please leave
me a comment down below. And also if
you haven't yet then consider subscribing right over there. Because we bring you new
videos just like this one every week. Now my
name is Julian,
the next time.

For more infomation >> Partager Google calendar - Duration: 3:04. 
For more infomation >> 100 Creative Ideas for Garden Fence & Wall Decor | DIY Garden - Duration: 13:21. 
For more infomation >> Live PD: Death to Denial (Season 2) | A&E - Duration: 3:39. 

For more infomation >> Children Found In New Mexico Compound Were Training For School Shootings, Prosecutor Says | TODAY - Duration: 3:21.
For more infomation >> US Imposes New Sanctions On Russia Over Nerve Agent Attack In UK | TODAY - Duration: 3:01. 

For more infomation >> Starbucks Pumpkin Spice Latte debuts August 28, 2018 - Duration: 2:35. 

For more infomation >> Unaccompanied Kids On Frontier Flight End Up In Hotel With Airline Employee, Parents Say | TODAY - Duration: 3:19. 
Không có nhận xét nào:
Đăng nhận xét