MeasureSchool logo
Search
Close this search box.
Search
Close this search box.

Form Tracking with Google Tag Manager & GA4

Last Modified on February 7, 2024

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.

GTM For Beginners

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

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:

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

Filling out the form for testing

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

Thank you page URL

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.

Thank you page with the same URL

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.

No change on the page after form submission

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!

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.

Thank you page URL in DebugView

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.

Thank you page data in GA4 realtime report

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.

Creating a new tag in Tag Manager

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.

GA4 event tag in GTM

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.

Triggering section in GTM

In Choose a trigger, click the plus sign +.

Choosing a new trigger

Click the Trigger Configuration section and select Page View.

Selecting Page View trigger type

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

GTM pageview conversion trigger

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.

Steps to create an event in GA4

You’ll have to click the Create button.

Clicking the Create button for a new event

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

Thank you page conversion event in the GA4 interface

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.

Custom event configuration in GA4 interface

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

New conversion event name

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

Event marked as conversion in 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.

Tag fired in GTM

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.

Conversion event confirmation

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

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:

Form submission trigger type in GTM

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:

Activating form variables in GTM

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.

Opening a new tab when clicking submit

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.

Form variables in the variables preview mode header

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.

Form ID variable in GTM

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.

Trigger configuration with the form ID

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.

Check validation form submission trigger

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.

Wait for tag in the trigger configuration

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.

Selecting element visibility trigger type

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.

Inspecting form success message in Chrome developer tools

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.

Div class in Chrome browser developer tools

🚨 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”).

Testing the div selector

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.

The wrong div class selected in the JavaScript console

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.

Success element selected in the JavaScript console

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.

Element visibility trigger configuration with CSS class

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.

Every time an element appears on the screen option

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.

All elements and trigger name

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

FAQ

How can you track form submissions using a URL success page?

If your form leads to a success page with a unique URL, you can track form submissions using ordinary pageviews on Google Analytics.
You can create a Conversion in GA4 and set it to trigger whenever someone reaches the success page URL. The other option is to track it automatically using the Form interactions in Enhanced Measurement.

Can you track form submissions with Google Analytics without using Google Tag Manager?

Yes. If you already have Google Analytics deployed, you can track form submissions directly through Google Analytics by creating Conversions or enabling the Form interactions feature in Enhanced Measurement.
However, using Google Tag Manager provides more flexibility and control over tracking and allows for additional customization options.

How can you test the form tracking techniques?

To test the form tracking techniques, you need to fill out and submit the form on your website.
Depending on the outcome (success page with a unique URL, success message without URL change, or visible confirmation message), you can determine which technique to use for tracking form submissions.

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.

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!

MeasureMasters

REOPENED!

Master Data & Analytics with MeasureMasters

Exclusive Courses & Workshops | Ongoing Troubleshooting | Support Resources, Tools & much more

Related Posts