馃攳
How to capture UTM Parameters in a Cookie and transfer them to a (hidden) Form Field - YouTube
Channel: MeasureSchool
[0]
in this video I'm gonna show you how you
[1]
can take your UTM source parameters from
[4]
your landing page and transfer them into
[6]
a hidden form field so you know where
[9]
your users came from that submitted that
[11]
form although more coming up hey they're
[21]
magic eggs jooheon here back with
[23]
another video today we want to talk
[24]
about how we can utilize that sweet UTM
[27]
information that is oftentimes in the
[29]
URL of our landing page and put that
[32]
into a form into a hidden form field why
[35]
would you like to do this well the
[37]
source information is oftentimes
[39]
available in our analytics tools like
[41]
Google Analytics but wouldn't it be more
[43]
useful inside of our CRM system so we
[46]
actually know where that user came from
[49]
that submitted our form or who sign up
[51]
to our newsletter well today we're gonna
[54]
do just that the only problem is that
[56]
this source information is oftentimes
[58]
only available on the landing page
[60]
itself if the user comes from AdWords or
[63]
from another UTM source then you might
[67]
only see this on the landing page on the
[69]
top if the user goes from one page to
[72]
the next to the next it wouldn't be
[73]
there anymore so how could you then fill
[76]
it into a form field this is where a
[78]
cookie comes in with a cookie we can
[81]
remember that data and later on once the
[83]
user is ready to submit his form we can
[86]
take that information from that cookie
[88]
and put it into a hidden form field so
[91]
the user wouldn't even notice it that
[93]
information then goes into our systems
[95]
and we can find out where the user
[97]
actually came from that submitted that
[99]
form so as you can see we got lots to
[101]
cover so let's dive in today our journey
[103]
starts in our demo shop where I have
[106]
already Google tag manager installed and
[108]
we have some forms here that we wanna
[111]
fill so for example here contact form
[113]
seven we have information that the user
[117]
would normally fill out and now we need
[120]
a space first of all to send that
[123]
information into so we can later pick up
[126]
where the user came from so let's create
[128]
a another form field here that we can
[131]
later fill out for that I will go into
[133]
my settings of my wordpress site and
[135]
here we are on the contact form seven
[138]
form and I'm just gonna simply add
[141]
another text field to this form with the
[145]
name of source let's add this in here
[150]
click Save and let's look at our form
[155]
and here we see this is our form field
[159]
that we will now fill with our
[160]
information where the user came from so
[163]
we'll have it later inside of our form
[166]
submission and if you have a contact
[169]
with new contact we could look up where
[171]
this contact came from all right next up
[173]
let's go into our Google tag manager and
[177]
here we have an empty account and now we
[180]
want to first of all pull in the data of
[183]
UTM s when we go to a page so there is a
[187]
new tag template that similar I have
[189]
created all we need to do is go on our
[193]
new tag tag configurations and up here
[196]
we can access the community template
[198]
gallery and there should be a template
[201]
called persist campaign data right here
[206]
and if you want to find out more about
[208]
this you can go to the documentation
[210]
link right here we'll choose this
[212]
template and let's give it a name right
[216]
and let's look at the configurations we
[220]
want to store campaign data in a browser
[222]
cookie that is what we want to do and
[224]
here is all the information that we want
[227]
to store so UTM source UTM medium UTM
[231]
campaign content and so on if there's
[233]
something you don't want to store
[234]
because it has information about the
[237]
user that you don't want to transfer
[239]
into your tools then don't put this into
[242]
the list but by default these are the
[245]
UTM parameters and the GCL ID you could
[248]
also put in the Facebook ID although it
[251]
wouldn't do you any good because
[252]
Facebook doesn't allow you to connect
[254]
that data just yet and this will all be
[256]
written to a cookie called underscore
[259]
underscore GTM campaign URL and we also
[262]
have a referral cookie name so if you
[264]
want to store the referrer
[266]
if no UTM parameters are filled out then
[269]
you can also take advantage of the
[271]
referrer
[272]
okay there's a second option to push
[274]
original location into data layer
[276]
there's not something we want to do
[278]
right now but if you're interested in
[280]
that you can read more about this under
[282]
this little bubble when do we want to
[284]
fire this on all pages because we don't
[287]
know which page the user users to enter
[290]
our website let's save this and we have
[293]
it now installed so we go into our
[296]
preview mode up here click on preview go
[299]
back to the page reload our page and we
[303]
see it fires now now what does this tag
[305]
actually do if we enter the website for
[308]
example let's enter our home page with
[311]
UTM parameters and I'm just gonna put
[313]
some UTM test parameters in here so UTM
[316]
source test UTM medium and so on let's
[319]
enter the website we reload the website
[321]
our tag fires and it should now have
[324]
written a cookie into our browser how
[326]
can we see cookies well that's possible
[328]
in the developer tools so we can go over
[330]
here to more tools and under developer
[333]
tools you can look into our application
[335]
tab and in certain of our application
[338]
tab we can find our cookies here on the
[340]
left hand side and our website where our
[343]
cookie should be sought to now we chose
[347]
the cookie name as you might remember
[348]
and that was under squad GTM campaign
[351]
URL and here we go we get the full value
[354]
of the URL that the user came from now
[357]
this is URL encoded so it looks a bit
[360]
weird but we can change this around
[362]
later on now to have this value actually
[365]
available in Google tag manager we need
[367]
to pull it out into a variable in order
[370]
to work with it further so we can do
[372]
this by going into Google tag manager
[373]
under variables you create a new user
[377]
defined variable first-party cookie
[380]
variable here we go and we need to have
[382]
the cookie name in our case that was
[384]
campaign or ela I'm just going to copy
[387]
this and put this in here
[388]
don't miss type and here we can see it
[391]
gives us the option to URI decode this
[394]
cookie now this is an encoded cookie and
[398]
therefore
[398]
if you check that option it should go
[400]
back to normal let's choose that and
[402]
give it an appropriate name as well all
[407]
right we have this in here let's refresh
[409]
and go back to our page refresh our page
[411]
and now we should see our cookie being
[414]
read by our variable so we can go over
[417]
to variables right here let's choose a
[419]
message and here we go and this is our
[422]
first party cookie variable pulled it
[424]
out and decoded it into our normal URL
[427]
so we have all the information now
[430]
available that we had at the beginning
[432]
of our session inside of the landing
[434]
page and the UTM parameters now why is
[436]
it actually stored in a cookie if we go
[439]
to another website here page of our
[442]
website we see that the UTM parameters
[444]
actually disappear they only are on the
[447]
landing page of our session and
[449]
therefore it wouldn't be able to put
[451]
them up via a URL variable for example
[454]
we have them saved in a cookie now and
[457]
can at any time get that value at a
[460]
later stage even though it's not in the
[462]
URL anymore so now that we have this
[464]
available how can we fill it into our
[468]
form that we have on our contact form 7
[471]
and that's actually pretty easy we just
[474]
need to have a little bit of JavaScript
[475]
pull out the value and fill it into this
[478]
form what does this JavaScript look like
[480]
let's go ahead and create a custom HTML
[482]
tag
[486]
and we'll choose a custom HTML so what
[489]
do we fill into this field I have a
[491]
little script prepared here already and
[494]
you'll find this in the description down
[496]
below where we simply need to fill out
[498]
the value which is the variable which
[501]
information we want to be written into
[503]
the field so in our case that would be
[505]
our cookie variable and then we need a
[508]
selector which identifies the form field
[511]
so in our case we can actually try this
[513]
out by right clicking and inspecting the
[516]
element you need to know a little bit of
[518]
CSS in order to know how to select this
[521]
specific form field and actually I
[523]
oftentimes try this out by going into
[527]
the console and writing document query
[531]
selector and then we can enter our CSS
[535]
selector here and one of the methods to
[538]
getting our input field is first of all
[541]
the element input and then the attribute
[543]
which was the name attribute which
[546]
should equal source so press ENTER and
[549]
here we go I can actually see this a
[551]
little bit small here but if I hover
[554]
over it this is the right form field if
[556]
we want to get to so this is the CSS
[558]
selector that dentists eyes our form
[561]
field I will enter it in here now we
[564]
just need to put in a trigger here and
[565]
the trigger is actually dependent on
[568]
where the form field is located so in
[570]
our case is on this page contact form 7
[573]
and we'll fire this all on Dom ready so
[577]
let's go ahead and choose our event in
[580]
our case it's a Dom ready event we
[582]
choose the Dom already event because we
[584]
want to make sure that our form field
[587]
actually exists when the document object
[590]
model is loaded ok let's save this and
[593]
we can try this all out let's refresh
[596]
and we get some arrows here okay whoops
[599]
prepared code is not ready because I
[603]
need to change our variables here let's
[606]
try this refresh yes okay so previously
[610]
I had some standard JavaScript written
[614]
that is not conformed with the
[616]
interpreter of Google tag manager but
[618]
now it should work
[619]
so we have reloaded this page of tag
[622]
fired and maybe you already saw it on
[624]
our reload we have filled in that
[627]
information into our form field so this
[631]
worked and if the user fills this out
[633]
now sends this off message has been sent
[638]
let's go to our contact form and
[641]
actually look at our submissions oh this
[645]
is a contact form 7 so we don't really
[647]
have a submissions that we can look at
[650]
okay so here we have our form field and
[653]
I just quickly put in our reply field
[657]
into an email so we have a source field
[660]
here once our email gets sent off so
[663]
let's try this again send this off and
[667]
we should have gotten an email yes here
[670]
we go and here we have all that
[673]
information that was sent over to our
[675]
form including the source so we know
[678]
where the user has come from so this
[681]
works fine obviously you probably want
[683]
to hide this form field here you could
[686]
do those in contact form 7 at least I
[690]
have writing hidden in here I think that
[693]
should hide this from the user it will
[697]
still be available in the background so
[699]
if you look under inspect here should
[703]
still have this input field source in
[705]
here so this gets filled out correctly
[707]
and we have all the information that we
[709]
would need inside of our form one caveat
[712]
that I didn't explain in this video is
[714]
if there's no UTM source or there are no
[718]
UTM parameters inside of the URL when
[720]
the user comes to the page you might
[722]
want to utilize the referrer cookie that
[726]
might also be set instead it would
[728]
require a bit more fiddling with the
[731]
trigger and a dynamic filling out of
[733]
either the UTM parameters or the
[736]
referrers so I've leave it up to you to
[739]
fiddle around with this a little bit
[740]
more don't forget if you want to take
[742]
this live onto your website you need to
[744]
submit us as a version to all your users
[749]
and then it will go live on your
[755]
all right so there you have it this is
[757]
how you can transfer your UTM source
[760]
information from the landing page into a
[763]
hidden form field now this technique
[765]
could obviously be broadened and more
[768]
advanced in certain areas so you could
[771]
have multiple hidden form fields you
[773]
could also have different information
[774]
like for example where the user came
[778]
from but the multiple sources that he
[780]
came from so if you came first from
[782]
Facebook then from Google Ads
[784]
then from a referrer you could fill this
[787]
all into a hidden form field and have
[790]
more information there available check
[791]
out our sauce cookie if you want to find
[793]
out more about the multi source approach
[796]
but the basic technique would stay the
[798]
same we take that information put it
[800]
into a cookie then fill it out later on
[802]
into our hidden form field if you have
[804]
any more questions about this please
[805]
leave us a comment down below if you
[808]
like this video then I love from you a
[810]
thumbs up and yeah subscribe to this
[813]
channel if you haven't yet because we
[815]
bring you new videos just like this one
[816]
every week now my name is Julien the
[820]
next time
Most Recent Videos:
You can go back to the homepage right here: Homepage