Form Field Tracking with Google Tag Manager – The Ultimate Guide

Last Modified on November 21, 2024

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!

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 precise information in our website forms. For example: Name, Email, Company Size, or Product Quantity to name a few.

All this information we collect helps us 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 can 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’ll show you one technique that you can use to grab the data submitted in your form fields and forward it 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, you would analyze hundreds of your users over a year to see if any trends exist 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, 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 submission, 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 → Real-Time reporting section → events, we see an event was just recorded.

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

Let’s Start – Capturing Data With a Form Trigger

So in the example form, we have here, I have added a new form field for Company Size.

While we are unable to send any personally identifiable information, like the name or the email address to Google Analytics, we can send over any other information we collect from this form.

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

Standardized data, however, like the drop-down menu with the company size would be great data 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 pick it up? 

We have the form submit trigger installed in Google Tag Manager called form – Contact Us, which has the event type: form submission.

It needs to satisfy the filter rules we set for the trigger.

If they are satisfied, we fire our event to Google Analytics, and the data is recorded. 

Inspect the Form Trigger Variables and Data Layer

With that trigger, we have certain variables filled automatically. 

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

You can see the classes and form texts, but there’s also an interesting one, the form element. And here it says object HTML form element.

As you might know, this is all the data currently in the Data Layer. 

Let’s go to the Data Layer tab. We can find our GTM Form Submit event and the entire code pushed to the data layer when we submit a form.

Each row corresponds to key-value pairs that we can see in the Variables tab. For example, the gtm.elementclasses translates to the Form Classes variable.

If we look at the gtm.element portion, it still doesn’t give us more information here.

Let’s look into the data Layer and the actual JavaScript object in your browser’s developer tools.

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

Open your browser’s settings, go to More Tools → Developer Tools.

We can then go to the Console tab and type in dataLayer.

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

Click enter and we can see the Data Layer. Press the 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 it to our event menu here, we see the message, page view, DOM ready, and so on. We have five messages here.

If we look at the number of events in the Tag Assistant and the data layer, we have the same five items.

🚨 Note: The numbering is a bit different between the two because the array in the data layer 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. Let’s open that up.

It has the information we also saw in the Data Layer. Let’s go to this GTM element and open that up. It gives us a host of information.

What does this information mean?

The data layer is automatically filled with event information from the Form Submit, so anything from classes, parent elements, or the method the data is being transferred. 

The interesting part here is the input fields.

If I go and hover over them, it highlights the specific elements of our form. I want to look at the company size.

Scroll over and hover over each row to find which one corresponds to our company size drop-down select field.

I want to take a look at this closer.

I’m just going to open this up again. We have again, more information here about this drop-down field.

We have the options and all different information could be interesting, like the input field ID, name, parent element, and so on.

If we look closely and scroll to the bottom, we will find the actual value that this element holds when we click on the submit button. So in this case, it is a 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?

Since this is in the data Layer, we would need to use a data layer variable.

Pull the Form Field Value from the Data Layer

Let’s go to Google Tag Manager, and click Variables.

We’re going to create a new user-defined variable. This will be a dataLayer variable for our business size. For the configuration, choose Data Layer Variable.

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.

Go back to our data layer and hover over the company size value.

Ignore the number four. We’ll just go with the GTM element at the beginning and continue with the other values.

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. Then, we’re going to get our value.

Let’s save this and try it out. Reload our preview mode and put in another test. This time, choose corporate for the company size. Submit the form.

Open the Tag Assistant and verify 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 the missing pieces in our Google Analytics event tag. 

Push Your Form Data to Google Analytics

Go to Google Tag Manager and edit our Google Analytics tag.

Let’s fill the label with our data layer variable for our 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.

Let’s save this, and refresh. Now, our form field tracking is all set up and we just have to test if it’s working.

Analyzing Form Field Data in Google Analytics

Go back to our page and fill out the form again, selecting Medium Size Business. Next, go to Google Analytics and see if we have a new Form Submit.

If we open the form submit, we see that the value for Contact Us is now Medium Size Business.

Great! This was correctly transferred.

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

🚨 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

If you choose to segment the data later, so only look at one or the other business size, you could always add a segment.

Click the Add Segment button at the top of the event overview page.

Then, you can build your segment that looks at the events with the label small business size, for example.

This is how you could then use that data to segment your users in Google Analytics.

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

We have a Facebook event that fires on our page view and tracks a lead event, we could add some extra data here by putting in a comma and a new object.

We want to send over the attribute business size. And I’m going to send over whatever is filled into our data Layer variable.

In our case, I’m going to open this up with the two curly brackets and choose the data layer variable that we have created.

Then, let’s attach our Form Submit trigger and click Save.

Refresh the preview mode and let’s try this out again.

Let’s have a look at our Facebook Pixel Helper. We can see our lead was sent off with the custom parameters, and business size.

This should then be transferred to our Facebook Pixel.

We can have a look at the Event Debugging section in Facebook Analytics.

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

One other use case would be to use that variable in the trigger itself.

You could go into the trigger and say, I want to have another condition where the business size needs to be a small business, for example.

Once you know how to pull data out of your form field, you can 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.

Provide a version name and 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 GA4.

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!