Form Field Tracking with Google Tag Manager – The Ultimate Guide

So…you have form tracking set up, leads are coming in and everything is going swimmingly.

But wait, you don’t have form field tracking set up?

Oh no, you’re missing out!

Sign up to the FREE GTM for Beginners Course...

GET THE FREE COURSE

Some of what you have to look forward to in this post:

• What is form field tracking?
• Creating a GTM form trigger
• Inspecting the form’s Data Layer & find the data you need
• Pushing form field values to Google Analytics
• Analyzing your form data
• Form field tracking examples

We all know that we can ask users for very specific information in our website forms.

For example: Name, Email, Company Size or Product Quantity to name a few. 

All this information that we collect helps us to qualify our leads upfront and enrich each user with useful data points in our CRM.

However, what if you could also send this valuable data to Google Analytics and Facebook Ads.

You would be able to segment your data, create retargeting audiences, and analyze customer groups and preferences. 

So, if you one day want to find out what percentage of your revenue comes from large companies or what marketing channel gave you the most leads, you’ll be able to do so. 

Pretty neat right?

Well, today, I’m going to show you one technique that you can use to grab the data submitted in your form fields and forward it on to your favorite tracking tools. 

Now, we’ve got lots to cover so let’s dive in!

What is Form Field Tracking?

It is a type of form tracking where you track specific form field entries from a user and then aggregate and analyze this data for insights.

For example, if you’re a SaaS company, you may ask your users what their company role is. Later on, you would perform an analysis of hundreds of your users over the course of a year to see if there are any trends for what kind of users stick around longest, choose higher-tier plans and contribute to most of your revenue.

Set Up Form Submission Tracking

🚨 Note: You’ll need Form Submission Tracking to be set up on your forms for this to work, so if you haven’t yet, go ahead and complete that setup before continuing.

First off, if I fill out this form, and click submit, you’ll see that a Google Analytics event is fired. 

It sends over an event for our Contact Us form submit, which we can see in our GTM debugging tool. 

We can also see this event being fired in our Analytics account itself.

If we go to our Google Analytics account under the real-time reporting section, under events, we see an event was just recorded.

As I mentioned, you’ll need to be seeing these events firing before we start with any form field tracking implementation.

Let’s Start – Capturing Data With a Form Trigger

So in our example form, we have here, I have now added a new form field here for 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 over any other information that we collect from this form.

Note: It wouldn’t make too much sense to send the message field data over, as each message is likely to be unique and we won’t be able to really see any trends based on it.

But standardized data like this drop-down menu with the company size would be really great data to be able to segment our users later in Google Analytics or build an audience from that we can later target with ads. 

So how can we send that data over and actually pick it up? 

Well, if you have the form submit trigger installed in Google Tag Manager, we’ll be able to see that for this event Contact Us, and the event type form submission.

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. 

Inspect the Form Trigger Variables and Data Layer

With that trigger, we actually have certain variables filled automatically. 

If you go over to the variable menu, we see our form element, classes, ID, Target, and so on have been filled with data. 

We actually use the form ID to fire our tag. So only if that condition is true we fire our tag.

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. 

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. 

Find the Form Field Value we Need Using JavaScript Object in Chrome Developer Tools 

We need to open up our Developer Tools then go to More tools.

We can then simply go to the console right here, and type in the words data Layer. 

There needs to be a capital L, like this: dataLayer

Click enter and we can see the data Layer. Press this triangle to open it up.

So here we can see the actual events that happened and 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. 

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. 

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 automatically filled with the event information from 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. 

I want to 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. 

I want to take a look at this closer. 

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 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.

Pull the Form Field Value from the Data Layer

We’re going to create a new user-defined variable. This will be a dataLayer 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. 

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!

We can now use that data Layer variable to fill in our missing pieces in our Google Analytics event tag. 

Push Your Form Data to Google Analytics

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 post. 

Let’s save this, refresh.

Now our form field tracking is all set up and we just have to test it’s working.

Go back to our page. Let’s do this again, fill out the form and the message and choose a company size and click submit.

Analyzing Form Field Data in Google Analytics

Let’s go over to Google Analytics and see if we have a new Form Submit. 

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. 

Obviously, you can look at the data in all the other Google Analytics Reports after some time has passed.

Once you have been collecting data for some time, which is under the behavior reports under events, you will find your Contact Us form submit. 

Note: It takes a bit of time for Google Analytics to gather the data and display it in all the other reports. 

But that’s really how you would send over your data to Google Analytics. 

Segment Your Data Based on Form Field Value

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. 

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 are not restricted to just using this data in Google Analytics, we could also send it over to Facebook or Google Ads. 

Form Field Tracking Use Case #1: Enrich Your Facebook Pixel Conversion Data

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. 

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. 

Form Field Tracking Use Case #2: Restrict When Your Form Submission Trigger Fires

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.

FAQ

Summary

So there you have it! That’s exactly how you can set up Form Field Tracking with Google Tag Manager. It’ll pay off down the road when you want to segment your form submissions based on these new dimensions you have available.

If you’re interested in where your traffic comes from before landing on your website, check out our handy guide on how to track the initial traffic source with GTM.

If you have any questions about Form Field Tracking, please leave us a comment below.

While you’re at it share the post with anyone you think would enjoy it!

Sign up to the FREE GTM for Beginners Course...

GET THE FREE COURSE