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.
Method 1. Separate thank you page
Tracking Form In 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:
Step 1: Create an Event to Track Thank You Page Visits
Sign in to your Google Analytics 4 account and navigate to your GA4 property.
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.
Step 2: Create a Conversion Using the Event
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.
Tracking Form In Universal Analytics 360
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.
Method 2. Submit form trigger in Google Tag Manager
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.
Step 1. Activate form variables
For this purpose, open the Variables menu in GTM, click Configure, and select all variables in the Forms section:
Step 2. Adjust the trigger
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.
Step 3. Check whether the trigger works
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.
Step 4. Create the tag
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.
Step 5. Set up your target in Google Analytics
a. Target set up in Universal 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!
b. Set up event and Conversion In Google Analytics 4
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.
Method 3. Element availability trigger 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.
Method 4. Track forms that use AJAX
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:
<script id="gtm-jq-ajax-listen" type="text/javascript">
(function() {
'use strict'
var $;
var n = 0;
init();
function init(n) {
// Ensure jQuery is available before anything
if (typeof jQuery !== 'undefined') {
// Define our $ shortcut locally
$ = jQuery;
bindToAjax();
// Check for up to 10 seconds
} else if (n < 20) {
n++;
setTimeout(init, 500);
}
}
function bindToAjax() {
$(document).bind('ajaxComplete', function(evt, jqXhr, opts) {
// Create a fake element for magically simple URL parsing
var fullUrl = document.createElement('a');
fullUrl.href = opts.url;
// IE9+ strips the leading slash from a.pathname because who wants to get home on time on Friday anyways
var pathname = fullUrl.pathname[0] === '/' ? fullUrl.pathname : '/' + fullUrl.pathname;
// Manually remove the leading question mark, if there is one
var queryString = fullUrl.search[0] === '?' ? fullUrl.search.slice(1) : fullUrl.search;
// Turn params and headers into objects for easier reference
var queryParameters = objMap(queryString, '&', '=', true);
var headers = objMap(jqXhr.getAllResponseHeaders(), '\n', ':');
// Blindly push to the dataLayer because this fires within GTM
dataLayer.push({
'event': 'ajaxComplete',
'attributes': {
// Return empty strings to prevent accidental inheritance of old data
'type': opts.type || '',
'url': fullUrl.href || '',
'queryParameters': queryParameters,
'pathname': pathname || '',
'hostname': fullUrl.hostname || '',
'protocol': fullUrl.protocol || '',
'fragment': fullUrl.hash || '',
'statusCode': jqXhr.status || '',
'statusText': jqXhr.statusText || '',
'headers': headers,
'timestamp': evt.timeStamp || '',
'contentType': opts.contentType || '',
// Defer to jQuery's handling of the response
'response': (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || '')
}
});
});
}
function objMap(data, delim, spl, decode) {
var obj = {};
// If one of our parameters is missing, return an empty object
if (!data || !delim || !spl) {
return {};
}
var arr = data.split(delim);
var i;
if (arr) {
for (i = 0; i < arr.length; i++) {
// If the decode flag is present, URL decode the set
var item = decode ? decodeURIComponent(arr[i]) : arr[i];
var pair = item.split(spl);
var key = trim_(pair[0]);
var value = trim_(pair[1]);
if (key && value) {
obj[key] = value;
}
}
}
return obj;
}
// Basic .trim() polyfill
function trim_(str) {
if (str) {
return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
}
}
})();
/*
* v0.1.0
* Created by the Google Analytics consultants at http://lunametrics15.staging.wpengine.com
* Written by @notdanwilkerson
* Documentation: http://lunametrics15.staging.wpengine.com/blog/2015/08/27/ajax-event-listener-google-tag-manager/
* Licensed under the Creative Commons 4.0 Attribution Public License
*/
</script>
This code checks whether your form really uses AJAX, then creates the variable and trigger in Google Tag Manager.
Step 1. Create a tag to check how your form works
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.
Step 2. Create a data layer variable
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.
Step 3. Create the trigger
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.
Method 5. DataLayer events as trigger
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.
How much time users spend filling out your forms
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.
FAQ
-
When does the tracking code send an event hit to Google Analytics?
The tracking code sends an event hit to Google Analytics when a user interaction like a button click or form submission occurs. With Google form analytics, events can track form submissions or interactions, providing insights into user behavior. Hits are sent immediately if there's an active internet connection. -
How do I analyze the data collected from form tracking?
Once you've set up form tracking analytics and collected the data in Google Analytics 4, you can use the platform's reporting features to analyze the data. You can create custom reports, set up goals and conversions, and use segments to isolate specific user groups for in-depth analysis. Additionally, by importing data into Google BigQuery and using tools like OWOX BI, you can build advanced reports and gain deeper insights into form performance and user behavior. -
What data can I collect using form tracking analytics?
Form tracking analytics allows you to collect various data points, such as the time users spend filling out the form, the time to complete each field, successful form submissions, unsuccessful attempts, and more. This data provides valuable insights into user behavior and helps identify potential issues with form usability and conversion rate optimization. -
Can I track forms that use AJAX technology?
Yes, you can track forms that use AJAX technology with Google Tag Manager. By implementing a specific script in the guide, you can capture form submission data and use it to trigger events for tracking in Google Analytics 4. -
What is form tracking analytics, and why is it important?
Google Analytics form tracking monitors and analyzes user interactions with online forms on a website. It helps businesses understand how users engage with forms, identify drop-off points, and optimize form design to improve conversions. Custom form tracking submissions are crucial for measuring marketing efficiency and understanding user behavior, leading to better decision-making and improved results. -
Which kinds of hits does Google Analytics track?
Google Analytics tracks a variety of hits to collect data about user interactions on a website. Some of the most common types of hits include:- Pageview Hit: Records page views with the tracking code.
- Event Hit: Tracks specific actions like button clicks or video views.
- Social Interaction Hit: Monitors social actions like likes or shares.
- E-commerce Hit: Gathers e-commerce data, such as product clicks.
- User Timing Hit: Measures durations, like video playtime.
- Exception Hit: Detects site errors or exceptions.
- Screenview Hit: For apps, tracks screen views.
