3 Form Tracking Techniques with Google Tag Manager


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.

Comments 94

  • You are excellent tutor 😉

  • Hi Julian,

    Thanks for this superb video…

    Can you help me with a scenario in which
    – user has logged in / registered
    – after successfully login user will be shown 5 page form
    – how can we track such forms in which the URL also not gets changed…..

    Also user can logout on any step and can come back and will land with prefilled form

  • Nice content Julian.
    I want to know what do you think about segment and how is compared to GTM

  • excellent video.
    can you combine #1 and #3? in my site, after user clicks submit, they get sent to confirmation page, but there can be cases where an error message will get displayed if something went wrong with the back process.

  • Thanks! The third element help me a lot.

  • Hi Julian, thanks for the video. in my site i have de facebook comment plugins, i try with the 3 options and i can´t track, any idea?

  • Can you go over how to do a custom data layer push of the form data? How to get the different form values into the data layer to use in other tags.

  • Hi Julian.
    Thanks for great videos. I just wanted to know that, is it possible to track form submit within one form and fire different conversion, depending on what user chose? I have a form and there are 3 options that the user can choose.

    Thanks in advance

  • Keep rocking

  • I have a question, after you hit save and refresh(while in preview), are you supposed to also hit Submit (blue button) in the upper right? Thank.s

  • thank you for the clairty!

  • Thanks Julian for this video. The third option really help me recently for a client website to track leads

  • Hey Julian,

    It looks like in option 2, your Ninja Forms data simply shows up in GTA Preview Summary. Are you doing anything prior to this video to set up Ninja Forms for this? I've followed your video, but Ninja Forms submissions never show up in the Summary. In summary, a Ninja Forms submission never results in a gtm.formSubmit for me.

    Cheers!

  • Hi Julian, what if the Form ID and Form Target fields are blank, what variable can I use to trigger the tag?

  • The element visibility was the only one which worked perfectly! Thanks Julian 🙂 You are the best !

  • This was very helpful. Thank you!

  • Hi, very good, thank you, could you explain how to track a google adwords conversion of a form that is embedded and that redirect user to messenger.

  • Explained very nicely. But those tag codes I installed according to my hubspot website instructions given . I still cannot see that it's been installed on my pages

  • Great Video. I have a question if you are open to them: I have set goals and events in my GA to track lead form submissions. In the acquisition section, I can see which channels, sources, & mediums contributed to lead forms. I used 3rd party sites and what I can't see is, when I get the lead info in my CRM, what channel/source/medium the lead came from before they visited my site. Can I set an identifier with each lead form submission, which I could then match to my CRM and GA, so I can measure sales closing ratios by channel? (it is not an e-commerce site. Sales transactions are not captured on the website; only in my CRM when the file is marked as sold)

  • Awsome video! I was looking for this. Thanks

  • Hi Jullian, When I am not seeing any differential variables for my form attributes – my form ID is blank and form classes are all the same. I am using divi builder plugin.

  • Hi,
    How i can implement conversion as form submission without GA?
    i have GTM and conversion id from adwords.
    thank You

  • Hi Julian, at first what a great video and explanation as always! What if you use the third method and you have different forms on your website and the CSS selector is the same for each form. How do you track each form seperately? I tried exception triggers but it doesn't work. I would love to hear from you. Thank you in advance!

  • Julian, this was a life-saver. Thanks!

  • Works perfect, well explained. thanks a lot.

  • YOU ARE THE BEST

  • 0:14 – Intro
    1:13 – Form 1
    _ 2:08 – Setting up Goal GA
    4:46 – Form 2
    14:06 – Form 3
    20:12 – Ending

  • Hi Julian, great video!

    How do you track a successful Divi form submission?

    I can't find which Element to track with the CSS Selector in GTM's triggers.

  • Great video. Can we use GTM for method 1 also or we need to use GA only? Thanks.

  • Why it is not working in my case. All the things are same (class, display message) except when I check on console, it will show this (div.wpcf7-response-output.wpcf7-display-none.wpcf7-mail-sent-ok) but in your video it showing like this (div.wpcf7-response-output wpcf7-display-none wpcf7-mail-sent-ok)

  • I need assistance for Form Tracking Number 2. The submit button will not let me open in the new tab. Is there another way I can confirm the form submit trigger is firing in preview debug mode?

    Thank You

  • thanks for your tutor. It's really useful for me.

  • great tutorials! thank you!
    is there a tutorial around where you show how to track ajax loaded pages? Can´t find anything helpful.
    example is the wix/ecwid store. all pages and urls are loaded with ajax. tracking the urls is not working.

  • how to install facebook tracking code in google form can we use GTM?

  • amazing. Loved the tutorial

  • I like the last option, but is there more page-speed friendly way to listen for form submits through JS events rather than DOM changes?

  • I have a custom pricing table I coded that is pulled into WP via an iframe. The markup and js are in the same domain as the WP site so there are no cross-site-scripting issues. How would I get the click event from the table to "bubble up" to the parent page and then be passed to GA as if it were native to the page (not iframed)? Is this possible? Thanks again for the great vids!

  • At 7:00 you say that you can have the submit button open on a new tab so that you can see the FormSubmit click in the Summary. But holding down the Command key doesn't achieve this. Is there another way I can make it open in a different tab?

  • Hey, thanks for the great tutorial!

    Unfortunately I have a small problem – the event gets triggered in the GTM preview but it doesn't get sent to Google Analytics. What can I do to solve the problem?

    Thanks

  • Unable to track mobile hit

  • Is it possible to track Google Forms? Thank you!

  • BEEEEEEEST

  • How can I prevent a user from registering twice?

  • Oh my goodness, you're so good tutor.. Thank you very much!

  • you are a good. teacher way of teaching is best.

  • Great video.
    I have a question, I tried the way with the Tracking forms with the FormSubmit Trigger,
    but I have a problem.
    I use window 7 and when I press on ctrl button in my keyboard + send button in my page, a new window doesn't open.
    That's why I can not see the gtm.formSubmit.
    what do I need to do?

  • Is there any way to find which form submission is take via our google ads or via organic search?please help.

  • I'm using Joomla and Fox contact form. Trying to use the google tag manager and analytic. For the form there wasn't an ID so i'm choosing to use the class. The event was triggered but the event not showing on the analytic. How to check for the event on the analytic. I'm already linked my analytic and google tag manager. Thanks.

  • Awesome!! Thanks

  • Great video, it just saved me hours of exploration, the third one worked out perfectly and this can work in 99% of cases. Thank you!

  • Hey Jullian, thanks for this video. Can you create one video on "track form abandonment with google tag manager" please!

  • This video has helped me a lot, thanks!

  • Thaank You 🙂

  • thanks!!!

  • thanks for the great video!

  • Thank you for the third method!

  • Outstanding tutorial, as always! Thank you, Julian!

  • This is just perfect! Thank you for sharing this complete tutorial

  • Awesome stuff. Thank you!!!

  • hi i want to know how to track , if you are selling on other marketplace , like themeforest , any technique available ?

  • Awesome video. You saved my life hahah

  • Hi there, i used the second method and the tag fired (its properly implemented) i also have added the event through GA but it didn’t show up in the reports when i tested it out. Any idea what”s wrong?

  • Best content i've seen so far about Google Ads! Thanks a lot 🙂

  • Excellent! We used method 3 to track a multi-step form within a pop-up! Thanks

  • Love your work Julian! Been a big fan of measureschool.com for at least a year now and your lessons and tutorials are without doubt some of the best online! <3

  • Hey Julian! very useful! congrats! I'm using Contact Form 7 (plugin WordPress) and to track a submission, I used the second technique (formSubmit tag with form ID). Also, I activate the validation check feature in case the user fills in the wrong email. However, when I test with an unvalid email, the tag still gets fire. Do you know how to solve this issue, other than the 3nd technique? Thank you! Also important: I have several forms accessible by different URL. When submitting a form, users stay on the page (this is how Contact Form 7 works)

  • Hi, I have a from where only from success message get displayed after submission. And if I submit the click button columns gets red didn't get any error message. Could you please help me to track the success of that from.

  • This is really good! Will you cover how to track a dropdown select menu? Thanks!

  • Thanks Julian, I watched this whole video… and it helped. I had a form where the elements weren't labelled in HTML so it was the 3rd option I needed. I have to watch it twice, as I hadn't got it set up right, but your video was super helpful. Quick question, Do you do a text version step by step. I think that would be a great way to support the videos you make. Thanks again

  • Hello Julian..This is a Very Useful Video..and your way of guiding or teaching is so Nice and easy..

  • Amazing

  • Hey Julian! This is really good! Could you please make a video that explains how to track a normal dropdown menu? Thanks!

  • Here is more information on setting up form submit: https://support.google.com/tagmanager/answer/6106716?hl=en#FormSubmit
    This provides a little more detail into the trigger and tag fields.

  • Didn't work at all. My GTM trigger never fires up when I click on the form submission button on Calendly

  • Hi Julian,

    I was wondering if in Squarespace I didnt have a formID when I view in google tag manager. How should I proceed? as I would like to link google tag manager and Google Analytics.

    Looking forward to hear from you soon.
    Leon

  • Great video and very usefull, especialy the third part. Thank you very very much!!!

  • Very good and informative videos, well done! Do you know if there's anyway of tracking a form presented in an iFrame like SquareUp Appointments? The SquareUp Appointment web app the client has no access to the underlying HTML/JS code to add tag manager to and from what I can see in Square's interface there's no option to add it. Thoughts?

  • Gaaah… I can't get the element visibility to work on a Mailchimp popup form. I have identified the class as div.popup-signup-success but GTM doesn't fire.

  • The third option works best but only for desktop users.

    What am I doing wrong that it doesn't capture mobile users?

    Is it a problem with GTM or my website?

  • This video was so helpful! Thank you very much!

  • What is the best way to track a form submission on a SPA site (single page application)? Any suggestions would help, thanks!

  • I am using the Thank You page conversion tracking method just to avoid the error. Thank you for this wonderful tutorial. Cheers Mate!

  • This video might be the best tutorial of how to track forms with Google Tag Manager. The example using the CSS Selector was very useful. Thank you for this content!

  • you are too much confusing, make all the video in a systematic way and short

  • AWESOME VIDEO!! If anyone is pulling hairs for not seeing Conversions on Real Time @ GA assign a same value for your event at GTM and at Conversion set up at GA instead of leaving it blank

  • Hi, that Vid is awesome.
    The second way is the best for me.

    Problem is: if the user filled out wrong and he gets an error, the conversion fires to analytics anyway. That is a problem for my client. Form isn't on a specific page.

    thanks for the input guys

  • Not working at all!

  • form 2 worked like a charm for me. Thanks a lot.

  • This was an excellent tutorial for tracking form conversions. How would you track the conversion rate of a form? Maybe page view versus submit success?

  • Thank You so much! I did not understand how to track the element visibility after submitting the form! You are the best teacher!

  • Thanks for this tutorial Julian. Very helpful.

  • Thanks for the information. I have a question how it works when the form of your website comes from an autoresponder script, i have noticed is almost impossible to read any kind of events

  • Thank you so much. Amazing Value in this video! Cant wait to see my campaigns Results!

Leave a Reply

Your email address will not be published. Required fields are marked *