How to accurately track Form Submissions

Tracking form submissions is essential for understanding user interactions, conversion rates, and optimizing website performance. However, many digital marketers and developers struggle with unreliable tracking methods. Most tag management tools like Google Tag Manager (GTM), Tealium iQ, and Adobe Launch offer event-based tracking triggers, but they often fail due to modern form submission techniques.

Why Traditional Form Tracking Fails

Tag management triggers typically listen for the submit event in HTML forms. However, many forms do not rely on this event to send data. Instead, they use:

• Fetch API requests

• AJAX (XHR) requests

• Plain XML requests

Additionally, some tracking methods rely on submit or click events, which can also track failed form submissions, leading to misleading data.

Identifying Your Form Submission Method

To determine how a form sends data, follow these steps:

1. Open Developer Tools: Right-click on the page and select Inspect.

2. Go to the Network Tab.

3. Submit the Form and observe any network requests.

4. Check the ‘Type’ column:

   • If it shows xhr, the form uses an XHR request.

   • If it shows fetch, the form uses the Fetch API.

Implementing Proper Form Tracking

1. Tracking Fetch API Requests

If your form uses the Fetch API, override the fetch method to insert tracking logic:

old_fetch = window.fetch;

window.fetch = function () {

    /* Uncomment the below lines for debugging */

    // console.log(this);

    // console.log(arguments);

    const fetch = old_fetch.apply(this, arguments);

    fetch.then((response) => {

        try {

            /* Insert your tracking logic here */

        } catch (e) {}

    });

    return fetch;

};

2. Tracking AJAX (XHR) Requests with jQuery

If your website uses jQuery, track AJAX requests using an event listener:

$(document).ajaxSuccess(function (event, xhr, options) {

    try {

        /* Insert your tracking logic here */

    } catch (e) {}

});

3. Tracking XHR Requests Without jQuery

If your site doesn’t use jQuery, modify the XMLHttpRequest.prototype.send method:

old_send = XMLHttpRequest.prototype.send;

XMLHttpRequest.prototype.send = function () {

    try {

        /* Insert your tracking logic here */

    } catch (e) {}

    old_send.apply(this, arguments);

};

Best Practices for Form Tracking

1. Use an IF Condition: Ensure that tracking fires only for the intended form submission.

2. Wrap Tracking Code in a Try-Catch Block: Prevent errors from breaking form submissions.

3. Debug Before Deployment: Use console.log() statements to verify functionality before pushing live.

By implementing these tracking methods, you can achieve accurate form submission tracking and improve your website’s analytics reliability.