Tracking Chef
  • Guides
    • Google Ads
    • Google Analytics
    • Google Tag Manager
    • Google Data Studio
    • Facebook
    • LinkedIn Ads
    • Hubspot
    • Segment
    • Quora Ads
    • Reddit Ads
  • Blog
  • GTM Playground
  • Swag
  • About
  • Guides
    • Google Ads
    • Google Analytics
    • Google Tag Manager
    • Google Data Studio
    • Facebook
    • LinkedIn Ads
    • Hubspot
    • Segment
    • Quora Ads
    • Reddit Ads
  • Blog
  • GTM Playground
  • Swag
  • About
Tracking Chef
  • Guides
    • Google Ads
    • Google Analytics
    • Google Tag Manager
    • Google Data Studio
    • Facebook
    • LinkedIn Ads
    • Hubspot
    • Segment
    • Quora Ads
    • Reddit Ads
  • Blog
  • GTM Playground
  • Swag
  • About
  • Guides
    • Google Ads
    • Google Analytics
    • Google Tag Manager
    • Google Data Studio
    • Facebook
    • LinkedIn Ads
    • Hubspot
    • Segment
    • Quora Ads
    • Reddit Ads
  • Blog
  • GTM Playground
  • Swag
  • About
Form abandonment tracking with (and w/o) Google Tag Manager
Home » Facebook
August 19, 2020 Elad Levy

A common requirement in measurement plans set by Marketing or Product teams is the ability to track form abandonment. With many of the teams mentioned above stressing over bringing in more and more leads, the ability to analyze and address where and why users drop off is important.

While there some tools that can measure a form’s conversion rate (e.g. Hubspot’s built feature) and even analyze specific fields (e.g. Hotjar Form Analysis tool), measuring this in Google Analytics can come in handy for in-depth analysis.

The output of measurement described below is this table of events in Google Analytics that can be used to analyze the drop-off points of users.

Form abandonment tracking in Google Analytics

Another classic use case of this data is creating Remarketing audience from these users that had expressed a clear interest in your product or service and only need that extra nudge. These can also serve as a great seed for and Lookalike audiences too.

Since this triggers a generic event, it can be used to create these audiences in any ad platform aside from Google Analytics/Ads, for example on Facebook Ads or Taboola.

Form abandonment tracking with Google Tag Manager

The simplest way I usually go about this is with Google Tag Manager (GTM). If you’re using GTM4WP, this is already baked in as an event (will appear in the Data Layer as gtm4wp.formElementEnter & gtm4wp.formElementLeave).

The method described below is based off of the Generic Event Tracking mechanism I’ve previously posted about. Using this generic tracking, adding additional event such as the form abandonment is a breeze.

Adding the Custom HTML tag

The first step to handling form abandonment is being able to identify to which point has a user gotten within a specific form. To achieve this we will use a simple jQuery script.

Important:
This assumes you already have jQuery active on your site (WordPress sites ship with it by default). If you don’t use jQuery, see the Vanilla JS solution below.

The purpose of this script is to capture a change in the value of a form field, and send the label of that field to GTM.

We will add this script as a Custom HTML tag in GTM. You can set the tag to trigger on any page or only on the pages where there are forms (e.g. only the Contact Us page).

<script>
jQuery("form input, form select, form textarea").change(function() {
    dataLayer.push({
        'event': 'ga_event',
        'eventCategory': 'form interaction',
        'eventAction': jQuery(this).attr('placeholder'),
        'eventLabel': ''
    })
});
</script>

The output of this script will be an an event sent to Google Analytics (using the Generic Event tag in GTM). The event’s Category is ‘form interaction’ and the event’s action will record the field interacted with.

The Custom HTML Tag in GTM

In the example above, the field will be identified by its placeholder text. You can extract the field’s label attribute by replacing the placeholder value with label.

jQuery(this).attr('label')

Elementor forms

In Elementor forms, this value is also referenced as name or id. You can also grab the field’s label or the form’s name with a minor alteration:

'eventAction': jQuery(this).parents('div').children('label').text(),
'eventLabel': jQuery(this).parents('form').attr('name')

You can also check out my guide on Bulletproof Elementor form tracking with GTM.

Contact Form 7 forms

In CF7 forms, this value is also referenced as id. You can also grab the field’s label or the form’s ID with a minor alteration:

'eventAction': jQuery(this).parents('label').text(),
'eventLabel': jQuery(this).parents('.wpcf7').attr('id')

You can also check out my guide on Bulletproof Contact Form 7 tracking with GTM.

Gravity forms

In Gravity forms, this value is also referenced as name or id. You can also grab the field’s label with a minor alteration:

'eventAction': jQuery(this).parents('li').children('label').text(),
'eventLabel': jQuery(this).parents('.gform_wrapper').attr('id')

Hubspot forms

In Hubspot forms, this value is also referenced as name. ou can also grab the field’s label with a minor alteration:

jQuery(this).parents('div').eq(1).children('label').text()

You can also check out my guide on Hubspot form tracking with (and w/o) Google Tag Manager.

Form abandonment tracking w/o Google Tag Manager

For those of you who don’t use GTM (shame on you!), there’s also a solution available. It utilizes the same jQuery and logic (see above for specific platforms) but triggers the event directly to Google Analytics via the gtag method.

Add this snippet to any page that has a form you want to track.

<script>
jQuery("form input, form select, form textarea").change(function() {
        gtag('event', jQuery(this).attr('placeholder'), {
        'event_category': 'form interaction'
        });
});
</script>

You can also create a similar tracker for Facebook pixel events by altering the script (both GA and FB events can sit under a single script):

<script>
jQuery("form input, form select, form textarea").change(function() {
fbq('track', 'ViewContent', {
  content_name: jQuery(this).attr('placeholder')
 });
});
</script>

Vanilla JavaScript (w/o jQuery)

in case your site doesn’t use jQuery, you can still use a simpler version of this solution. Since JS lacks some of the methods that are trivial in jQuery (without complex setup), we can only grab the immediate value of the field’s name/label.

If you’re using Google Tag Manager, simply use this snippet. You can change the value of form to capture a specific form by class or id (e.g. .class or #id). You can also change the value of the attribute you’re

<script>
document.querySelector('form').addEventListener('change', function(e) {
    dataLayer.push({
        'event': 'ga_event',
        'eventCategory': 'form interaction',
        'eventAction': e['target'].getAttribute('name')
    });
});
</script>

If you’re not using Google Tag Manager, you can use this snippet to trigger the event into Google Analytics.

<script>
document.querySelector('form').addEventListener('change', function(e) {
        gtag('event', e['target'].getAttribute('name'), {
        'event_category': 'form interaction'
        });
});
</script>

Testing your selectors

If you want to test that you have the correct selectors, you can use this script. Simply paste it in your browser’s Console (click F-12 and navigate to the Console tab) and then interacting with any form on that page (the function resets on page navigation).

jQuery

jQuery("form input, form select, form textarea").change(function() {
        alert('The field value is '+jQuery(this).attr('placeholder'))
});

Vanilla JavaScript

document.querySelector('form').addEventListener('change', function(e) {
        alert('The field value is ' + e['target'].getAttribute('name'))
});

Caveats

While this approach is pretty simple, it does bring some challenges.

  1. This method doesn’t take into account the form’s ID. If you have one for per page, that’s no big deal (as GA events are tied to the page the user triggered them on). If you have multiple forms, e.g. a contact us form and newsletter footer , these can be difficult to analyze separately.
    In that case my suggestion is simply to add the form’s ID to the Event Label field (requires additional code, see above).
  2. Fields can be tracked multiple times – if a user edits a field multiple times, this will be recorded (not necessarily a bad thing)
  3. Browser autocomplete will trigger the fields impacted (again, not a bad thing)
Contact form 7 Elementor Gravity forms

About the Author

Elad Levy View all posts by Elad Levy

Experienced Web Analyst, working for almost a decade now with various web analytics tools.
Also a husband, father of three rascals, and the co-founder of Fixel.

« Previous
Next »
7 Responses
  1. Jackson Monichan
    Reply
    March 1, 2021 at 9:15 am

    Hello Elad,

    You are really an Expert in your domain of analytics.

    I was looking for something like this to track the analytics for form abandonment tracking.

    Thanks a lot!!!

  2. shona
    Reply
    March 12, 2021 at 2:30 pm

    Hello Elad,
    thanks for information
    but, how to track this thing with GA4?

    • Elad Levy
      Reply
      March 16, 2021 at 10:24 pm

      Hey Shona
      This will work just the same, simply use the GA4 Event tag and use Event parameters to pass the values

      • Mehdi
        Reply
        August 13, 2021 at 2:22 pm

        Elad,

        Can you please clarify more about it? It looks just changing universal analytics to GA4 won’t solve the issue

        • Elad Levy
          Reply
          August 15, 2021 at 3:10 pm

          Hey Mehdi
          This tracking template can work just as well for GA4, though it’s designed for UA.
          In what way aren’t you able to use it?

  3. THOMAS PRAXIS
    Reply
    April 13, 2021 at 12:37 am

    Hello Elad,

    Thank you for your post on this subject. I am trying to get this to work for a WordPress site using Contact Form 7.

    I”ve implemented the code you provided into GTM.

    When I debug in GM, I can see the event, eventCategory and the eventLabel. Unfortunately the eventAction is blank. This is what I see:
    eventAction: ”,

    The following code you supplied seems like it should work:
    ‘eventAction’: jQuery(this).parents(‘label’).text(),

    When I look at the page source code this is the structure:
    YOUR NAME

    Any ideas?

    • Elad Levy
      Reply
      April 13, 2021 at 2:56 pm

      It depends if this is the field’s label or id.
      You can try instead this variation (for capturing the id instead of the label):
      ‘eventAction’: jQuery(this).parents(‘.wpcf7’).attr(‘id’)

      let me know if this helps

Leave a Reply

Click here to cancel reply.

Contents hide
Form abandonment tracking with Google Tag Manager
Form abandonment tracking w/o Google Tag Manager
Vanilla JavaScript (w/o jQuery)
Testing your selectors
Caveats
Made with ❤️ by Elad Levy
Disclaimer: Some of the links shared on this site are affiliate links, so if you choose to make a purchase, I’ll earn a small commission. Please note, I only recommend tools I’ve used and have found useful, the commission is not a driving factor