A Comprehensive Guide to Gravity Form Tracking with Google Tag Manager

Gravity Forms is one of the most powerful and popular form plugins for WordPress. However, finding good resources online to perfectly track Gravity Form submissions with form input data using Google Tag Manager can be challenging. To address this, I’ve crafted a comprehensive GTM dataLayer code specifically designed to track Gravity Form submissions via Google Tag Manager. What makes this code great is its ability to capture all form input values. Additionally, the code has undergone extensive testing, ensuring that GTM won’t fire unless all valid information is provided in the form before submission.

In the following tutorial, I’ve provided a step-by-step guide to tracking Gravity Forms using this helpful code.

Gravity Form DataLayer Code

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

(function($) {
    $(document).ready(function(){

        document.addEventListener('submit', function(event) {
            var form = event.target.closest('form[id^="gform_"]');
            if(form) {
                var formId = form.getAttribute('data-formid');
                var isAjaxForm = form.getAttribute('target') === ('gform_ajax_frame_' + formId);
                var formData = new FormData(form);
                var gformData = {formId: formId};

                if(isAjaxForm) {
                    formData.forEach(function (value, key) {
                        if(key) {
                            var formattedKey = key.replace('.', '_');
                            gformData[formattedKey] = value;
                        }
                    });
                    localStorage.removeItem('gFormData');
                    localStorage.setItem('gFormData', JSON.stringify(gformData));
                }else {
                     var errorRequired = false;

                     formData.forEach(function (value, key) {
                        if(key) {
                            var inputField = form.querySelector('[name="'+key+'"]');

                            if(inputField) {
                                var isRequiredField = inputField.getAttribute('aria-required') === 'true';

                                if(isRequiredField) {

                                    if(inputField.tagName === 'SELECT') {
                                        var selectedOptionVal = inputField.options[inputField.selectedIndex].text;
                                        if(!selectedOptionVal) {
                                            errorRequired = true;
                                        }
                                    }else if((inputField.getAttribute('type') === 'email') && (!value || !value.includes('@'))) {
                                         errorRequired = true;
                                    }
                                    else if(!value) {
                                        errorRequired = true;
                                    }
                                }
                            }

                            var formattedKey = key.replace('.', '_');
                            gformData[formattedKey] = value;
                        }
                    });

                    var requiredCheckboxesRadio = form.querySelectorAll('.gfield--type-checkbox.gfield_contains_required, .gfield--type-radio.gfield_contains_required');

                    requiredCheckboxesRadio.forEach(function(fieldSet) {
                        if(fieldSet.querySelector('input[type="radio"]') || fieldSet.querySelector('input[type="checkbox"]')) {
                            if(!fieldSet.querySelector('input:checked')) {
                                errorRequired = true;
                            }
                        }
                    });


                    if(!errorRequired) {
                        window.dataLayer = window.dataLayer || [];
                        delete gformData['formId'];
                        delete gformData['state_1'];
                        delete gformData['version_hash'];
                        dataLayer.push({event: 'gravity_form_submit', formId: formId, inputs: gformData});
                    }
                }
            }
        });


        $(document).on('gform_confirmation_loaded', function(event, formId){
            var gformData = localStorage.getItem('gFormData');
            if(gformData) {
                gformData = JSON.parse(gformData);
            }

            window.dataLayer = window.dataLayer || [];

            if(gformData && gformData.formId == formId) {
                delete gformData['formId'];
                delete gformData['state_1'];
                delete gformData['version_hash'];
                dataLayer.push({event: 'gravity_form_submit', formId: formId, inputs: gformData});
                localStorage.removeItem('gFormData');
            }else {
                dataLayer.push({event: 'gravity_form_submit', formId: formId});
            }

        });
    });
})(jQuery);