Where did the user come from that signed up to our forms or subscribed to the newsletter? We can port this information from when the user first enters our page into a hidden form field and then store it in our CRM system. In this video we are going to discover how it can be done.
Tag your URLs with UTM Parameters
Add a custom field in your CRM or Email Tool
Add a hidden form field to your signup forms
Install the provided GTM Tracking Template that will capture the UTM information and store it in a cookie
Customize the Form Fill option
? Links mentioned in the video:
UTM Parameters: https://www.youtube.com/watch?v=MNOsldDS_pY
CSS Selector Tutorial: https://flukeout.github.io/
? Learn more from Measureschool: https://measureschool.com/products
?Looking to kick-start your data journey? Hire us: https://measureschool.com/services/
? Recommended Measure Books: https://kit.com/Measureschool/recommended-measure-books
? Gear we used to produce this video: https://kit.com/Measureschool/measureschool-youtube-gear
? FOLLOW US
In this video, we’re gonna discover how you can track where your user actually came from and put that into your email marketing tool or your CRM system. All and more, coming up.
Hey there, and welcome back to another video of measureschool.com, teaching you the data-driven way of digital marketing. My name is Julian, I’m a bit congested today, but nonetheless, I wanted to come on to share a new tutorial with you.
Now today we want to talk about how we can track where your user actually came from, and put that into your CRM or your email marketing tool directly. Now, this information can be super valuable if you are a lead generation website, or you are trying to build an email list and knowing where your user actually came from, and having that field available in your database later on, can help you to segment your list for example, of if a user buys something on your website later on, you can backtrack and find out where the user originally came from, what was the signup source of that particular email address. In order to make this all work, we obviously need an email tool where we have the data available, and our example here, we’ll use Mailchimp and we’ll also need to track where the user actually came from originally. This particular tracking technique actually works with UTM parameters, so if you give them out in your advertising, you should be all set. If you don’t know what UTM parameters are, then I suggest you check out this video right here. Once a user then comes onto your page, we will pick up that information with the help of Google Tag Manager, then fill it into a hidden form field that we’ll have available through our email marketing tool like Mailchimp, but you could also use a different other CRM form or email marketing vendor. We got lots to cover, so let’s dive in.
Before we begin, let’s take a look at what we’re trying to accomplish. Let’s say you have an online store and have placed some advertising somewhere, just like this one right here. When you click on it, it takes you to your online store and here you are free to surf around, look at the products, and see what’s there, but eventually, you end up at a form just like this one, where you’re prompted to sign up for the newsletter or enter your contact information somehow, which oftentimes the user does. Let’s try this out. And you subscribe to the form. The unfortunate thing is that once you look into your list, you don’t really see where the user just came from. You just have their first name, and last name, and email address. Wouldn’t it be nice to have the actual source where the user came from? We have that information actually available because maybe you have seen, when we clicked on our ad here, this was UTM-tagged, so we have these UTM parameters at the end, which is something that is fairly standard when you are pointing different advertising to your website, so Google Analytics and other tracking tools can pick that up. On this landing page, you actually have the information that the user just came to measureschool.com, and then we need to transfer it to our form somehow and store the information in our contact records. To accomplish this, we need different components in place.
First of all, we would actually need to recognize that this is a UTM parameter tagged URL. Pull out the relevant information, for example, this UTM source, measureschool.com, store that into a cookie so it doesn’t get lost while the user navigates through the store. At the relevant page, we would need to fill that in to our form, where we would need to have a hidden form field to actually transfer that information into our contact database. Let’s start at the beginning, actually, and prepare our email marketing tool or our form tool, there where the actual data is stored to actually to be able to pick that information up. Oftentimes, this is done with an extra form field. So, the same as we see here, the first name, last, and the email address, we actually add another form field. In Mailchimp, this is easily done by going to the settings here and looking at the list fields. Here we can add a new field. We’ll just use the type of a text field. Enter the name for the field, which in our case should be source, for example. So the source, and here also, change this to source so it stays consistent, let’s save this. Now we have that field available in our contact records. How do we actually fill this field? We need to have this in our form itself. To make this possible, we just need to reintegrate our form. We go here to set up forms. We have an embedded form, and here we find the Mailchimp form text, let’s copy that. Go over to our site, I have already the HTML here prepared and I’m gonna just copy and paste that in. Update this, update our page here. And now we see we have a source field right here. But don’t worry, we’re actually gonna change this into a hidden source field later on, but for demonstration sake, I’m gonna keep this visible for now so we see what’s actually happening. Again, if the user would come in here and fill out this information, and we have a source field, let’s say this would be google.com, subscribe. Now we should be able to see that as well in our Mailchimp. Here is our contact, and here we would see he came from google.com. A fairly easy method to actually store that in our database. It gets a little bit more tricky once we want to make this dynamic, because the user shouldn’t be actually filling this out. This should be done by our tracking, automatic.
So how do we accomplish this? This is where Google Tag Manager comes in. If you have Google Tag Manager installed, we can file some tags, triggers, and variables in order to make this work. First of all, we would need to be able to pick up if there is a UTM source here in the URL, and then store that in a cookie. I already have something prepared here that you can download at measureschool.com/sourcetracking which is a tag template that you can easily install here in the admin section. Import the container. Choose the container. Select your adjacent file. Upload this to an existing workspace, we have here a default workspace. And, to do nothing wrong, you can go with the merge option and simply rename conflicting tags. You can confirm this. And now we have two new tags, a few new triggers, and variables in here.
Now what do they actually do? First of all, we have our set cookie variable and this will actually just set the information from our URL, so if there is a UTM source in the URL, then it will take that value from that UTM source and write it to the cookie. So let’s try this out. Let’s go into our preview and debug mode. Close our fields here. And click on our ad again. We have now our UTM source, measureschool, in here. We see that our set cookie has filed and has set a cookie in our browser. How can we see this in our developer tools? Under view options, we have here our developer tools. You can actually look into the application tab here, and look at the cookies that were set on this particular tool name. We see here, a new cookie called utmsource with our measureschool.com. By default, this actually expires after one day, but you can customize this in the tag if you want to. The good thing about this, it doesn’t matter where we go on the page, this will actually persist throughout our session and be available to us later on. And that is actually necessary because once we go and navigate to our Mailchimp contact form here, you want to fill that cookie value into that form field.
Now, how would we do this? There’s another tag in Tag Manager called the form fill hidden form field. If you open this up, you actually find the mechanisms to fill our form field. All we need to have is the selector of that particular form field. Now, to find the correct selector here, we actually need to go back to our page, find our field that we want to fill, inspect this element, and we can see the HTML markup. It depends on how your markup is structured, but in our case, we have a class, we have even an ID, we have a name source, and the different methods of writing a CSS selector. In our case, it’s very straightforward, ’cause we have an ID here and we can use this selector, NCE source. Just copy it and fill in our CSS selector. This is done with the pound sign for IDs. And then NCE source. Now again, this might differ, and you would need to know how to use CSS selectors. It doesn’t take much to get familiar with them. I’m gonna make up a resource down below. Once you have this CSS selector in here for your input field, you can go ahead and configure the trigger. Now I’ve prepared a trigger here called dom form page, which we would attach to our tag and let’s save this. But before we go into the preview and debug mode, we actually need to customize this further, so here’s our dom form page. Here it just looks at if the UTM source cookie is actually filled and it’s not undefined. I would put in another condition to only attempt to fill the form field when it’s actually on the page. Let’s say we have our Mailchimp contact form fields here and could simply say that if our page path contains Mailchimp contact form, we should be good to go. Let’s save this. And now we can test it all out, let’s refresh our page. Go back.
Let’s go, first of all, to a category page to check whether something is firing. Nothing is firing. Now we’ll go to our Mailchimp contact form page and our form fill is firing. We see it filled out automatically our source field with our cookie. Now really everything is in place in order to track this correctly. I promise you that we’ll actually hide this form field. It’s easily done by going into your HTML, and actually looking up where you find that form field, would be this form field right here, and changing the type from text to hidden. We can also get rid of the different markings here, like the label. This is specific to Mailchimp. You don’t maybe have to do that in your form field. Let’s reload this and see if it worked. So now this home form field is actually hidden, but it’s actually still in the HTML. If you go to inspect the element here, you should be able to still find it. This is our email field, then beneath that, we have our hidden form field right here, so it’s actually hidden from the user, so the user wouldn’t see this. But we see our measureschool.com got filled out. Let’s test this again, let’s go back to our test site here. Click on our ad, we have our UTM source here. Go to any other page, and later on, we’ll go to our Mailchimp page. We fill out our form information. Subscribe. And we should be in a database. So here we go, we have our hidden form test. We see that our source is now filled out dynamically from measureschool.com. Now that everything works, we just need to go ahead and submit this version. Give it all a name. And publish this so all your users will be automatically tracked with this method. This is how you can track where your user came from in your email or contact database.
All right, cool. Now you know how to track where your user actually came from and fill that into a hidden form field and then transfer that into your email marketing tool or your CRM system. If you want to download the tracking template that I had prepared for you, then head over to measureschool.com/sourcetracking and we’ll get you all sorted out.
If you like liked this video, why not give us a thumbs up? And also subscribe to our channel right over there because we bring you new videos just like this one, every week. My name is Julian, ’til next time.