Complete Guide to Elementor Form Tracking With Google Tag Manager

These days, Elementor is the top tool for making pages on WordPress. Elementor Pro has a great form builder. We use Elementor forms a lot on our website. Sometimes, we want to track when people submit Elementor forms using tools like Google Analytics or Facebook Pixel. But these tracking methods might not give all the info we need. In many cases, we need all the data people enter into the form for tracking. I’ve created a tutorial to solve this. It’s a new, complete guide to accurately track Elementor form submissions, including all the info people type in. I hope the tutorial below helps you track Elementor forms properly with all the user data.

Elementor Form DataLayer Code

/**
* Author: Md Hasanuzzamna
* Linkedin: https://linkedin.com/in/md-h
* Youtube: https://youtube.com/@leomeasure
* Email: info@leomeasure.com
*/

(function() {
    var origXMLHttpRequest = XMLHttpRequest;
    XMLHttpRequest = function() {
        var requestURL;
        var requestMethod;
        var requestBody;

        var xhr = new origXMLHttpRequest();
        var origOpen = xhr.open;
        var origSend = xhr.send;

        // Override the `open` function.
        xhr.open = function(method, url) {
            requestURL = url;
            requestMethod = method;
            return origOpen.apply(this, arguments);
        };

        xhr.send = function(data) {
            // Only proceed if the request URL matches what we're looking for.
            if (/.+\/admin-ajax\.php/.test(requestURL)) {
                xhr.addEventListener('load', function() {
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200) {
                            var response = JSON.parse(xhr.responseText);

                            if (response.success && (data instanceof FormData)) {
                                requestBody = {};
                                data.forEach(function(value, key) {
                                    requestBody[key] = value;
                                });

                                if(requestBody.action === "elementor_pro_forms_send_form") {
                                    window.dataLayer = window.dataLayer || [];
                                    dataLayer.push({
                                        event: 'elementor_form_submit', 
                                        inputs: requestBody
                                    });
                                }
                            }
                        }
                    }
                });
            }

            return origSend.apply(this, arguments);
        };

        return xhr;
    };
})();