Table of contents for Google Analytics Form Tracking Tutorial 

1. Introduction to form tracking and different methods to track
2. Method 1: Thank you/destination page
3. Method 2: Google Tag Manager built-in form trigger
4. Method 3: Element visibility
5. Method 4: AJAX call
6. Method 5: Custom data layer events
7. FAQ

In this article, I am going to talk about the different methods of Google Analytics form tracking. 

Introduction to form tracking and different methods to track

Form submission on a website is the most common but important interaction to track in Google Analytics. 

When a user on a website submits a form, it generates a lead for you, either by signing up for a newsletter, registering for an event, or submitting a contact request, etc. 

You can track these activities through events and goals in Google Analytics. 

Form submission tracking depends on how the form is implemented on the website. There are multiple ways to implement the form on the website using a large number of tools and extensions, and hence their tracking methods also differ. 

The following methods will cover different ways to track the form in Google Analytics.

• Method 1: thank you/destination page
• Method 2: Google Tag Manager built-in form trigger
• Method 3: Element visibility
• Method 4: AJAX call
• Method 5: Custom data layer events

Get this 70 page detailed checklist containing screenshots, step-by-step instructions and links to articles

Do you want to set up Google Analytics 4 (GA4) fast and correctly?

Yes I want the ebook

Method 1: Thank you/destination page

If your form on the website redirects to a separate thank-you page after submitting the form, then you can track the visits to this page that will provide you with the number of form submissions. 

You can set up a goal in Google Analytics to track such visits.

Follow the below steps to track form submission by thank you page/destination page

As an example, let’s suppose you want to track a form submission for webinar registration. When the user successfully registers, it redirects the user to https://www.yoursite.com/webinar/registration/thankyou 

Step-1: Navigate to your Google Analytics account and click on ‘Admin’.

Step-2: Now select the Google Analytics property, select the required view and then click on ‘Goal’.

Step-3: Click on ‘New Goal’.

Step-4: Provide a descriptive name for your goal, select the goal type as ‘Destination’ and then click on ‘Continue’.

Step-5: Under the destination select the operator as ‘Equals to’ and then add the page path (not full URL) under the input text box. Value and funnel are optional. Now click on ‘Save’.

You can learn more about Google Analytics goals here: How to set up goals in Google Analytics). 

That’s it, you are done. Wait for a couple of days and visit the page again and it will show you how many time the form submission happened.

You can also check this in reporting menu under Conversions > Goals > Goal URL.

Get this 70 page detailed checklist containing screenshots, step-by-step instructions and links to articles

Do you want to set up Google Analytics 4 (GA4) fast and correctly?

Yes I want the ebook

Method 2: Google Tag Manager built-in form trigger

If the forms on the web page are properly implemented to send data after the submit button, you can use the Google Tag Manager’s built-in form trigger to track the form. 

Google Tag Manager has built-in triggers which we can use to track events on the website. One of them is ‘Form Submit’ that sends data to the data layer and we can capture the successful form submission. 

Follow below steps to set up form tracking using the built-in form event of Google Tag Manager:

Step-1: Navigate to your Google Tag Manager account and click on ‘Variables’.

Step-2: Click on the ‘Configure’ button under ‘Built-in Variables’.

Step-3: Now activate all the form variables by clicking on the check box.

Step-4: Now let’s create a trigger for this form. Click on ‘Triggers’.

Step-5: Click on ‘New’.

Step-6: Give a descriptive name to your trigger and click on ‘Trigger Configuration’.

Step-7: Now select ‘Form Submission’ as a trigger type.

Step-8: Now you will get the option to select the following checkboxes

1. Wait for Tags: If you check this, the tag will fire only when all the tags associated with this trigger are fired or the time you specify.
2. Check Validation: If you check this, the trigger will fire only if the form has successfully been submitted. If not selected the trigger will fire even if the user submits the incomplete form. It is best recommended to select this option.

Step-9: Now navigate to your website where the form is available and right-click on the form, then select ‘Inspect’.

Step-10: Now identify the form’s ID and copy it.

Step-11: Navigate back to GTM trigger configuration, select ‘Form ID’ from the drop-down under conditions, then select the operator as ‘Equals’. In the input box paste the form ID that we copied in the earlier step.

Save the trigger configuration.

Step-12: Now navigate to ‘Tags’ in the GTM console and click on ‘New’.

Step-13: Now create a new Google Analytics: Universal Analytics tag with the following configuration:

• Tag Name: Create Account Form Submit
• Tag Type: Google Analytics: Universal Analytics
• Track Type: Event
• Category: Form Submit
• Action: Create New Account
• Label: Page URL (Built-inbuilt-in Variable)

Step-14: Now assign the trigger we created earlier to this tag and your configuration should look like below:

Step-15: Now enable the preview mode and validate if the tag is firing correctly or not. 

Find out more about the debugging process: GTM (Google Tag Manager) Debugger Console Tutorial

Step-16: Now, when you submit the form, you should be able to see the ‘Form Submit’ event in the summary tab and the tag that we created is fired.

Congratulations! You have successfully set up form tracking using a built-in form trigger in Google Tag Manager. Now publish the changes.

My Step-By-Step Blueprint (100 Pages) For Learning and Mastering Google Tag Manager

Get the FREE ebook on Google Tag Manager (100 pages). Learn & Master GTM

Yes I want the FREE ebook

Method 3: Element visibility

The third method to track form submission is by using element visibility. Suppose you have a form on the website and when a user submits the forms it pop-ups a message like below.

In such a case you can use the element visibility trigger to track the form submission. 

Follow the below steps to know more:

Step-1: Navigate to Google Tag Manager account and click on ‘Variables’.

Step-2: Click on the ‘Configure’ button under ‘Built-in Variables’.

Step-3: Now activate all the visibility variables by clicking on the check box.

Step-4: Now let’s create a trigger for this form. Click on ‘Triggers’.

Step-5: Click on ‘New’.

Step-6: Give a descriptive name to your trigger and click on ‘Trigger Configuration’.

Step-7: Now select ‘Element Visibility’ as a trigger type.

Step-8: Now you will get the option to select the following selection method

3. CSS Selector: CSS selector of an element that gets visible after form submission.
4. Element ID: Element ID of an element that gets visible after form submission.

As an example, I am going to select the ID parameter.

Step-9: Now navigate to your website where the form is available and right-click on the form then select ‘Inspect’.

Step-10: Now identify the ID of the element which pops up after form submission and copy it.

Step-11: Navigate back to GTM in trigger configuration, enter the element’s ID that we copied, then select the condition ‘Once per page’.

Step-12: Now under ‘Advanced settings’, type the percentage of visibility to fire the trigger. In general, you can fire the trigger at 50% of element visibility. Mark the checkbox ‘Observe DOM Changes’ to track matching elements that appear as the DOM changes.

Step-13: Now save the trigger and add a form submission tag to it. Once done launch the preview mode and check if your tag is firing or not.

If you see the element visibility event under the summary tab and your is tag firing, you have successfully set the element visibility trigger.

Method 4: AJAX Call

If your website uses AJAX technology for forms, then when the user clicks on the submit button, the data is directly transferred from the browser to the server without reloading the page.

In such cases, you need to track the form submission using an AJAX call listener that will fire an event in the data layer after successful submission.

To track AJAX calls in a data layer you need to use a custom script that will fire on every page and will check for AJAX calls. Based on the data layer event you can then create an analytics tag for form submission.

Follow the below steps to know more.

Step-1: Navigate to GTM console and under ‘Tags’ click on ‘New’.

Step-2: Now give your tag a name as ‘AJAX call listener’ and click on tag configuration

Step-3: Now under ‘Tag Type’, select ‘Custom HTML’.

Step-4: Now you need to pass the below script code in the code window so that GTM can listen to AJAX calls and send an event in the data layer as ‘ajaxComplete’.

Note: This script is provided by 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> 

Step-5: Now add a trigger ‘All Pages’ to this tag and click on ‘Save’. Your tag will look like below.

Step-6: Now launch the preview of GTM container and navigate to the page on your website where the form is available. Complete the form and check in preview mode if you see the ‘ajaxComplete’ event like below that means you have successfully set the AJAX event listener.

Step-7: Now since our ajax listener is working as expected and firing an event in the data layer as ‘ajaxComplete’ you can create a data layer variable that will contain the response from the script on this event. 

If the response attribute contains ‘The message has been successfully sent. Thank you’, you can use this variable as a condition in the trigger to fire the event.

Step-8: Now let’s create a data layer variable to capture the AJAX call response with the following configuration:

• Variable Name: ajaxresponce
• Variable Type: Data Layer Variable
• Data Layer Variable Name: attributes.response

If you check in preview mode it will look similar to this:

Step-9: Now let’s create a trigger that will fire the form submission tag if the custom event is equal to ‘ajaxComplete’ and the data layer variable ‘ajaxresponce’ contains ‘The message has been successfully sent. Thank you’. 

• Trigger Name: Form Submission on Ajax
• Trigger Type: Custom Event
• Event Name: ajaxComplete
• This Trigger Fires on Some Custom Events
• Conditions: If ‘ajaxresponce’ contains ‘The message has been successfully sent. Thank you’

That’s it, you are done. Now create a form submission tag like we create earlier and map it to this trigger and test it in the preview mode.

Once you validate it, you can publish the changes.

Congratulations! You have successfully tracked the AJAX form in Google Analytics.

My Step-By-Step Blueprint (100+ Pages) For Learning and Mastering GTM Data Layers

Get The Only Ebook On GTM Data Layer Ever Published (100+ pages). Learn & Master Data Layers

Yes I want the ebook

My Step-By-Step Blueprint For Learning Google Analytics 4 BigQuery

Get the only ebook on GA4 BigQuery ever published (83 Pages)

Download the FREE ebook

Method 5: Custom data layer events

If your form does not meet any of the above solutions, you can still track the form submission using custom events via the data layer. 

You can use the ‘dataLayer.push’ command to send events in GTM and then fire tags based on it.

This is the very best solution to form tracking but requires dev knowledge. What you can do is you can ask your developer to fire the below code when the user submits the form successfully.

 dataLayer.push({
 'event':'Form_Submission',  
 }) 

Once your developer has updated the code to fire on successful submission you can create a trigger in GTM which will fire the tag on successful submission of the form.

• Trigger Name: Form Submission
• Trigger Type: Custom Event
• Event Name: Form_Submission

Now you just need to create a form submission tag and map it to this trigger.

That is how you can track form submission using different methods.

Frequently asked questions about Google Analytics form tracking tutorial