Google Analytics Form Tracking Tutorial

Table of contents for Google Analytics Form Tracking Tutorial 

  1. #ntroduction 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 the E-Book (50 Pages)
 
Get the FREE E-Book (50+ Pages)

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

Google Analytics Form Tracking

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.

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.

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

  1. CSS Selector: CSS selector of an element that gets visible after form submission.
  2. 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.

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

What is the best method to track form in Google Analytics?

There is no one unique solution to track forms in Google Analytics. The tracking method will completely depend upon how the forms are implemented on the website.
In general, based on different form types, the following methods are widely used:
Method 1: Thank you/destination page
Method 2: Google Tag Manager built-in form event
Method 3: Element visibility
Method 4: Ajax call
Method 5: Custom data layer events

Can I track the information submitted by users while filling out a form in Google Analytics?

Other than PII data (personally identifiable information like name, address, email address, contact number, etc), you can track the rest of the information and send it to Google Analytics. As per Google Analytics policies you cannot track any user’s PII data.

What does AJAX mean?

AJAX stands for Asynchronous JavaScript And XML, AJAX is not a programming language or a tool but it is a concept that uses the client-side script to send data from the browser to the server. 

For example, when a user submits the form, you can use an AJAX call to send the form field information to your CRM server.

What is a data layer?

A data layer is a JavaScript object (an array with multiple variables and values) that is used to pass information from your website to your Google Tag Manager container. The data layer corresponds to the data structure and database. The data layer should contain all the data you want to send to various analytics and/or marketing tags. 

To learn more about the data layer visit Google Tag Manager Data Layer Tutorial with Examples 

Register for the FREE TRAINING...

"How to use Digital Analytics to generate floods of new Sales and Customers without spending years figuring everything out on your own."



Here’s what we’re going to cover in this training…

#1 Why digital analytics is the key to online business success.

​#2 The number 1 reason why most marketers are not able to scale their advertising and maximize sales.

#3 Why Google and Facebook ads don’t work for most businesses & how to make them work.

#4 ​Why you won’t get any competitive advantage in the marketplace just by knowing Google Analytics.

#5 The number 1 reason why conversion optimization is not working for your business.

#6 How to advertise on any marketing platform for FREE with an unlimited budget.

​#7 How to learn and master digital analytics and conversion optimization in record time.



   

My best selling books on Digital Analytics and Conversion Optimization

Maths and Stats for Web Analytics and Conversion Optimization
This expert guide will teach you how to leverage the knowledge of maths and statistics in order to accurately interpret data and take actions, which can quickly improve the bottom-line of your online business.

Master the Essentials of Email Marketing Analytics
This book focuses solely on the ‘analytics’ that power your email marketing optimization program and will help you dramatically reduce your cost per acquisition and increase marketing ROI by tracking the performance of the various KPIs and metrics used for email marketing.

Attribution Modelling in Google Analytics and Beyond
Attribution modelling is the process of determining the most effective marketing channels for investment. This book has been written to help you implement attribution modelling. It will teach you how to leverage the knowledge of attribution modelling in order to allocate marketing budget and understand buying behaviour.

Attribution Modelling in Google Ads and Facebook
This book has been written to help you implement attribution modelling in Google Ads (Google AdWords) and Facebook. It will teach you, how to leverage the knowledge of attribution modelling in order to understand the customer purchasing journey and determine the most effective marketing channels for investment.

About the Author

Himanshu Sharma

  • Founder, OptimizeSmart.com
  • Over 15 years of experience in digital analytics and marketing
  • Author of four best-selling books on digital analytics and conversion optimization
  • Nominated for Digital Analytics Association Awards for Excellence
  • Runs one of the most popular blogs in the world on digital analytics
  • Consultant to countless small and big businesses over the decade
error: Alert: Content is protected !!