Form Tracking with Google Tag Manager & GA4

Last Modified on January 7, 2025

Having form tracking set up on all your website forms is an absolute must. And Google Analytics 4 and Google Tag Manager make 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.

We added one that is completely automatic as a bonus. Despite being the easiest to do, we’ll explain why it may not be the best solution.

Here is an overview of what we’ll cover:

• What Should You Track?
• How to Track Form Submissions
• Which Technique Should You Use?
• Tracking Form Submits with a URL Success Page
• Testing
• Form Tracking with a Form Submit Trigger
• Form Tracking with an Element Visibility Trigger
• Other Form Tracking Techniques
• FAQ

🚨 Note: In this post, we’ll demonstrate the repetitive process of creating a new tag or trigger once in the first example. Afterward, we’ll show how to set up other form-tracking methods without these detailed explanations. For tags, triggers, and conversions, refer to this section. To test your setup, refer to this section.

What Should You Track?

Here are the things you can track in 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
• Form Tracking with Contact Form 7
• How to Prefill Forms with GTM

How to Track Form Submissions

You can track form submissions using any of the following three methods:

1. Unique URL Trigger
2. Form Submit Trigger
3. Element Visibility Trigger

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

If you are flexible, you can learn about the capabilities of each. 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 I show in my tutorials won’t work for your specific form, so it helps if you stay flexible and know about these different tracking techniques.

In this post, I’ll show you different form tracking techniques, one that doesn’t include GTM and three others with GTM that I use the most often.

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 GA4 open in three separate tabs. In our demo shop, we have several different contact forms.

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

This will help you determine what successful outcome we should use as our form trigger and which technique to use. There are three that we will focus on in this tutorial: a URL success page, a form submit trigger, and an element visibility trigger.

Before we start, 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: 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 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 page view to track. In this case, you should use the second method in this tutorial: Form Tracking with a Form Submit Trigger.

For the third possible contact form, we can see a success message 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. You can’t track success based on the URL, but you might be able to use the Google Tag Manager forms submission from the second method.

This is especially handy if you already have this form trigger set up.

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: Form Tracking with an Element Visibility Trigger.

So, let’s dive in!

Method #1: Tracking Form Submits with a URL Success Page

If you’ve got Google Analytics deployed, you can quickly get some data for the success page in your GA4 account in two ways.

Either use the DebugView or head to the Realtime report (especially useful if DebugView is delayed or not showing any data).

For the DebugView, click on the incoming Pageview event and then click the page_location parameter to see the page URL.

In the Realtime report, you can check the page title that appears in the Views by Page title and screen name card and check when the success page title appears there (It may take just a few seconds before it shows up in the list).

In the same report, you can also look at the Event count by Event name card. In the card, click page_view, then page_location (you may have to click on the succeeding page navigation to show more parameters).

Then, hover over the list of URLs to find the right one.

From here, you can classify this as a Google Analytics 4 Conversion Tracking (i.e., Goals in UA) so that every time somebody goes to this page, there will be a conversion within Google Analytics.

Create a Conversion in Google Analytics

We will cover two simple methods to track Pageviews conversions in GA4: one using the GA4 interface and the other with Google Tag Manager.

Which one should you go for?

In simple terms, if you’re already using GTM for most of your setup, it’s likely better to stick with it. Keeping everything in one place makes it easier to stay organized and keep an eye on your tracking setups.

Pageview Conversions with Tag Manager 

In the left navigation, click Tags, then click New.

Then, click Tag Configuration → Google Analytics → Google Analytic: GA4 Event. Model our example with your data. We used a constant variable for the Measurement ID, but you can also paste your GA4 Measurement ID.

The Event name is page_view_thankyou. Click Save.

Now, set up a trigger to decide when the tag should fire. To create a tag, click the Triggering section under the Tag Configuration section.

In Choose a trigger, click the plus sign +.

Click the Trigger Configuration section and select Page View.

Select Some Page Views. You can model our trigger below:

We use the following condition: Page URL contains https://demoshop.measure.school/contact-us/thank-you-page/

Click Save. After testing (refer to the Testing section in this post), publish your container.

Pageview Conversion in GA4 Interface

In GA4, click Admin → Data display → Events. Then, click the Create event button.

You’ll have to click the Create button.

You can now configure your event. Here is an example of how you can track your thank-you page as a conversion.

In the Configuration section, enter your new event name in the Custom event name field. Feel free to choose any name, but make it descriptive and adhere to GA4 event naming conventions.

Avoid using generic names like page_view since you’re already tracking pageviews in your system. Also, page_view is a reserved name by Analytics. You’ll see a dropdown list of such events as you click on the field.

Therefore, instead of page_view, consider using something more specific like page_view_thankyou (please use a better name).

For Matching conditions, you may wonder why you need to write another event name since we already created one or why use this as a parameter.

The Matching conditions set the conditions for when you want your custom event to happen. Also, you need to use other events and parameters that already exist to create your event.

So you’ll have to tell Analytics what needs to match for your event to be registered.

For the first parameter:

• type or select event_name
• select equals as the Operator
• type page_view for the value (because this is the existing event name we’re deriving for our custom event)

For the second parameter:

• type or select the existing parameter page_location
• select contains as the Operator
• copy your thank-you page URL in the value field. Ours is https://demoshop.measure.school/contact-us/thank-you-page/

Click Create.

🚨 Note: Your event is now created but must be marked as conversion. Once your event is created, you can either wait for 24 hours to see it in your list of events and mark it as a conversion, or you can start using it as a conversion right away.

To instruct Analytics to mark your event as a conversion, go to Admin → Data display → Conversions.

Click the New Conversion Event button.

In the New Event Name field, enter the name you used for the event you created in the previous steps. Click Save.

Your event is now marked as a conversion and will show in your list of Conversion Events.

Testing

To test your event, fill out and submit your form. Afterward, confirm that your tag works correctly in both GTM and GA4.

In GTM, click the Tags header to check if your tag was fired. Select the event associated with your tag in the left Debug panel. If the tag didn’t fire, investigate why your setup isn’t working.

Now that we know everything is working in GTM, we must ensure that GA4 receives the data.

Check the DebugView in your GA4 account and look for your event. You’ll know it’s a conversion if the green flag icon is attached to your event. You can also look at your Realtime report, as we’ve shown earlier.

Alternatively, look at the Realtime report if you experience issues in DebugView.

Method #2: Form Tracking with a 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

Follow the same steps to create a trigger, as shown in the Pageview Conversions with Tag Manager section of this post. Then, follow this configuration:

Set Up Form Variables

Before testing and previewing your changes, make sure to enable your Form variables so they can capture form interaction data.

Click Variables in the left navigation panel, click Configure at the top right corner, and activate your form variables:

Enable the preview and debug mode and test your form.

🚨 Note: When you’re about to submit your form, I suggest you use these shortcuts, either by holding Command (⌘) for Mac or Control (Ctrl) for Windows while clicking the Send button. This opens the success page in a new tab, leaving your form tab untouched, making it convenient for inspecting form submission tracking in Google Tag Manager.

Inspect Form Submit Variable Fields

To inspect your trigger tracking, click 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 GTM form submission doesn’t trigger when another form, like a search form, is filled out.

To demonstrate, test a different form and observe unique form variable values.

A best practice is to use a Form ID. If a Form ID is available, Google Tag Manager picks it up and includes it in form variables. In our example, it is gform_7.

Use these variables to refine your trigger for this event. In Google Tag Manager, edit the form trigger to fire on your contact form.

Here’s an example of a trigger.

Now, you can test your configuration and create your goal as we did in the Test and Create a Conversion section.

Top Tip: Wait for Tags and Check Validation

You might have seen these options that I’ve skipped in the trigger section: Wait for Tags and Check Validation.

My experience with these checkboxes is that you need to test them before implementing them and not just tick them by default. So, if your form now works and your conversion is tracked, I recommend trying these out.

1. Check Validation:

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 to pay attention to all the 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, so 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 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, I would turn this off.

2. Wait for Tags:

I recommend you test the Wait for Tags option before implementing it rather than check it by default. Wait for Tags is a function that ensures your event and all your tags have been fired before the user gets redirected 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.

Method #3: Form Tracking with an 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 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 look at this in Google Tag Manager and create a new trigger as in previous sections here.

Select Element visibility.

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 (DOM) to see if there are any changes.

Inspect Your Page with Chrome Developer Tools

Right-click on the success message of your form, and go into our developer tools by clicking on Inspect.

What you see is the representation of the DOM. 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.

🚨 Note: The class in this node will change if you reload your page. That is because the wpcf7-mail-sent-ok only appears when a form is filled and submitted. Therefore, pay attention to what you copy.

Set Up in Google Tag Manager

Create Element Visibility Trigger

An effective element visibility trigger needs a tag that fires when the element changes. It helps to have CSS knowledge because we will use it to tell GTM which element to observe.

If you don’t know CSS, follow along closely, 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 out. Now, in this case, we have 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. 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.

Use the dot notation to select a specific class. This time, add a dot and then the class that you want. 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 GTM to observe.

You have confirmed that this is the correct CSS selector to enter into your GTM trigger configuration. Copy the whole node div.wpcf7-mail-sent-ok.

When to Fire This Trigger

There are a few options for trigger frequency. For 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 the 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.

🚨 Note: Check out our handy guide and learn to track page load time with GA4.

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.

Testing

To test your new trigger, refresh Google Tag Manager, refresh your form page, and close the developer tools box. Then, follow the testing steps shown in the Testing section.

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. That’s it!

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 main forms of tracking techniques and should cover most use cases.

If you want to pull more contextual data from user actions that you’re tracking in GTM, that’s where the relative click variable comes in handy.

Form tracking is also available in GA4. You can learn more about it in our handy guide on automatic form tracking in GA4.

Are you using ninja forms for your website? Learn how to track ninja forms with GA4 and GTM!

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!

FAQ