Form Field Tracking with Google Tag Manager and a Auto Event Trigger

Form Field Tracking with Google Tag Manager and a Auto Event Trigger

hi there and welcome to another video of GTM training comm with me Julian and today we want to talk about form field tracking now as always these little videos are brought to you by my course on Google tag manager where you'll learn all the essentials to use this tool effectively if you want to check it out head over to GTM training comm /youtube now as you might know one of our last videos we have installed a form tracking so we'll send over a Google Analytics event upon Form submit and if you want to check that out just go to the video auto event tracking and I'll show you how to set that up now once we have set this up we have a contact field which files a Google Analytics event tag upon Form submit so for example here put in test we have here preview in debug console I want to click on the send button and I'll do click on it and then press the Escape key so it doesn't forward the page you see that we have a form submit as an event and our event tag in GA submitted and when we look into this event tag you see our category was form submit our action will submit and the event level contact now what do we want to accomplish today well I've built in a new form field here which is called how did you find out about us and we have different options here Google Facebook and YouTube this is just an example and what I want to achieve today is to transfer whatever the user selected over to our Google Analytics tag now why do I have a new phone field here and why don't I just transfer the name or the email address over to Google Analytics well you might know that the name and the email address are personal identifiable information PII information that is prohibited by the TLC's of Google Analytics to be transferred to the tool and if you would transfer it we might run the risk of getting our account shut down so I don't want to risk that but you could definitely send in the email address or the name with the same method that I will show you in a second and it's quite common to send over for example of the name or the email address to other tools such as email automation tools or web analytics tools like KISSmetrics so now how do we get the value of this field well we already have a form submit here and when we once we look into the data layer of this form to submit we have a object here in the data layer element now in order to inspect that object I actually need to go into developer tools of Google Chrome which we can do under the view options and developer we have here developer tools and we will directly go into the console of our developer tools and put in the data layer and we see all these objects here the normal objects such as GT MJS GT m Dom G team load and the last one is our GT M form submit and here we can actually go into the object of the GT m element and inspect that so we have a lot of different fields here and the one that interests me especially are these little inputs here and one of these inputs is probably our field right here how did you find out about us so let's just hover over them and see what we can find out and right here number 12 is our form field that we want to transfer so let's click into this and you can go down and has many different keys here but the one that interests me is the actual value and here we have the value and it says Google and this is exactly the value that I want to pull out and transfer to Google Analytics now how do we pull out values out of the data layer the easiest method is variables so let's set up a data layer variable that pulls out the value from this value field let's head over to Google tag manager go into our variables and define a new variable and obviously we are accessing the data layer so we'll go with a data layer variable let's name this correctly and now what do we put into the configuration of this variable we can make use of the dot notation which is shown here in the second version of the data layer where we can pull out anything out of the data layer as long as we use the dot notation so in our case we started out pretty big up here we looked into the object of GTM form submit then we broken down into the GTM element then we went into number 12 of our inputs and we went through to the value now how would we input that into our variable let's go back since we are already in the object of GTM form submit we just need to break down even further by going into the GTM element then we want to have number 12 and we want to have the value and that's already eight let's create this variable refresh our preview in the bug mode plus here our developer tools and let's reload this page put in contact here and we'll choose something else this time YouTube and let's click send an owl again press the Escape key so let's stop the browser from redirecting us and now we see here we have a GTM form submit once you click on this event and choose the variables we see here the input field source is now YouTube and this is something we can use in our Google Analytics tag so let's go over to the Google tag manager into our tags and restructure our event tag which we have right here and we have the form submit the action submit and as a label of contact I want to change this into our input field source so let's choose the variable here and now the label should represent the field how did you find out about us from the phone let's continue this save this tag refresh our preview in the bug mode go back to our contact field and reload that and now put in a test again and I'll choose Facebook this time and click on send and then just let it run through we can see if the data is received in Google Analytics correctly let's head over to Google Analytics and go into the real-time reporting here we have events and we just sorted an event has fired our event category was form submit our event action was submit we want to see what's in the label and we see here we have now Facebook as the event label and this is exactly what we've inputted into our field how did you find out about us now we could repeat this exercise by looking into our data layer again and we have different many different inputs if you want to transfer for example the name or the email address we just need to find out which input is the correct one and then transfer its value into a variable and that's already it with this week's video of GTM training com I hope you buy now you understand how you can transfer any value that is in the form that was just submitted into a variable and then transfer that onto your marketing tool now if you liked this video please subscribe to the channel and if you want to learn more about Google tag manager head over to GTM training com I'm Julianne til next time so now let's get started with scroll tracking within GTM and in order to and what we'll do in this little tutorial is implement a custom HTML tag which will basically act as our event listener in Google tag manager and when somebody now let's get started talking about bounce rate so the bounce rate is often seen as a metric to evaluate landing pages so does the traffic that hits my page actually stick around or leave the page there's actually a little bit of a problem here with the back bounce rate because the way that is to find in Google Analytics let's have a look so bounce in

Leave a Response

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

28 thoughts on “Form Field Tracking with Google Tag Manager and a Auto Event Trigger”

  • Hello Julian. Is it possible to also track which fields user do NOT fill? We would like to know which fields are stopping our visitors to convert and improve/delete them.

  • It looks like the first part of the video is missing which describes how to set up the trigger, do you have the video that explains the full steps please?

  • Hi Julian, great video! Just one issue, how do I track a drop down select if the form changes for reasons like pay by credit card, PayPal etc which changes whether address fields are included or not. Thanks!

  • Above video is old version of tag manager, please share video for the same topic with new tag manager version.

  • I tried to track the name field from my website form. I created DOM Custom Variable. In the preview mode, i got the form value in the DOM Custom variable. I just want to pass the Dom variable value into google analytics through GTM events. But I am getting the value in GA as "undefined" What should I do? to get the value in google analytics and whats wrong with my step? Here is my form link

  • How do you track a form submit successfully? Allow me to explain, once someone clicks on "DOWNLOAD NOW" for my whitepaper I have a certain click class for that button, BUT the issue is the tag fires even when someone doesn't successfully put all the fields in. Now, once someone does successfully fill out the form it then takes them to a /thankyou page. The issue is that this thank you page is the same for other pieces of content on my site so I want to only track those that submit the form and get to the thank you page from the whitepaper. This is what I had;

    PAGE PATH: /thankyou/ (starts with)

    And it would never register it successfully, am I missing something here or are my to conditions conflicting? How do I track a unique form submit button with a general /thankyou page that all the other contents take users to as well, but making sure it only fires of when the first part of my criteria is me and that is that CLICK CLASS for that form submit?

  • Google Analytics > behaviour > events> top events > event label
    how can i get a data of a customer source and media – contact number email id and name of the user is collected in the

  • How to do the same but with woocommerce to get Product SKU and Product name? I tried using dataLayer, but no gtm.element is numberded. Thanks

  • My form has 5 fields and each field has js validation on it and all are mandatory fields. If user fills the 3 fields and click on submit button in that case my gtm tag will fire

  • Hello, people. What happens if I go to the Console develop and went I type dataLayer they show me the arrays but, first 4 arrays they appear, they only put another object array in the form but, only when the user clicks. How much influence in me these change y my GTM configuration.

  • I am trying to capture text entered into a text field. Can I not do that creating a user-defined variable in GTM? I tried creating the variable but it is not showing up in the dataLayer. I am also using Contact Form 7 in WordPress.

  • Hi Julian,

    Thanks for the video. In case I want to track a comment/notes box in a form. That is no part of the dataLayer, do you need a custom JS variable? What I need is to fire an event if the box is filled at the moment of the submitting the form. But how should I do it then. Do I need a second trigger that only fires when that box is filled and the click on the submit button? Best, Jorge.

  • Thanks for the awesome videos so helpful! Is there a way to tag what is selected in a drop down menu?
    ex. color > black

  • The most recently ninja form plugin, is using ajax to submit the form. there is no gtm.formsubmit event to use.

  • Yeah! Great tutorial! Is there any tutorial on how to handle ajax forms. I am currently struggling with ajax generated form and can't make it work at all. I have set form submission trigger, which fires when form with speciffic id is submitted and tag with the ga event, but the problem seems to be with the form itself. The code of the form is not visible until a register button is clicked and is generated via ajax. Same thing for the submit. Searched all over the web for this and didn't find a solution…

  • If number of fields can change. So this will not work if using this syntax get by gtm.element.12.value
    Can we get value by name?
    Something like this gtm.element.getElementsByName("name")

  • Excellent video. It helped me set up the tracking of product variations in Woocommerce plugin on WordPress.

  • Hey! thanks a lot for your great quality videos. I do have an issue with my GTM and GA. When i'm on classic navigation both tags are green and work. However when i'm in preview and debug mode, the GTM tag goes blue and mentions "non standard implementation". Have you any idea on how to fix this? thanks a lot 🙂

  • Hi, i take your UDEMY COUSE OF AUTO EVENT, i follow the gides to set up a form submition with GTM, but the site have forms with server side validations, so if you submit a form with errores the form is submit and the GTM Form event is fire, but really does not send the form because of the errors detected server side.
    How can a wait for server side validation to fire the GA Event Form tag properly? Thanks for this goos tutorial

  • What Data Layer Variable Name should I add if I have a radio button element on my form whose final selection I would like to track? I use one here at the bottom. There seems to be no select element for the radio buttons Cheers!