- 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.
(techy music)
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.