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