UTM information is only visible on the Landing page. If you capture the information and transfer it into a cookie you can easily use it in e.g. a form. That way, when the user submits the form, you’ll be able to also know where he originally came from.
- Capture the UTM Information and write Cookie
- Read Cookie with Google Tag Manager
- Fill in the Cookie value into a Form automatically
In this video, I’m going to show you how you can take your UTM source parameters from your landing page and transfer them into a hidden form field. So you know where your users came from that submitted that form. All and more coming up.
Hey there measuregeeks. Julian here back with another video. Today, we want to talk about how we can utilize that sweet UTM information that is oftentimes in the URL of our landing page and put that into a form, into a hidden form.
Why would you like to do this? Well, the source information is oftentimes available in our analytics tools like Google Analytics, but wouldn’t it be more useful inside of our CRM system, so we actually know where that user came from that submitted our form or who signed up to our newsletter?
Well, today we’re going to do just that. The only problem is that this source information is oftentimes only available on the landing page itself. If the user comes from AdWords or from another UTM source, then you might only see this on the landing page on the top. If the user goes from one page to the next to the next, it wouldn’t be there anymore.
So how could you then fill it into a form field. This is where a cookie comes in. With a cookie, we can remember that data and later on once the user is ready to submit his form, we can take that information from that cookie and put it into a hidden form field so the user wouldn’t even notice it.
That information then goes into our systems. And we can find out where the user actually came from that submitted that form. So as you can see, we got lots to cover. So let’s dive in.
Today, our journey starts in our demo shop, where I have already Google Tag Manager installed. And we have some forms here that we want to fill out.
So for example, here our Contact Form 7, we have information that the user would normally fill out and now we need to space first of all to send that information into. So we can later pick up where the user came from.
So let’s create another form field here that we can later fill out. For that I will go into my settings of my WordPress site. And here we are on the contact form 7 form. And I’m just going to simply add another text field to this form with the name of source.
Let’s add this in here,click Save. And let’s look at our form. And here we see this is our form fields that we will now filled with our information where the user came from. So we will have it later inside of our form submission. And if you have a contact a new contact, we could look up where this contact came from. All right, next up, let’s go into our Google Tag Manager.
And here we have an empty account. Now, we want to first of all pull in the data of UTM when we go to a page. So there is a new tag template that Simo Ahava created. All we need to do is go on our new tag, tag configurations.
And up here, we can access the community template gallery, and there should be a template called persist campaign data right here. And if you want to find out more about this, you can go to the documentation link, right here, we’ll choose this template. And let’s give it a name. Right. And let’s look at the configurations. We want to store campaign data in a browser cookie.
That is what we want to do. And here is all the information that we want to store. So UTM source, UTM medium, UTM campaign, content and so on. There’s something you don’t want to store because it has information about the user that you don’t want to transfer into your tools, then don’t put this into the list.
But by default, these are the UTM parameters and the GCL ID. You could also put in the Facebook ID, although it wouldn’t do you any good because Facebook doesn’t allow you to connect the data just yet.
And this will all be written to a cookie called underscore underscore GTM campaign URL. And we also have a referral cookie name. So if you want to store the referrer, if no UTM parameters are filled out, then you can also take advantage of the referral. Okay, there’s a second option to push original location into data layer. That’s not something we want to do right now.
But if you’re interested in that, you can read more about this under this little bubble. When do we want to fire this on all pages? Because we don’t know which page the user uses to enter our website. Let’s save this. And we have it now installed. So we’ll go into our preview mode up here on preview. Go back to the page. Reload our page. And we see it fires now. Now what does this tag actually do? If we enter the website, for example, let’s enter our homepage with UTM parameters. And I’m just going to put some UTM test parameters in here.
So UTM source test, UTM medium, and so on. Let’s enter the website. We reload the website, our tag files, and it should now have written a cookie into our browser. How can we see cookies? Well, that’s possible in the developer tools. So we can go over here to more tools, and under developer tools, can look into our application tab. And inside of our application tags, we can find our cookies here on the left hand side and our website where our cookie should be sorted.
Now we chose the cookie name as you might remember, and that was underscore GTM campaign URL. And here we go, we get the full value of the URL that the user came from. Now, this is URL encoded. So good luck. is a bit weird, but we can change this around later on.
Now to have this value actually available in Google Tag Manager, we need to pull it out into a variable in order to work with it further. So we can do this by going into Google Tag Manager under variable.
We’ll create a new user defined variable, first party cookie variable. Here we go and we need to have the cookie name. In our case, it was campaign URL, I’m just going to copy this and put this in here.
Don’t miss type. and here we can see it gives us the option to Yuri decode this cookie. Now this is an encoded cookie. And therefore, if you check that option, it should go back to normal and choose that and give it an appropriate name as well.
All right, we have this in here. Let’s refresh and go back to our page, refresh our page. And now we should see our cookie being read by our variable so we can go over to variables right here. Let’s choose a message. And here we go. And this is our first party cookie variable, pull it out and decode it into our normal URL.
So we have all the information now available that we had at the beginning of our session inside of the landing page and UTM parameters. Why is it actually stored in a cookie? Well, if we go to another website here, page of our website, we see that the UTM parameters actually disappear.
They’re only on the landing page of our session. And therefore, we wouldn’t be able to pick them up via a URL variable, for example, we have them saved in a cookie now and can at any time, get that value at a later stage, even though it’s not in the URL anymore.
And we’ll choose a custom HTML. So what do we fill into this field, I have a little script prepared here already. And you will find this in the description down below, where we simply need to fill out the value, which is the variable, which information we want to be written into the field. So in our case, that would be our cookie variable. And then we need a selector which identifies the form field.
So in our case, we can actually try this out by right clicking and inspecting the element. You need to know a little bit of CSS in order to know how to select this specific form field. And actually, I oftentimes try this out by going into the console and writing document, query selector.
And then we can enter our CSS selector here and one of the methods to getting our input field is first of all the element input, and then the attribute, which was the name attribute, which should equal source. So press Enter. And here we go. I can actually see it a little bit small here.
But if I hover over it, this is the right form field that we want to get to. So this is the CSS selector that identifies our form field, I will enter it in here. Now we just need to put in a trigger here. And the trigger is actually dependent on where the form field is located. So in our case, is on this page, contact form seven.
And we’ll fire this all on Dom ready. So let’s go ahead and choose our event. In our cases to Dom ready event. We choose the DOM ready event because we want to make sure that our form field actually exists when the document object model is loaded. Okay, let’s save this. And we can try this all out.
So we have reloaded this page of tag fires. And maybe you already saw it on our reload, we have filled in that information into our form field. So this worked. And if the user fills this out, now sends this off.
The message has been sent, let’s go to our contact form and actually look at our submissions. Oh, this is a contact form seven. So we don’t really have a submissions that we can look at. Okay, so here, we have our form field and I just quickly put in our reply field into an email. So we have a source field here, once our email gets sent off, so let’s try this again. Send this off, and we shouldn’t have gotten an email.
Yes, here we go. And here we have all the information that was sent over to our form, including the source, so we know where the user has come from. So this works fine. Obviously, you probably want to hide this form field here, you could do this in contact form seven, at least, by writing it in here. I think that should hide this from the user, it will still be available in the background.
So if we look under inspect here, should still have this input field source in here. So this gets filled out correctly, and we have all the information that we would need inside of our form. One caveat that I didn’t explain in this video, is if there’s no UTM source, or there are no UTM parameters, inside of the URL when the user comes to the page, you might want to utilize the referrer cookie that might also be set. Instead, it would require a bit more fiddling with the trigger and a dynamic filling out of either the UTM parameters or the referrals.
So I’ll leave it up to you to fiddle around with this a little bit more. Don’t forget, if you want to take this live on to your website, you need to submit this as a version to all your users. And then it will go live on your website.
All right, so there you have it. This is how you can transfer your UTM source information from the landing page into a hidden form field. Now this technique could obviously be broadened and more advanced in certain areas. So you could have multiple hidden form fields. You could also have different information, like for example, where the user came from, but the multiple sources that you came from.
So if you came first from Facebook, then from Google ads, then from a referrer, you could fill this all into a hidden form field and have more information available. Check out our source cookie if you want to find out more about the multi-source approach, but the basic technique would stay the same. We take that information, put it into a cookie, then fill it out later on into our hidden form fields.
If you have any more questions about this, please leave us a comment down below. If you liked this video, then I’d love from you a thumbs up. And yeah, subscribe to this channel if you haven’t yet because we bring you new videos just like this one every week. Now my name is Julian til next time