3 Form Tracking Techniques with Google Tag Manager

Having form tracking set up on all your website forms is an absolute must. And Google Tag Manager makes doing it easy and flexible.

In this post, we are going to explore three techniques to track form submissions with the help of Google Tag Manager and Google Analytics.

What Should You Track?

You can track a lot on your forms:

• Form submissions
• Pulling data from form fields
• Inserting information from your website into form fields
• Prefilling form fields

In this post, I’ll be talking about form submission tracking specifically. However, here are some of our other guides on form tracking:

• How to Capture UTM Parameters in Form Fields
• Form Field Tracking with Google Tag Manager – The Ultimate Guide
• Form Tracking with Contact Form 7
• How to Prefill Forms with GTM

How to Track Form Submissions?

• Unique URL Trigger
• Form Submit Trigger
• Element Visibility Trigger

Why are there three different techniques? Well, there are always multiple techniques to get the data that you want. You shouldn’t be discouraged when one or the other technique doesn’t work for what you need.

If you are flexible, you can learn about the capabilities of each tool. This way, you’ll be able to implement and test different tracking techniques so you get the data that you need in your system.

This holds especially true for forms because there are many shapes and sizes of forms available, each with different technologies. Sometimes the trigger or the technique that I show in my individual tutorials won’t work for a specific form, so it helps if you stay flexible and know about these different tracking techniques.

In this post, I’m going to show you the three tracking techniques that I use most often when it comes to forms.

Which Technique Should You Use? (Test Your Form)

Start by having your web page with the form you want to track, Google Tag Manager, and Google Analytics all open in three separate tabs. In our demo shop, we have several different contact forms.

This tutorial covers three different form tracking techniques, but not all techniques work with all types of forms. In order to find out which tracking technique we need to use, you’ll first need to test your form.

This will help you figure out what success outcome we should use as our form trigger and hence which technique to use.

There are three that we will look for in this tutorial: a URL success page; a form submit trigger; and an element visibility trigger.

In your form, fill out some test information. Click on Send and see what happens.

In the case of this first form case, we get redirected to a success page with a unique URL in the address bar.

Keep track of these interactions on your site. If there is a clear success page here and the URL changes, you can track form submissions using ordinary pageviews on Google Analytics without much extra effort.

You should use the first form tracking method of this tutorial: 1. Tracking Form Submits with a URL Success Page.

Let’s demonstrate a different potential outcome. If your contact form doesn’t lead to a new URL when a user submits, tracking can get a little more tricky.

In this second contact form, we seem to be redirected to a success page, but the URL doesn’t actually change. Instead, we get a message on the same page that this was submitted successfully.

If this is how your contract form behaves, we need to try a different tracking approach because there’s no new pageview to track. In this case, you should use use the second method in this tutorial: 2. Form Tracking With Form Submit Trigger.

There is a third possibility that we will cover in this tutorial. On this third contact form, it just gives us a success message down here at the bottom of the form, which is still visible. There is no new URL, and besides the addition of this text element, the page hasn’t changed after submitting the form.

If your form submission looks like this, you might have a couple of options. Again, you can’t track success based on the URL, but you might be able use the Google Tag Manager forms submission from the second method. This is especially handy if you already have this form trigger set up from following the tutorial.

However, I want to show you another method to track this that will give you more flexibility. In some cases, you might not want to use the form submit trigger if it has some problem, or if you don’t even see the event inside of Google Tag Manager.

In this case, you’ll want to try the third method covered in this post: 3. Form Tracking With Element Visibility Trigger.

1. Tracking Form Submits with a URL Success Page

If you already have Google Analytics deployed, then you will get some data just from the page view for the success page in your Google Analytics account. 

From here, you can classify this as a Google Analytics Goal so that every time somebody goes to this page, there will be a conversion within Google Analytics.

Create a Goal in Google Analytics

Go over to your settings, marked by the gear icon, and make sure you are looking under the Admin header. Under the Goals heading, click the button that says + New Goal.

You’ll see  different template options here. I usually go with the custom template. Pick what works for you and click Continue.

Under the Goal Description, give your Goal an appropriate name, such as Contact Us submit. Next, choose a Goal slot ID and the type of Goal that you want to input. In this case, you have a page view that you want to classify, so select the Destination Goal here. Continue to the next section.

Next, you want to connect this Goal directly to the URL for the success page. Select the Equals to option, and fill the field with the corresponding URL segment. Note that you don’t want to put in the full URL! You just need the page path that comes after your domain.

Actually, I usually choose a different type of matching option here. I’ll often choose Regular expressions, because it’s very powerful. We did a video on this as well, if you want to get a little bit more sophisticated with your tracking and cover different cases and matching options, then I’d recommend to check out regular expressions. But for the sake of simplicity, let’s use Equals to for this tutorial since it works well for this purpose.

Testing

To test your new Goal, start by clicking Verify this Goal under your Goal details. For this demo account, it says zero percent conversion rate. This is expected for the tutorial’s demo site since there isn’t much data for it, but if yours is working, you should see some more conversions.

Another way to test your new Goal is in real time on your site. Save this for now.

And then let’s go back to our Real-Time Report and click on the Conversions heading.

Now that you have open, you can go back to your form on a different tab. Try another conversion here by testing your form submission and seeing what happens on your Google Analytics conversion data.

If everything is working, you’ll see your Goal appear in your conversions data. You’ll be able to view that and a full report later on as a Goal conversion.

As you can see, it doesn’t always have to be complicated when it comes to tracking forms and form successes. If you have a success page right after the form is submitted, the user has taken the action that you wanted them to take. Therefore, the action can be converted and you can fire your tag or set up such a Goal conversion inside of the tool.

2. Form Tracking With Form Submit Trigger

Set Up in Google Tag Manager

If your contact form changes appearance and presents a success message without navigating to a new page with a different URL, you’ll need to build something in Google Tag Manager to make this work. One of the methods is to use the built-in form submission trigger to pick up the interaction of submitting the form. 

Create Form Submit Trigger

How does that work? Well, in your Google Tag Manager account, click the Triggers heading and click New to create a new trigger.

This new trigger will be our form trigger, so remember to name it. Next, click in the box and scroll down until you find the configuration type called Submission Trigger. Click on this.

For now, leave all your options unchecked. We can come back to these later. Just to try it out, go ahead and click the Save button.

Set Up Form Variables

We have one more step before testing. Under the heading Variables, click the Configure button. Scroll down until you find all the variables related to forms. Check each of the boxes to activate them.

With those activated, you can move on to preview and debug mode. Click out of the popup to return to the Google Tag Manager page and click the Preview button.

Return to your contact form page. To test your new trigger, fill out and submit the form.

You should see our preview and debug mode down at the bottom of your screen. Pay attention to what happens in your Google Tag Manager box once you click the Send button.

You will probably see there is a submission briefly inside of this box, but it will disappear when you are  redirected to the success page, which makes it hard to inspect.

To get around this, I usually  just open up the submission in a new tab by holding Command (⌘) for Mac or Control (Ctrl) for Windows while clicking on the Send button. This will open up our success page in a new tab, and leave your form tab alone, which is really handy for looking at our form submission tracking in Google Tag Manager. 

Inspect Form Submit Variable Fields

To inspect your trigger tracking, click on the Variables header in your Google Tag Manager box. Here’s where you can find the variables that you just activated. You can inspect them and see how they get filled when you complete an action like submitting the form. This is what Google Tag Manager picks up from the form, and you can use that information to build a trigger and fire a tag. Now, it’s important to remember that this trigger should be unique to this specific form so that your Google Tag Manager form submission doesn’t trigger when another form, like a search form, is filled out.

To demonstrate this, I will use a different field in the sidebar on the same page. I can fill out the field and click the Sign up button and ⌘+click or Ctrl+click to inspect the variables in my Google Tag Manager box.

Now we’ll see two forms submissions here, and we can compare them to each other to make sure that your trigger correctly fires on only the contact form. If you switch between the fourth and the fifth tags in Google Tag Manager (the ones associated with the two form submissions), you’ll notice that one variable changes: the Form ID.

If there’s a Form ID available in your form, Google Tag Manager pick that up and put it into your form variables. You can use these variables to more narrowly define your trigger filter for this particular event. In Google Tag Manager, you can select your form trigger to edit it into a specific trigger that only fires on your contact form.

Now that this form trigger is specifically for your contact form, be sure to rename it to reflect that. Now you can install a filter in these configurations. Click the radio button for Some Forms and  choose the variable that you want to specify. In this case, it would be the Form ID. There are different matching options, which in this case can be either equals or contains. Finally, enter the Form ID variable that is specific to your contact form. This is the part that tells Google Tag Manager to track your contact form and not any other form for this trigger. Remember to save your changes!

Create Tag

Now, if you want to send this over to Google Analytics, you would make this with an event tag because it’s an interaction, not a page view (since there is no new URL). In Google Tag Manager, select the Tags heading and click the New button.

Here, you can build a new tag that will interact with Google Anaytics. Name it appropriately, click in the box to select a tag type, and click on the tag type called Google Analytics – Universal Analytics.

Select Event from the Track Type dropdown, and fill out the category and action fields according to the type of event and the function. In this case, Form Submit and Contact Us are good descriptors. You should definitely fill in the Categories and Action fields, but you can leave the Label and the Value fields free if you like.

Select your Google Analytics settings variable in order to link your tag to your Google Analytics account. Click in the Triggering box to select a trigger, which you already defined earlier.

Simply select the trigger that you configured earlier. No extra edits needed.

This should give you a functioning tag. Don’t forget to save!

Testing

Refresh the page and head into preview and debug mode. It’s a good idea to refresh your shop page, too. To test your new trigger tracking, fill out the form and submit it. If everything is working, you should see your tag appear in your Google Tag Manager box.

You’ll see in Google Analytics that your form submission and your Google Analytics event fired and were recorded. Under the reports heading Real-Time and the subheading Events, you should be able to see the data successfully recorded.

Create Goal in Google Analytics

If you want to create a Goal out of this event in Google Analytics, head over to your admin section, marked by the gear icon. If you created a Goal using the first tracking method, go ahead and click that same one. Otherwise, create a new Goal and name it accordingly.

Since this contact form has an interaction rather than a new URL when successfully submitted, change the type to an Event. Continue to the next section.

Here, you can enter the category. You don’t have to actually fill out every field. Just one completed field will work, but it must model whatever data gets sent over to Google Analytics. So in this case, the descriptors we used earlier in Google Analytics were Form Submit and Contact Us. Therefore, we should copy one of those into the corresponding field, such as Contact Us in the Action field. Save this to have updated configurations. 

If you go back to your form page and submit the form, you should see a new Goal conversion happening on your Google Analytics page under the subheading Conversions. 

So this is the second way to track forms with Google Tag Manager by using the form submit trigger.

Top Tip: Check Validation

Now, you might have seen these options that I’ve skipped over in the trigger section: Wait for Tags and Check Validation. My experience with these checkboxes is that you need to be testing them before implementing them and not just ticking them by default. So if your form now works and your conversion now is tracked, I would recommend trying these out.

If you check the box for Check Validation, you will get more fields. Here, you can use your page path variable or page URL variable to tell Google Tag Manager when it should track this form submission. For example, maybe you don’t want it to pay attention to all pages. If you only want to track this on the “Contact Us” page, you can specify that by selecting Page Path, contains, and the URL segment for your page. This will turn on the Check Validation feature for this form. This means that if a user has entered something wrong, such as an invalid email address, you usually get an error and you don’t want to fire your tags. This function prevents this from happening, but it doesn’t always work for every form depending on how it is built. Therefore, I would test this out with your form rather than turn it on by default. If this solves your problem, keep it checked. If it breaks your trigger and suddenly you don’t get your form submission anymore, then I would turn this off.

Top Tip: Wait for Tags

I also recommend that you test the Wait for Tags option before implementing it rather than check it by default. Wait for Tags is a function that makes sure your event and all your tags have fired before the user gets redirected on to the next page. Usually, I think this is a good option to take. But again, because this won’t work well for all forms, I would thoroughly test this before deploying it. 

3. Form Tracking With Element Visibility Trigger

What is the Element Visibility Trigger?

If your form adds a new element to the page upon submission, then using an element visibility trigger is a good way to track form submissions.

Element visibility triggers fire when a page element becomes visible on a user’s screen, which is helpful when a pageview doesn’t necessarily demonstrate user engagement.

This also can be useful for things like scroll tracking, but in our case we want to use an element visibility trigger to track an element that only becomes visible after a form has been submitted.

Let’s take a look at this in Google Tag Manager. Go to the Triggers heading and click on the New button.

Click in the box to select a trigger configuration. This time, we want to select the Element Visibility trigger. What is this trigger all about?

As its name implies, the element visibility trigger will fire if something is visible on the screen to the user. It does this by inspecting and observing the document object model to see if there are any changes. 

Inspect Your Page with Chrome Developer Tools

To demonstrate this, if I right-click on the success message, I can go into our developer tools by clicking on Inspect. 

This view is in Chrome Developer Tools, and here we can see the representation of the document object model. Here, we can choose one of the elements that is changing during the page load.

We can see that there is a div class called “wpcf7-mail-sent-ok,” which is one of the nodes that gets inserted when a submission has happened successfully. Copy this node.

If I reload the page and we look at that same node here, you’ll notice that this success class looks different. This is because it actually gets changed once we fill out this form. 

If I submit the form and pay attention to this div class, we see that there was a different style appended. There’s also a new class appended to this: “wpcf7-mail-sent-ok.”

Set Up in Google Tag Manager

Create Element Visibility Trigger

To have effective element visibility triggers, you need make sure that your tag fires when the element changes. It really helps to have a bit of CSS knowledge, because we will use it to tell Google Tag Manager which element it should be observing.

If you don’t know CSS, just follow along closely with the tutorial and you should still be able to create the trigger. In the trigger configuration on Google Tag Manager, you are given the option to use either the ID or the CSS selector.

Since the div node we found earlier doesn’t have an ID, you will need to use the CSS selector.

Element Selector

What do you enter into the CSS selector field? This is something we can test in our JavaScript console. To access the console, select the Console header in your developer tool. In the command field at the bottom of the console, type document.querySelector followed by parentheses around a pair of double-quotes.

Between the quotes, you can enter any CSS selector and try this all out. Now, in this case, we had a div node, so we can look for the CSS by typing “div” in the quotes.

Therefore, the whole text in the command field should read document.querySelector(“div”).

To test this, hit the enter key. When you do this, you’ll get the first div that’s on the page. Here, that was the div class hfeed site.

As it turns out, that’s not the div that we wanted to select. We wanted to select the one that changed earlier when we submitted the form: the class wpcf7-mail-sent-ok. 

To select for more specific classes, you’ll have to use dot notation. This time, add a dot and then the class that you want. In this case, your command field should read document.querySelector(“div.wpcf7-mail-sent-ok”).

Press enter, and then hover your mouse over it. The success element on your form page should light up in response when you do, which tells you that you have found the element that you want Google Tag Manager to observe.

So now you have confirmed that this is the right CSS selector to enter into my Google Tag Manager trigger configuration. Copy the whole node div.wpcf7-mail-sent-ok.

When to Fire This Trigger?

The trigger configuration has a few options for trigger frequency. In the case of this particular form, users can fill it out and submit it multiple times without navigating away from the page. Because of this, you should select the option Every time the element appears on screen. 

Visibility

The visibility field asks how much of the element needs to be visible for the trigger to fire. If it’s at the edge of the screen, it’s not visible to the user, but you still want to trigger the tag. 50% is fine in that case.

Observe DOM Changes

You’ll also need to select the Observe DOM changes option. A  little warning box will appear because it can slightly affect site performance, but realistically, it shouldn’t affect too much of the page load time. 

Trigger on All Elements

For the last option, select the All Visibility Events button.

Remember to give your trigger an appropriate name that will make sense when you look at your tags later. Save and refresh the page. 

Create Tag

Go ahead and connect this your predefined event tag from earlier in the tutorial. Click on the tag to edit it and you can simply switch out the trigger.

We can do this down here by clicking the edit button, marked by the pencil icon.

Get rid of the old trigger by clicking the minus-shaped delete button.

Then click in the Triggering box and click the new visibility element trigger to add it to your event tag.

Remember to save on your way out!

Testing

To test your new trigger, refresh Google Tag Manager, refresh your form page, and close the developer tools box.

Fill out and submit your form one more time. Once you’ve submitted it, you’ll see your element visibility tag appear in Google Tag Manager.

And since you have set it up as a Goal, you’ll also see a new conversion inside of Google Analytics.

That’s it! This is the third method of installing form tracking with the help of Google Tag Manager and using the element visibility trigger.

Other Form Tracking Techniques Worth Mentioning

• Form Tracking With AJAX – explained in MeasureMasters

• History Change Listener – explained in MeasureMasters

• Data Layer Pushes – explained in MeasureMasters

Summary

So there you have it! This is how you can track forms with the help of Google Tag Manager and Google Analytics. These are three of the main form of tracking techniques and should cover most use cases.

Have you enjoyed success with a different technique? Would you like to see more content on other tracking techniques? Please leave a comment down below!