How to set up form tracking analytics with Google Tag Manager and Google Analytics 4

The conversion rate is one of the simplest and, at the same time most important measures of marketing efficiency. It shows how many users have completed a target action: made a purchase, sign up for emails, requested a demo call, etc. 

For recording and analyzing e-commerce sales, we have Google Analytics 4, which is relatively easy to configure. More effort is required, however, to track forms submitted on a site. 

That’s because forms happen to be of different types and use different technologies for sending data to the server. After data is successfully sent, some form fields are updated. Others show a pop-up window. A third type redirects the user to a thank you page. The method of Google Analytics 4 form tracking depends on the technology that is used. 

In this article, we tell you how to collect form data in different ways and transfer it to Google Analytics 4.

If you have a separate thank you page for the form submission, you can create events and conversions directly in GA4 without GTM. Setting up a thank you page conversion in Google Analytics 4 (GA4) involves creating an event to track the google forms analytics and the user's action of reaching the thank you page and then using that GA4 form submission event to define a conversion. 

Here's how you can do it:

1. Sign in to your Google Analytics 4 account and navigate to your GA4 property.

2. Open the admin panel. Under property, click on "Events."

3. Click on the "Create event" button.

Event Configuration:

• Event name: Give a descriptive name for your event, such as "Thank You Page Visit."

• Event parameters: Add conditions to trigger the thank you page 

​Simple Example:

Condition 1: Give parameter as event_name, operator as equals, and condition as page_view

Condition 2: Give parameter as page_location, operator as contains, and condition as thank-you/thank_you or a unique part of it. For example, if your thank you, page URL is "example.com/thank-you"

• Click "Save" to create the event.

1. Go to the "Conversions" section next to "Event"

2. Click on the "Create conversion" button.

Conversion Configuration:

• Conversion Name: Provide a descriptive name for your conversion, such as "Thank You Page Conversion."

• Set the "Event" option to "Use a custom event."

• Choose the event you created earlier from the drop-down menu (e.g., "Thank You Page Visit").

• You can set a conversion value if applicable. For example, if your thank you page represents a completed purchase, you can set the conversion value as the purchase amount.

• Select the relevant attribution model and conversion window based on your tracking requirements.

• Click "Save" to create the conversion.

Please note that data might take some time to populate in your reports. Once everything is set up and data is collected, you can track the thank you page visits as conversions in your GA4 reports.

You might be wondering, how to track form submissions in Google Analytics 360? the easiest method to track form submissions in google analytics is to track visits to a separate page with the different URLs where the user is redirected after completing the form. It’s enough for you to create a target with the type “Landing Page” in Google Universal Analytics 360. 

Let’s say you want to track registrations for a webinar. The thank you page after successfully registering looks like this: 

https://www.site.com/registration/thankyou

In the Admin panel, in View Settings, under Targets, click Target, then click Custom. Specify the target name, select the target type, and enter the address of the thank you page:

What’s important to consider: The URL of your thank you page should be unique – that is, there should be only one page on the site with such an address, and users should not be able to get to this page without filling out the form. Otherwise, Google Analytics 4 can record inaccurate data about the achievement of your goal.

If your developers correctly configured data transmission from a form through the submit button, then you can use the built-in Google Tag Manager trigger for tracking form submissions with Google Analytics 4. Judging by comments on the Internet, this situation is encountered infrequently, but it’s worth trying.

Using this method, when a user fills in and sends a form, the trigger sends a gtm.formSubmit event to the dataLayer array.

Note: Before you go to settings, make sure the Page View tag is enabled in Google Tag Manager for all pages on the site.

For this purpose, open the Variables menu in GTM, click Configure, and select all variables in the Forms section:

You need a form ID or form class attribute to create a trigger. You can see them in the HTML code by right-clicking your form and clicking Explore Item in Firefox or View Code in Chrome:

In our example, the form ID is send-request-form, which we will use when configuring the trigger. 

Go to the Triggers menu, click New, open Trigger Settings, and select Form Submission:

In the window that opens, you’ll see two checkboxes:

• Wait for tags – If you enable this option, the form will not be sent until all tags associated with it are activated or the time you specify expires.

• Check validation – It’s best to enable this option. Otherwise, the trigger will fire even when the user hasn’t filled in the required fields.

After you activate error checking, additional settings appear. If you enable the trigger, specify the URL of the page that contains your form. If you activate the trigger, specify the form ID that we mentioned above:

Come up with a convenient and understandable name for the trigger, such as Submitting a Request, and saving it.

Before publishing changes in a container, use the preview mode in Google Tag Manager. Open the page with the form, fill it out, and hit send. In the debugging console, a gtm.formSubmit event should appear.

If this event doesn’t appear, then this method of tracking won’t work for you. In that case, try one of the other methods described in this article. 

If the event does appear, it’s still necessary to carry out one more test to check whether the trigger works correctly. Open a form, leave some obligatory field blank, and submit the form. If a gtm.formSubmit event appears in the debugging console again, then the built-in trigger works incorrectly and won’t help you. If the event wasn’t transferred, that’s great! Move to the next steps.

Now you need to create a tag that will send information to Google Analytics 4 that the form has been sent. To do this, go to the Tags menu, click New, open Tag Configuration, and select Google Analytics – Universal Analytics / Google Analytics 4.

For clarity, you can name the tag the same as the trigger. Next, fill in the following fields for the GA UA tag:

• Tag Type – select {{Google Analytics Settings}}

• Track Type – select “Event”

• Category – the same as the tag and trigger for convenience

• Action – Sending

• Label – for example, {{Form ID}})

• Non-Interaction – leave “False”

If you want to activate the tag, select the trigger you created in Step 3 and click Save:

Fill in the following fields for the GA4 tag:

• Measurement ID - add your Measurement ID of the GA4 property. It can be a variable or numbers

• Event Name – add the name of the event

• Event parameters – additionally you can add parameters that will be sent with an event to GA4, for example, {{Form ID}})

It’s ready! You can check how the generated tag works when submitting a form using the Google Tag Manager preview mode or using the real-time Events report in Google Analytics.

Once you publish the container with changes, you need to set up the target in Google Analytics 4 to consider submitting forms as conversions. To do this, add a new goal of your own in the Google Analytics 4 view settings. Select the Event type and fill in the Category, Action, and Shortcut fields just as you did when you configured the tag in Google Tag Manager:

Save the target. Done. You’ve set up tracking form submissions with Google Analytics 4 without changing any code on your site!

Once you publish the container with changes, you need to set up the target in Google Analytics 4 to consider submitting forms as conversions. Add a conversion in the Google Analytics 4 property settings to do this. Enter the "New Event Name" which is the tag name you have just created in Google Tag Manager.

If a window pops up on the site with a thank you or a message about successful submission after sending a form, you can try another built-in GTM trigger. It fires when a particular item appears on the screen (in our case, a pop-up window) and dispatches a gtm.elementVisibility event to the dataLayer.

To configure this trigger, you must know the CSS selector of the monitored item. To find this selector, right-click the window and select View Code. You’re looking for the following line:

To copy the CSS selector, right-click the line and select Copy – Copy selector:

In our example, the selector looks like this: #webinar_marketing_automation > div.

Then create a new trigger by selecting the Element Visibility type:

Fill out the following fields:

• Trigger name – for example, “Get webinar recording”

• Selection Method – CSS Selector

• Element Selector – Insert the value you copied from the HTML code of the pop-up window.

• Trigger rule – If you have one form on the page, leave the option “Once per page.” If there are multiple forms and one message pops up, you can select “Once per element.”

• Then check the box “Register DOM changes.”

• Trigger Activation Conditions – By selecting “Some Visibility Events,” you can specify the page where the pop-up message or text appears.

• Save the trigger.

After you create the Element Availability trigger, you must adjust the same settings as described in detail in Method 2:

• Add a new tag to GTM that will send form submission data to Google Analytics 4 and attach the created trigger to it.
• Preview how the tag works when the form is submitted.
• In Google Analytics 4, set the Event target to track conversions.

If forms on your website use AJAX technology, then data is transferred from the browser to the server in the background and the page doesn’t reload. To configure tracking of AJAX forms submitting, you can use this script from LunaMetrics:

This code checks whether your form really uses AJAX, then creates the variable and trigger in Google Tag Manager.

In Google Tag Manager, open Tags, click New, click Tag Configuration, then select Custom HTML. Copy the code above and paste it into the text box. Specify all pages as triggers:

Then turn on the GTM preview, open the form page, complete the form, and submit it.

If in the debugging console an ajaxComplete event appears (as in the screenshot above), then your form uses AJAX and this method of tracking suits you. In that case, read further.

If you click the ajaxComplete event in the preview console and then open the Data Layer tab, you’ll see what information is passed to the data tier array after the form is submitted. 

We’re interested in the response line in this code; it contains text saying that the form was successfully submitted:

This line can be used for creating the variable and trigger in Google Tag Manager. Open the Variables section in GTM, click Create, and on the Variable Configuration screen, select Data Layer Variable. In the Data Layer Variable Name field, write attributes.response (it’s possible to name two variables the same thing) and save the settings.

Why enter attributes.response instead of response? Because attributes is an object that contains the response key and its value. By doing so, we point GTM to the exact path to the data that interests us.

After creating a variable, it’s necessary to check it. For this purpose, submit a form in preview mode. Click on the ajaxComplete event and open the Variables tab in Google Tag Manager. If you see the attributes.response variable and the text about successfully sending the form, it means you’ve configured everything correctly.

In the Trigger Configuration section, click Create, then Trigger Configuration and select the User event type. Specify ajaxComplete in the Event Name field. 

Then as the condition for activating the trigger, select Some Custom Events and register a condition: the attributes.response variable contains {enter your custom text about successfully sending the form}.

After that, what remains is:

• Adding a new Event tracking tag to GTM that will send form submission information to Google Analytics 4 and attach the created trigger to it.
• Using Preview mode to check how the tag works when submitting a form.
• Setting the Event target to track conversions in Google Analytics 4.

We’ve described these settings in detail above in the section Method 2. Send form trigger in Google Tag Manager.

Tracking form submissions with Google Analytics 4 using the dataLayer .push method is, in our view, the most reliable and versatile solution. The only drawback is that if you don’t understand the code, you’ll need the help of developers. 

First, you need to prepare technical specifications for developers

Make a list of the settings you want to transfer in the dataLayer after the form is successfully submitted. Ask your developers to add this code to all pages with forms you want to monitor:

dataLayer.push({

'event':'Forms',
'variable': 'value'    
}) 

Where:

• An event is the name of an event. You can replace it with any event that’s convenient for you.

• The variable is a set of all variables you want to transfer together with an event.

After your developers configured the dataLayer.push method for all forms, you can check how it works. For this purpose, include a preview in Google Tag Manager and fill out the form on your website. In the debugging console, there should be a new event (in our example, it’s called OWOX). 

When clicking on an event and going to the dataLayer tab, you’ll see all parameters that are transferred to the data array:

In the example of our event in the screenshot above (downloading a PDF file from the blog), we consider how to configure tracking with GTM for GA UA and GA4.

Settings for GA UA: 

First, create all required user variables: eventCategory, eventAction, eventLabel, etc. 

Then select the Variable Type in the User-Defined Variables section and enter a variable name in braces: {{eventCategory}}:

Next, create a trigger of the type Custom Event. In the settings, specify the event name and set the trigger to fire on All Custom Events:

Then create a tag that will forward events to Google Analytics Universal. Set the tag type as Google Analytics – Universal Analytics, and set the tracking type as Event. 

Further, fill in these fields:

• Category – {{eventCategory}}

• Action – {{eventAction}}

• Label – {{eventLabel}}

Next, select a variable {{Google Analytics settings}} and the trigger you created in the previous step:

Everything is ready. All that remains is to check whether the tag works in GTM preview mode and in real-time Google Analytics Universal reports.

Settings for GA4

Create a trigger of the type Custom Event. In the settings, specify the event name and set the trigger to fire on All Custom Events:

Then create a tag that will forward events to Google Analytics 4. Set the tag type as Google Analytics – GA4 Event. 

Further, fill in these fields:

• Measurement ID - add your Measurement ID of the GA4 property. It can be a variable or a number

• Event Name – add the name of the event

• Event parameters – additionally you can add parameters that will be sent with the event to GA4 from the dataLayer, if you implemented them with the event, for example, {{Form ID}})

Everything is ready. All that remains is to check whether the tag works in GTM preview mode and in real-time Google Analytics 4 reports.

Now that you can find out how many users have successfully completed the form, it will be helpful to find out what problems have been encountered by those who haven’t completed it.

Your developers need to add to the dataLayer the names and values of all parameters required for form analytics. 

This will help you track: 

• Time from page opening to field activation
• Time from field activation to field deactivation
• Time from activation of the first field to first submission of the form
• Time from activation of the first field to successful submission of the form
• Time from activation of the first field to failed form submission
• Time to get a response from the server about successfully submitting a form
• Time to get a response from the server about unsuccessfully submitting a form
• Time from form activation to when a user leaves the form (without successfully submitting it)

Once you’ve set up collection of this data in Google Analytics, you’ll be able to import that data into Google BigQuery – for example, using OWOX BI. Then you can build any form analytics reports in Google Sheets using the free OWOX BI BigQuery Reports Add-on. 

These repors will help you find and fix problems in the usability of your forms and thus increase your conversion rate. 

Here are some examples of such reports and the questions they can answer:

1. When interacting with which form fields do users most often encounter an error?

2. How long do users spend filling out the form?

3. How much time do users spend filling out the form and what does it depend on?

P.S. If you need help setting up form analytics and creating a custom metrics system for your business, email us at contact@owox.com or fill out the form here.