3 Form Tracking Techniques with Google Tag Manager

3 Form Tracking Techniques with Google Tag Manager

Show Video

In this video I'm gonna show you three, techniques on how you can track forms, with the help of Google tag manager and Google Analytics a lot, more coming. Up. Hey. There and welcome back to another video of measure, school.com teaching you the data-driven way of digital marketing my, name is Julien 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 always 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'll show you in these videos don't, work so you need to stay flexible and know about these different tracking techniques, today, I'm gonna 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. On the case and we. Got lots of cover so, let's dive in, alright. 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 so. Actually go through the form and figure out what, will be the success. That you want to track 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 these kind of interactions, if there's, a clear success page here and your, L up here actually changes, we can use that inside, of Google Analytics to track this already because, inside, of Google Analytics if we have it deployed and I have this here on my. Page already then, you will, get that data about the page you inside. Of your. Google, Analytics account already, and you, can just classify, this as a goal conversion, so every time somebody goes through this page this, will actually be a conversion, within Google, Analytics all you need to do is go over to, your, admin section here under, 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 as 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, call here, so. Let's, click on this and continue, and then, we have to enter. The, 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, 2 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 real-time reporting, here and go. Under the conversions. Now, that we are on the step 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 as submit, so goal works and we, would be able to view that in all of our reports, 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 him to take converted. And therefore I would fire, my tag or set. Up such a goal conversion, inside of the tool by the way you could also do, this in facebook, by choosing, custom conversions, and just choosing the path as well. But it gets much tricky so in this second. Contact. Form that we have right here let's, again go through this. Form. And send. Us off and we, see we, are, redirected. To, a success. Page 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 used with Google Analytics and the page view tracking we, would actually need to build something into Google tag manager to make this work and one of the methods is to use, the built in 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. Configuration. So 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 this 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 built-in, 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 are activated, we can go to our preview, in debug mode, go. Back to our page and. Let's. Up, this form again we should see our preview, in 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. It redirected, me to that second, page right away so I wasn't able to inspect it any further there is 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 pressed, 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 built-in, 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 gonna press, the sign up button here with the command key pressed again it will open up this in a new tab so we, have two forms Mitsy 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 here of our contact, form too and if, you go to the fourth in 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 that 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 files 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 D from 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, gonna enter whatever, was, entered, inside of this variable, this is ninja forms form 1 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 13. 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 within event because it's an interaction it's not actually a page view so, I'm, gonna 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, label that you need to fill out if you want to you, can leave the label and the value field free and then. I'm gonna select my, Google. Analytics settings area go 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. Comanche and click, on send, we. Here see our form submit and our, Google Analytics event was, fired to Google Analytics who should be able to see this in our real-time 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 a submit form goal. That we had and change. The, destination. Around, to an event and here. Is where you can enter the, category don't have to actually fill this all out you, could just fill out this first one but it needs to model. Whatever our 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. It here you don't have to fill out the other ones if you want, to stay, dynamic, when, this call files. 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 real-time reporting, under conversions. We, should see a new coal, 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, now, you can read what they are all about my. Experience, with those checkboxes, is that, you, need to be testing, them and not take 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 too click on that button check, validations, will give you another, box here where you, need to simply use your page, path, variable, or page you're available. To tell, google tag manager when, it should listen to these form, submits and maybe, you don't want to listen 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 tag so you can prevent, that with this functionality but it doesn't always work for every form it depends 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 anymore, then, 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 tick 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 3, 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, form submitted that is also a possibility, because.

We Have this form 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, built-in 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 want to take the element, visibility, trigger, what, is this element visibility, trigger all about well as a name implies this. Trigger actually would fire if something is visible, on the screen to, the user the way it does this is inspects. And, deserves the document, object model and sees, if there 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 a, 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 inspected, before you can actually build, this out and here, we go we can see that there is a, diff with, the class. WPC. F7. Mail sent ok 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, differently, because it actually gets changed, once, we, fill, out this form. So. I'm going to click on the send button pay attention to the stiff 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 ok 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 difficult, doesn't have an ID we. Would need to go with the CSS, selector. What. Do you enter into the, CSS selector field and, this is something we can actually try out inside. Of our, javascript, console here, we have our console, and we can type in the command document. Dot. Query, selector. And then. In parenthesis, and. Quotation. Marks we can enter a CSS. Selector and try this all out now. In our case we had, a, different. Right so let's, try out diff press. Enter and, we. Get the first DIF that is actually on a page but that's not a div that, we wanted to select, we, wanted to select a specific, one. In our case this, was with, the class of. WPC. F7. Mail sent okay and you. Select such classes, with the dot notation so I'm going to put a diff and then dot. And put. That class in the back here press, ENTER and we're. Gonna 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 this 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 30%. 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 observe 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 of that, it can affect, side performance, and will go with all elements that are selected, by this element, selector, let's go ahead and give, this all the name. It's. A 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 you, can do this down here and, it's. Get rid of the old trigger, and connect. It to the new trigger. Let's. Save this and refresh. Refresh. Page. And. Close. This. And now I'm. Just going to submit this again and. I'm. Going to send us off and we, see, we have at 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 inside. 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. Alright. 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 H axis not the history change, listener or building, in a data layer pushed 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 of the news please, leave me a comment down below and also if you haven't yet and consider, subscribing right, over there because, we bring you new videos just like this one every week now, my name is Julien the. Next time.

2018-08-13 15:00

Show Video


Keep rocking

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

Thanks a lot :)

yes, you would just need to make Variables that pull out the correct value from the field and then use that variable in your trigger

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 the video. in my site i have de facebook comment plugins, i try with the 3 options and i can´t track, any idea?

how is the plugin implemented? Inspect the HTML and see if it's within an iframe - if that's the case you are out of luck. Otherwise you could always try to track clicks as a proxy to form submits.

Thanks! The third element help me a lot.

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.

yes, absolutely

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

it's a different technology and you can do different things with it. If you are a larger company wanting to pipe your data into your own data warehouse it is very powerful. GTM is really just a Tag Management tool. Segment can do more and is a bit more complicated depending on your usecase

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

if you watch the video you will see a technique on how to track a forms where the URL doesn't change

You are excellent tutor ;-)


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

yes, once you are done testing you can Publish your changes through the Submit button. Then it will go live to all users.

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!

the gtm.formSubmit happens through the deployed form trigger. If that doesn't show up for you then you might want to use a different technique

For whatever reason, stock Ninja Forms was not triggering gtm.formSubmit. I installed Caldera Forms to check if my GTM settings were at least correct. Caldera fired gtm.formSubmit straight away with no issues. So, if you're running stock Ninja Forms plus the GTM settings in this video, I have no idea why my Ninja Forms didn't trigger, but Caldera did! Cheers!

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

I might be using a different version in this video - maybe the newer versions don't work that way anymore. Nonetheless... it shouldn't be about what plugin you use, but that there are different techniques you can use

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.

embedded how? a iframe?

+Measureschool hubspot CRM gives a code to paste in my landing, but I don't know how see submissions how AdWords conversion

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

or send in the ClientID with your form

yes, check out our video on lead source tracking

not sure... maybe contact hubspot?

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!

I have found the answer myself. Within the visibility trigger it is possible to check the box "Some visibility events" so you can create a exception trigger. I hope this is useful for some of you!

Julian, this was a life-saver. Thanks!

Works perfect, well explained. thanks a lot.

How can we track specific form in method 3? I tried >Some Visibility Events->From ID.. but it's not working. I'm I missing something here?

no... that variable doesn't get filled if you use the Visibility. You would need to adjust your CSS selector to only fire on that particular form. Surely there is a way through your css selector to do it.


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

cheers... I put this into the description too

you would need to use the trigger and a AdWords converion tag (there is a tag template in GTM)

+Measureschool , thanks for the videos. Very helpful :)

+Measureschool What do you mean by adjust your CSS selector to only fire on that particular form? Is there any thing to deal with Element Selector?

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.

From what I can see with Divi's forms is that there's a element with the success message which you can only see after successful submission. The thing that changes is a "style" element that makes that element an opacity = 1 to show it.

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)

+Measureschool I have same contact form on 5 different pages. I am giving condition that - This trigger fires on -> Some Visibility Events -> Page Path -> Contains -> /*******/ (Page Path). Tag fires only on 1 page not all pages.

not sure. maybe there is a different variable at play. maybe there is conflicting javascript on the page.

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

I just checked this again and it worked!

I used a trick to open the page in a new tab by adding "target=_blank" to the form tag. But I noticed that the trigger is not firing. This is for apimetrology.com/test-page/. Do I need to install Google Analytics through Google Tag Manager in order for this to work? 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?

+Measureschool then how can track google form submission?

no, you can't put tracking codes onto forms hosted by google

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?

yes, the previous two options :)

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!

have a look at my iframe video

+Measureschool Great! I will do that. Thanks for the reply!

...BTW I also tried configuring with other options (Click URL, Page URL, etc) but none of them work when I test it out by submitting a form. No triggers are fired.

Hi Julian, please help. Although I hold down the command key I don't get the form submission click in the debug mode. As such, I can't get the Form ID to configure my trigger. What am I doing wrong? Thanks

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?

+John Capuano What was the solution you used to resolve this? I'm getting all sorts of error messages from my GTM Assistant extension. I'm thinking about installing the JS code manually instead of through the GTM plugin to see if this resolves it. Was that how you resolved yours? Thanks.

it achieves it, but maybe not on your form. You could also try to press the esc key right after or use an extension (GTM Sonar) to stop the redirection

+Measureschool Thanks Julian. I reached out to Simo Ahava who shared a great resource to resolve this issue. See here: http://bit.ly/2FayLz8

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

did you deploy your tag?

+Measureschool In GTM preview, the tag is fired as well but the data doesn't come through to GA

Unable to track mobile hit

Is it possible to track Google Forms? Thank you!

not with GTM

+Measureschool So do you know how to track Google Forms? Thanks!


How can I prevent a user from registering twice?

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

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?

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

you can try to submit then right away press the ESC key, which stops the browser. You could also try the Extension GTM Sonar

Thank you for your answer but unfortunately, the two ways don't work. When I send the form on my website there is a popup window with telling thank you and then refer the visitor to the homepage. Do you have another solution? Thank you.

Other news