- [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.
(upbeat hip hop music)
- 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 test@test.com 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
test@test.com 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 test@test.com
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 encoded@question.com.
Let's check this out.
In the variables we have our URL variable email query
which was automatically ported over to ask@question.com.
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 configurations
and the tags and the variables in a template
then head over to measureschool.com/emailport
or have a download prepared for you.
(upbeat hip hop music)
So there you have it.
This is how you can prefill a form field with
the user's email address via Google Tag Manager.
If you want to install this on your website
then you can head over to measureschool.com/emailport
and download all our tags, triggers, and variables
that we have used in this little video
and if you enjoyed this video, give us a thumbs up
and subscribe to this channel because we will bring you
more videos every week.
My name is Julian, till next time.