How to track form validation errors with GTM and GA4 using custom JavaScript

Real-World Example Scenario

Imagine an e-commerce website with a checkout form. Many users repeatedly fail to complete the form due to confusing error messages, poorly indicated required fields, or technical glitches. Tracking these errors can pinpoint issues that prevent conversions.

In our example, we have a form that uses client-side validation (e.g., HTML5 validation or JavaScript-based validation). We'll track precisely which fields cause errors, capturing actionable data directly in GA4.
 

Step 1/8: Understanding the Problem

Form validation errors are often displayed without page reloads. Therefore, standard GTM triggers (like form submission triggers) don’t detect them. To solve this, we’ll create a custom JavaScript snippet that listens for validation errors and pushes custom events into the GTM dataLayer.

Step 2/8: JavaScript to Capture Validation Errors (Custom Listener)

Insert the following JavaScript listener on your webpage using GTM's Custom HTML tag:

• In GTM, go to Tags → New → Custom HTML.
• Paste the following custom script into the HTML section:

<script>
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('form').forEach(function(form) {
  form.addEventListener('submit', function(event) {
    var invalidFields = [];
    
    // Check each form element for validity
    form.querySelectorAll('input, select, textarea').forEach(function(field) {
      if (!field.checkValidity()) {
        invalidFields.push({
          fieldName: field.name || field.id || 'Unnamed Field',
          validationMessage: field.validationMessage
        });
      }
    });

    if (invalidFields.length > 0) {
      // Push validation errors to GTM dataLayer
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        'event': 'formValidationError',
        'formId': form.id || 'form-no-id',
        'invalidFields': invalidFields
      });
    }
  }, false);
});
});
</script>

Explanation of the Script:

• The script listens for the form's submit event.
• Checks each input, select, and textarea within the form for validation errors using HTML5's built-in validation method checkValidity().
• Pushes a custom event formValidationError to GTM’s dataLayer whenever invalid fields are detected.
• Provides detailed field information (fieldName, validationMessage) for each error encountered.

Step 3/8: Create Data Layer Variables in GTM

In GTM, create Data Layer Variables (DLVs) to capture details:

• Go to Variables → New → Data Layer Variable.
• Save these variables for use in your GA4 event tag.

Step 4/8: Create a Custom Event Trigger in GTM

To trigger the tag on validation errors:

• In GTM, go to Triggers → New → Custom Event.
• Event Name: formValidationError (exactly matching the dataLayer event).
• Trigger Fires On: All Custom Events.
• Name this trigger: Form Validation Error Trigger.
• Save the trigger.

Step 5/8: Set Up the GA4 Event Tag in GTM

Next, configure the GA4 event tag to track validation errors in Google Analytics:

• In GTM, go to Tags → New.
• Choose Google Analytics: GA4 Event.
• Configuration Tag: select your existing GA4 configuration tag.
• Event Name: clearly indicate the event, e.g., form_validation_error.
• Set event parameters to capture detailed information:

• Under "Triggering", select: Form Validation Error Trigger.
• Name this tag: GA4 Event - Form Validation Error.
• Save the tag.

Step 6/8: Preview, Debug, and Test in GTM

Before publishing, verify setup accuracy:

• Click Preview in GTM.
• Visit the page containing your forms.
• Submit forms intentionally leaving required fields empty or filling invalid data.
• GTM Preview should show the formValidationError event and the GA4 event tag firing with accurate details.

Step 7/8: Verify Events in Google Analytics (GA4)

Check in GA4:

• Go to GA4 → Reports → Engagement → Events.
• Look for the form_validation_error event (data may take up to 24 hours to appear, or use GA4's DebugView for instant verification).

Optional Advanced Analysis:

Create a custom dimension in GA4 using the invalid_fields parameter for detailed analysis of validation errors over time.

• Custom dimension name: Invalid Fields
• Parameter: invalid_fields
• Scope: Event

Step 8/8: Example Analysis of the Captured Data

In GA4, you’ll see event parameters clearly indicating:

• Which forms (form_id) have the highest validation errors.
• Specific fields (invalid_fields) that commonly trigger errors.
• Detailed validation messages, allowing actionable optimization steps.

For example:
 

This allows precise identification and fixes for problematic form fields.

Why Is This Approach Necessary?

• Client-side validation errors don't trigger traditional GTM events.
• Provides actionable insights into user experience issues, improving UX and conversions.
• Scalable approach for tracking errors across multiple forms without additional modifications.