How To Track WordPress Forminator Forms

Are you using Forminator forms on your WordPress site and looking to enhance your understanding of user interactions? Tracking form submissions effectively not only helps optimize user experience but also provides valuable insights into your audience’s engagement with your website. Forminator, a popular form plugin, offers a variety of features, and by setting up submission tracking using Google Tag Manager (GTM) and Google Analytics 4 (GA4), you can gain deeper insights into your users’ behaviors.

In this article, we’ll guide you through setting up an AJAX event listener for Forminator submissions using GTM. This guide will help you capture every form interaction and push it to GA4 for enhanced tracking.

This guide is part of our conversion tracking series using Google Tag Manager. If you’re new to form tracking, check out our main article – How to track form submissions.

Overview of Form Submission Tracking Methods

While Forminator simplifies the creation and management of forms on WordPress, tracking submissions to analyze performance requires a few extra steps. To fully understand how users interact with your forms, you need to capture their data and push it into Google Analytics 4 using Google Tag Manager (GTM).

This guide focuses on AJAX Event Listener Tracking, a method for tracking dynamic forms that load asynchronously (without page refreshes). The advantage of this method is that it captures every form interaction without requiring a page reload.

Identifying Forminator Forms on Your Website

Before setting up tracking, it’s crucial to identify whether your website uses Forminator forms. Here’s how to do this:

1. Manual Inspection of Form Code:

• Open the page containing the form.
• Right-click on the form and select “Inspect” to open the browser’s developer tools.
• Look at the form’s HTML structure. Forminator typically includes the class .forminator-form within the <form> tag or parent <div>.

2. Using Wappalyzer Chrome Extension:

• Install Wappalyzer if you haven’t already.
• Navigate to the page with the form.
• Click on the Wappalyzer icon to view detected technologies, and check for Forminator under CMS or JavaScript Libraries.

Setting Up DataLayer Event Tracking in GTM for Forminator Forms

Tracking form submissions using Google Tag Manager involves setting up a listener for AJAX events. This ensures that form submissions that don’t reload the page are still tracked in Google Analytics 4.

Here’s the step-by-step guide to set this up:

1. Add the AJAX Event Listener Script in GTM

To ensure that Forminator form submissions are captured correctly, we’ll add a custom AJAX event listener in GTM.

1. Open Google Tag Manager (GTM):
   • Go to your GTM account and choose the container for your website.
2. Create a New Tag:
   • Click Tags in the sidebar, then New to create a new tag.
3. Configure the Custom HTML Tag:
   • Choose Tag Configuration and select Custom HTML.
   • Enter the following script into the HTML text area:

<script id=”gtm-jq-ajax-listen” type=”text/javascript”>

(function() {

    ‘use strict’;

    var $;

    var n = 0;

    init();

    

    function init(n) {

        if (typeof jQuery !== ‘undefined’) {

            $ = jQuery;

            bindToAjax();

        } else if (n < 20) {

            n++;

            setTimeout(init, 500);

        }

    }

    

    function bindToAjax() {

        $(document).bind(‘ajaxComplete’, function(evt, jqXhr, opts) {

            var fullUrl = document.createElement(‘a’);

            fullUrl.href = opts.url;

            var pathname = fullUrl.pathname[0] === ‘/’ ? fullUrl.pathname : ‘/’ + fullUrl.pathname;

            var queryString = fullUrl.search[0] === ‘?’ ? fullUrl.search.slice(1) : fullUrl.search;

            var queryParameters = objMap(queryString, ‘&’, ‘=’, true);

            var headers = objMap(jqXhr.getAllResponseHeaders(), ‘\n’, ‘:’);

            

            dataLayer.push({

                ‘event’: ‘ajaxComplete’,

                ‘attributes’: {

                    ‘type’: opts.type || ”,

                    ‘url’: fullUrl.href || ”,

                    ‘queryParameters’: queryParameters,

                    ‘pathname’: pathname || ”,

                    ‘hostname’: fullUrl.hostname || ”,

                    ‘protocol’: fullUrl.protocol || ”,

                    ‘fragment’: fullUrl.hash || ”,

                    ‘statusCode’: jqXhr.status || ”,

                    ‘statusText’: jqXhr.statusText || ”,

                    ‘headers’: headers,

                    ‘timestamp’: evt.timeStamp || ”,

                    ‘contentType’: opts.contentType || ”,

                    ‘response’: (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || ”)

                }

            });

        });

    }

    

    function objMap(data, delim, spl, decode) {

        var obj = {};

        if (!data || !delim || !spl) return {};

        var arr = data.split(delim);

        var i;

        if (arr) {

            for (i = 0; i < arr.length; i++) {

                var item = decode ? decodeURIComponent(arr[i]) : arr[i];

                var pair = item.split(spl);

                var key = trim_(pair[0]);

                var value = trim_(pair[1]);

                if (key && value) obj[key] = value;

            }

        }

        return obj;

    }

    

    function trim_(str) {

        if (str) {

            return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ”);

        }

    }

})();

</script>

 

2. Save and Name Your Tag:

• Give your tag a descriptive name like Forminator AJAX Listener and save it.

3. Testing the Listener with Form Submissions

• Enable GTM Preview Mode:
  • Click the Preview button in GTM to enable preview mode, allowing you to test changes in real-time.
• Submit the Form:
  • Submit a form on your website where Forminator is active.
  • GTM preview mode should show the ajaxComplete event being triggered.

4. Verifying Data in the DataLayer

Once the form is submitted, verify the data being pushed to the DataLayer. In GTM’s preview mode, you should see the ajaxComplete event appear, along with the attributes you’ve set up (e.g., url, statusCode, etc.).

Utilizing DataLayer Events To Create The Trigger And Tag

Once the AJAX event listener is set up and verified, the next step is to create a Custom Trigger and GA4 Event Tag in Google Tag Manager.

Step 1: Creating a Custom Trigger for Forminator Form Submissions

1. Set Up a New Trigger:
   • In GTM, go to Triggers and click New.
   • Choose Custom Event as the trigger type and set the Event Name to ajaxComplete.
   • Add any additional conditions if needed, like filtering the URL or form ID.
2. Save the Trigger:
   • Name your trigger something like Forminator AJAX Submission Trigger and save.

Step 2: Creating a GA4 Event Tag

1. Create a New GA4 Event Tag:
   • Go to Tags and click New to create a new tag.
   • Select Google Analytics: GA4 Event as the tag type and connect the tag to your GA4 property using the Measurement ID.
   • Set the Event Name to something like formSubmission (or customize it).
2. Link the Trigger:
   • Assign the Forminator AJAX Submission Trigger to this tag.
3. Save and Test:
   • Save the tag and use GTM’s preview mode to submit a test form and verify that the event is firing correctly.

Step 3: Publishing the Tag

Once you’ve tested and confirmed everything is working as expected, publish the changes in GTM.

Conclusion

By setting up an AJAX event listener in Google Tag Manager for Forminator forms, you can track all form submissions without relying on page reloads. This method ensures that you capture every user interaction, allowing you to gain valuable insights into how users engage with your forms.

At First Page Digital, we offer advanced digital marketing services including advanced form tracking setups like the one described here. If you need help refining your tracking or require tailored solutions for your website, reach out to our experts today!