How to Track WP Forms with Google Analytics 4 and Tag Manager

Struggling to track WP forms on your site? This guide offers multiple methods for tracking WP forms with Google Analytics 4 (GA4) and Google Tag Manager (GTM), tailored to the type of form you have. Here's a breakdown:

Assumptions:

• GA4 is installed on your website using GTM.
• Familiarity with creating tags, triggers, and variables in GTM.

Determine the Method:

• AJAX Forms: If the page doesn't refresh upon form submission, use the AJAX method.
• Non-AJAX Forms: If the page refreshes, use GA4 built-in tracking or GTM's built-in Form Submission trigger.

AJAX Method:

1. Create AJAX Listener:

   • Use a custom HTML tag in GTM to listen for AJAX requests and push data to the Data Layer.
   • Example code for AJAX listener:

     <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>
     

   • Configure the tag in GTM and set triggers based on your needs (all pages or specific pages).

2. Only Trigger Event on WP Forms:

   • Inspect the page to find a unique identifier for WP forms in the dataLayer.
   • Create a Data Layer Variable and a custom trigger in GTM to fire only for WP forms.

3. Extract WP Form ID:

   • Use custom JavaScript in GTM to extract the form ID from the dataLayer.
   • Example code:

     function(){
         var input = {{dlv - attributes.response.data.confirmation}};
         var regex = /id="wpforms-confirmation-(\d+)"/;
         var match = regex.exec(input);
         if (match && match[1]) {
             return match[1];
         }
     }
     

4. Create GA4 Event Tag:

   • Configure a GA4 event tag in GTM with the necessary parameters and triggers.
   • Include the measurement ID and event name (e.g., form_submission).

5. Create Custom Dimension for Form ID in GA4:

   • In GA4, create an event-scoped custom dimension for the Form ID.

6. Test the New Event:

   • Preview the GTM container and submit the form to ensure the event fires correctly.
   • Check DebugView in GA4 for the event and parameters.

Alternative Methods:

1. Using Built-in GA4 Form Tracking:

   • Enable enhanced measurements and "Form Interactions" in GA4.
   • Note: This method may not be precise and could capture unwanted events.

2. Using Built-in Form Submission Trigger in GTM:

   • Enable form variables in GTM.
   • Create a form submission trigger specific to WP forms.
   • Configure a GA4 event tag with the necessary parameters and triggers.

Finding Form Submission Data in GA4:

1. Built-in Standard Report:

   • Use the Events report in GA4 and filter by the event name form_submission.
   • Break down data by Form ID.

2. GA4 Explorations:

   • Create a custom exploration in GA4 with dimensions and metrics relevant to form submissions.

Final Thoughts:

• Use only one tracking method to avoid duplicate data.
• Regularly test and verify your setup to ensure accurate tracking.