How to Pre Fill Form Fields with Google Tag Manager


Asking users to repeatedly fill in form fields can get in the way of user experience and even lower conversions.
Here is a neat way to pre-fill form fields with the help of Google Tag Manager.

GTM Ressource Guide: http://measureschool.com/guide
Free GTM Beginner course: https://measureschool.com/emailcourse
Course: http://measureschool.com/products

RECOMMENDED MEASURE BOOKS: https://kit.com/Measureschool/recommended-measure-books

GEAR WE USED TO PRODUCE THIS VIDEO: https://kit.com/Measureschool/measureschool-youtube-gear

– [Voiceover] In this video, I’m gonna show you how you can port an email address from a user who has already identified to a form field so the user doesn’t have to type this in again, and we’ll do all this with the help of Google Tag Manager. All the more coming up, so let’s dive in.

– Hi there, and welcome to another video of Measureschool.com where we teach you data driven way of digital marketing. My name is Julian, and in this little video we’re going to discuss how you can prefill a form field with the user’s email address. We’ve got lots to cover, so let’s dive in. So here we have a contact form with an email field that we wanna prefill with the user’s email address because our system really already knows it whether from another email or a previous form or when the user is logged in. So, let’s, first of all, talk about how we can fill this email field with the required information. For that, I will inspect this element so, I’ll right click here and click on inspect. It will take us to the actual representation of the HTML and the dom, and we can now inspect and see how our form field that we wanna fill is marked up. Fortunately, our form field here has an ID that identifies this form field uniquely on this page in the HTML so we can use that in order to dynamically fill this form with Javascript. So, let’s try this out. Let’s double click here and copy this then go over to our console. This is our Jacascript console and then we can type in the commands document.getelementbyid and in parentheses we put our element here, which is copied. Click enter and it selects the right element. We can even see that by hovering over this return statement. Now all we need to do is access the value of this form field. We can do this by.value and if you see that right now, it’s empty. Now in order to set this value we can just use the equal sign and put in the email address. For example [email protected] and we see our email field gets filled via Javascript. Now, since this is a Javascript command we could also pass that in via Google Tag Manager so let’s see how we can do that. Let’s just simply copy this. Head over to Google Tag Manager and make up a new tag. This is a onsite tag which will port our email address. We’ll go with custom HTML and surround our script with script tags and we can simply fill our line of Javascript here. Now, best practice is to wrap that into a self executing illuminous function so let’s do that and try this all out, let’s first define a trigger to only fire this on our contact page. Let’s say here’s a new contact page. We will fire this on the page we invent when we hit the contact last page. We want to trigger this on the page URL where the page URL contains contact. That should do it, let’s save this. Create this tag and preview and debug this. Let’s go over here, reload our page as well and now we see our email address gets prefilled with whatever we have put into our tag that executes. Now this obviously doesn’t make much sense because our onsite email port would always be [email protected] and wouldn’t encapsulate the email address of the actual user. Now how can we port the email address over to Google Tag Manager? Well, if you have your user identified in your system somehow, you could port the email address to Google Tag Manager via the data layer. This is the preferred form of doing so. Right here, I have an email event that has in the data layer the email address of the user who is logged in, or entered the website and this is something we want to port over to Google Tag Manager, so I’ve made up a variable here which is a data layer variable and it will pull out the email key from the data layer, so let’s try this out. Let’s go over to our tags here and back into our email port and instead of setting this to [email protected] we will now set this to the data layer variable email. Let’s save this, refresh, and refresh this and now we see that our email address was filled with whatever is in the data layer. So you can simply push the email address to the data layer if the user has already identified and then pull this via a data layer variable into your tag. Now another method would be pulling this from the URL. So, for example, if you have already an existing email and you set a where you send a user through your website for example here you can pass an a query parameter that feed in the email address of the actual user who has just clicked. This is very common practice in tools like Mailchain, Active Campaign, Infusionsoft AWebber, and so on and so on. So simply fill in the email address in the URL of your link with a query perimeter and then you can build in Google Tag Manager a URL variable and this URL variable can simply access the email key of the URL and pull in the information from the URL. So in our case we just came through this link and we have here email ask URL [email protected] Let’s check this out. In the variables we have our URL variable email query which was automatically ported over to [email protected] So we can go ahead and take this email query and put it into our email port tag. So let’s do this. Instead of the data layer variable we will have a URL variable, which will pull out the email query. All right, let’s quickly adjust our page view trigger here as well, because we only want to fire this on if the URL is actually filled with a email query perimeter so let’s set this to does not equal undefined. All right, let’s save this tag. Refresh, and let’s go back here and now you see that our tech set up has pulled from the query string into this field imported it over, so again this works as expected and if you don’t have an email in here nothing would get ported over and our tag wouldn’t even attempt to fire because our trigger has detected that our email query equals undefined. Okay, another use case here would be what if you are sending a user not directly to the form but to another website like your homepage? At this point, you know that the user just came from your email and you have his email new setter but once he goes to the contact form you will lose that URL string and therefore wouldn’t be able to fire the information over to Google Tag Manager and import it into the form field. So what can we do? Well let’s go back here. One method would be to store the information in a cookie. Now we have talked about cookies before and if you want to check out our video about how to set cookies within Google Tag Manger then I’ll link that up below, but I’ve already built in a tag here that sets a cookie if the email exists in the URL. So this script will set our cookie for a very short time, just twenty minutes. Now I must warn you storing sensitive information like the email address in a cookie is not considered best practice but in our case we’re not trying to authenticate anybody but just porting over the email so I think we will be all right. Now what our script does is take the information from the URL if it exists, and store it in a cookie. So let’s check this our here in our developer tools under resources we see that our email address has now been saved in a cookie and this cookie will persist throughout our session so if the user clicks on another website you still have that email address available. Now all we have to do is once we go over to our contact page pull that information from our cookie imported again into our email field. How would we do this? Well, in Google Tag Manager we first would need to build a variable, which I have prepared already here which will pull out the email key from the cookie and this is a first party cookie type and then we simply need to take our existing email port custom HTML here and change that over to cookie and this is email. Continue this, also change our trigger here and say the same if the email in a cookie is undefined then don’t fire this tag. Let’s save this. Refresh this, and let’s go back to our page and we see our email was correctly filled thus making it easier for the user who has already identified himself to our system. So these are three ways to quickly port the email address to your email field. If you want to get all the configuratio


Leave a Comment

1 Comment threads
5 Thread replies
Most reacted comment
Hottest comment thread
3 Comment authors
JulianEwerton Jacubowski PereiraUdi Sabach Recent comment authors
newest oldest
Ewerton Jacubowski Pereira
Ewerton Jacubowski Pereira

Thanks Julian ! You’re too good to share it … I’m from Brazil , my country is going through a crisis , living in a country town where the professional expectations are becoming smaller … But apprehending you can think of better days for the future! Hugs..


thanks. Glad this is helpful