In this video, I'm going to show you how you can extract data from a given form field
that was submitted and forward this onto your tracking tools, such as Google
Analytics, or the Facebook Pixel.
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.
And today we want to talk
about how we can extract data from a submitted form and forward this on to our
tracking tools.
Now, you're surely aware that there's great information available in
a form that is filled out like a Contact Us form.
You could get data like how big is
your company, what is your request all about, what are your preferences, what are you
interested in, and that data normally goes into your CRM systems so the request can
be probably answered.
This is great data that I'd love to have available as well in
my Google Analytics or my Facebook Pixel so I can do segmentation, retargeting,
analyzing of certain customer groups that have certain preferences, right?
Well,
today, I'm going to show you one technique to actually grab that data from a
submitted form field and forward it on to your favorite tracking tools.
In this
video, we're going to use some techniques in Google Tag Manager to actually dig
deeper into an object that is inside of the data Layer, and pull out the right
information from the submitted form field so we can use that in our tracking
deployment.
Now we've got lots to cover
so let's dive in.
So here we are back in our demo shop.
And in a previous video, we have already set up
our form tracking.
So if I fill out this form,
and send this off, you'll see that a Google Analytics event is fired.
It sends over
an event for our Contact Us form submit.
We can also see that in our analytics
itself under the real-time reporting see under events, an event was just recorded by
Google Analytics.
Now, you need to have that set up to continue.
If you don't have
that yet, then please go back to our video that I'm going to have linked up down
below as well.
Now what is new with this form is actually that we have a new form
field here the Company size.
And while we are not allowed to send any personal
identifiable information, like the name or the email address to Google Analytics, we
can send information that we can pick up from this form on to the tool.
Now, it would make less sense to send a message since that will be always different.
But standardized data like this drop-down menu, the company size would be really
great data to be able to segment our users later in Google Analytics or build an
audience of that we can target.
So how can we send that data over and actually pick
it up?
Well, as you remember, if you have the forms submit trigger installed, which
we have in Google Tag Manager, right here is our form Contact Us and the event type
form submission, the trigger will automatically detect when a form is submitted.
And
if checks our rules or trigger rules, filter rules that we have right here, then we
fire our event to Google Analytics and data is recorded.
Now, with that trigger, we
actually have certain variables filled.
So if you go over to the variable menu here,
we see our form element, classes, ID, Target, and so on have been filled.
We actually
use the form ID to fire our tag.
So only if that condition is true we fire our tag.
Now there's more information here.
You can see the classes, you can see the form
texts, which doesn't really make too much sense.
But there's also an interesting one,
which is the form element.
And here it says object HTML form element.
As you might
know, this is all data that is currently in the data Layer.
So let's go over to this
tab right here.
And here, we can find our form elements again.
This is actually
what's getting pushed to the data Layer when we submit a form.
So we have
gtm.elementclasses, which is translated into this form classes variable.
And we also
have our GTM.element, which still doesn't give us more information here.
So let's
look into the data Layer and the actual JavaScript object.
For that, we need to open
up our developer tools, here under more tools, we have our developer tools.
And here,
we can simply go to the console right here, and type in the words data Layer.
Now,
there needs to be a capital L, this is a convention how to write it, this is the
variable.
And when we click enter, we can actually see the data Layer, it's a bit
cryptic, we just need to press this triangle to open it up.
So here we can see the
actual events that happen, or the page the data Layer pushes that happened,
If you compare to our event menu here, we see message, page view, DOM ready, and so
on.
We have five messages here.
And in this case, we also have five, the number is a
bit different because array starts with the index zero.
Now, we want to particularly
look at this fifth one.
So the last one, which is the number four right here.
And this one has our GTM element in here, and a little bit more information.
So let's
open that up.
And we have some information here.
This is really what we also saw in
the data Layer.
Now, let's go to this GTM element and actually open that up, and it
gives us a host of information.
What does that actually mean?
Well, the data Layer is
actually filled with the event information of the form Submit.
So anything from
classes or the parent elements, the method hereof that data being transferred is also
in this element.
But the interesting part here is actually the input fields, because
you may have noticed this already, if I go and hover over them, we have a few signs
up here that this is actually activated.
Now, I want to particular look at the
company size here.
So I'm going to just scroll over and see right here.
I can find
that this element is probably our interest or company size drop down select field.
So
I want to take a look at this closer.
So I'm just going to open this up again.
And we
have again, more information here about this drop-down field.
We have the options,
all different information could be interesting, like what the idea of this input
field is, what the next sibling is, for example, and so on, and so on.
But if we look
at as closely and it's actually right at the bottom, we will find the actual value
that this element holds when we click on the submit button.
So in this case, it would
be small business.
So this is great because we can pull it out of this element, and
then transfer that into Google Analytics.
How would we do that?
Well, since this is
in the data Layer, we would need to use a data Layer variable.
So let's go over to
Google Tag Manager, click on variables here.
We're going to create a new user-defined variable.
This will be a data Layer variable
for our business size.
And as the configurations will choose our data Layer variable
right here.
And what do we put into the data Layer variable name?
We're going to use
the dot notation and it's pretty straightforward if you know the rules.
You just need
to look for the right elements.
In this case, it would be four, ignore this element
number four, as we will check any data Layer push if this is actually available.
Where we want to start is to look at what is in front of the colon here, gtm.element,
and we go down with see 14, and then we go down even further, which was
value.
Now if I hover over this value you already see 4 GTM element 14 value.
Again, ignore
the four we'll just go with the GTM element at the beginning.
Go over to Google Tag
Manager, input GTM element,
then with the dot notation, we'll dig deeper into this object, which would be the
number 14.
And then we're going to get our value.
Let's save this
and simply try it out.
Let's go back reload here,
going to put in another test
and send it off.
Let's choose corporate and send this off.
GTM form submit right here, and how that our data Layer variable gets filled with the
actual value of the input field.
Great.
So now we can use that data Layer variable to
fill in our missing pieces in our Google Analytics event tag.
Let's go over to Google
Tag Manager and tags will simply
edit our tag.
Here we have a category action.
And let's fill the label with our data
Layer variable business size.
Again, this is just like a placeholder, it will be
filled with whatever the user has chosen as his business size.
We can leave all the other configurations untouched.
If you want to configure this
again, then check out the video.
Let's save this, refresh.
Go back to our page.
Let's do this again,
fill out the form
and the message and choose a company size.
this sends us off.
Let's go over to Google Analytics and see if we have a new form Submit.
Here we go.
It just came in.
And if we click here on the form category, we see that the Contact
Us is now medium size business.
So this was correctly transferred.
Now obviously, you
can look at the data in a more comprehensive method later on.
Once you have a bit
more data in here, which is under the behavior reports under events, you will find
your Contact Us form submit.
Be aware that this takes a bit to gather the data and
display in these more comprehensive reports.
So there is no data in here right now.
But this is really how you could send over data to Google Analytics.
And if you
choose to segment the data later so only look at one or the other business size, you
could always add a segment here, and then build your own segment
that looks at the events that only have the label
small business size, for example.
And Google Analytics would only show you those,
which obviously doesn't quite work in my demo just yet because we don't have data in
here.
But this is how you could then use that data to segment your users in Google
Analytics.
But obviously, since we have implemented this in Google Tag Manager, we
don't only we are not restricted to Google Analytics, we could also send us over to
Facebook.
So if we had a Facebook event here, and I have prepared a Facebook event
that fires on our page view and tracks the lead, we could add some extra data here by
putting in a comma and a new object.
And then expanding that to say, we want to send over the attribute business size.
And I'm going to send over whatever is filled into our data Layer variable.
So in our
case, I'm going to open this up with the two curly brackets and choose my data Layer
variable that I have just created
right here.
Then I attach my usual trigger
and save this.
Refresh.
Let's try this out again.
Let's go back first,
fill that out.
Let's go with medium size, going to send us off.
Let's have a look at our Facebook
Pixel helper, we can see our lead was sent off with the custom parameters, business
size, Medium Business size, and this should then be transferred to our Facebook
Pixel.
We can have a look at the event debugging under the Facebook analytics section
here.
Here we go, event debugging.
No, somehow it doesn't want to show me the data.
I suspect that I haven't used this
test account for a long time.
So maybe it takes a while to populate this.
But
normally, you should see that under your event debugging panel here that there was a
new event with that data sent over.
So you can use that data as well as in the
Facebook Pixel.
And obviously, one other use case would be to use that variable in
the trigger itself.
So you could go into the trigger and say, I also want to have
another condition here where the business size needs to contain it needs to be a
small business, for example.
In which case your tags only would fire if that is
actually true.
So really versatile, once you know how to pull data out of your form
field, and then transfer that over to Google Tag Manager and use it in your tags and
triggers.
Don't forget, in the end, if you want to take this live, you need to submit
this as a version.
I want to press publish.
This will publish your version to the website in Google Tag
Manager.
So your data will be tracked for all users.
All right so there you have it.
This is how you can extract data from a form field
and forward it on to Google Analytics or the Facebook Pixel or any other tracking
tool really.
Now I'd love to hear from you.
How would you use that data later on for
retargeting, for analysis, for different other things that I'm not aware of?
That's
why I want to hear from you in the comments down below.
And if you haven't yet done
consider subscribing right over there.
Also, click that bell notification icon.
So
you'll get a notification once we bring out a new video, which happens really every
week now.
My name is Julian till next time.