Last updated on October 18, 2023

WP Forms Google Analytics integration

Don’t know where to add this snippet? Read our guide: How to add code snippets.

Track form submissions in Google Analytics.

To integrate Google Analytics with WP Forms, you can use the wp_footer action hook to add the Google Analytics tracking code to your website’s footer. Here’s an example code snippet that you can add to your theme’s functions.php file:

function wpsnippets_wpforms_google_analytics_integration() {
    if ( function_exists( 'wpforms' ) ) {
        $form_ids = array( 1, 2, 3 ); // Replace with your form IDs

        if ( in_array( wpforms()->form->get( 'id' ), $form_ids ) ) {
            ?>
            <script>
                // Replace 'UA-XXXXXXXXX-X' with your Google Analytics tracking ID
                window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
                ga('create', 'UA-XXXXXXXXX-X', 'auto');
                ga('send', 'pageview');
            </script>
            <script async src='https://www.google-analytics.com/analytics.js'></script>
            <?php
        }
    }
}
add_action( 'wp_footer', 'wpsnippets_wpforms_google_analytics_integration' );

In this code snippet, we first check if the WP Forms plugin is active by using the function_exists() function. Then, we define an array of form IDs that you want to track. Replace the 1, 2, 3 with the actual form IDs you want to track.

Next, we check if the current form ID matches any of the form IDs in the array using the in_array() function. If it does, we output the Google Analytics tracking code in the footer using the wp_footer action hook.

Make sure to replace 'UA-XXXXXXXXX-X' with your actual Google Analytics tracking ID.

This code snippet allows you to selectively add the Google Analytics tracking code to specific WP Forms. You can modify the $form_ids array to include the form IDs you want to track.

Examples

Example 1: Tracking form submissions as events in Google Analytics

This use case demonstrates how to integrate WP Forms with Google Analytics to track form submissions as events. The code example below adds a JavaScript snippet to the form submission success event that sends a custom event to Google Analytics.

function wpsnippets_wpforms_ga_integration() {
    ?>
    <script>
        document.addEventListener( 'wpformsSubmitSuccess', function( event ) {
            ga( 'send', 'event', 'Form', 'Submit', event.detail.formTitle );
        });
    </script>
    <?php
}
add_action( 'wp_footer', 'wpsnippets_wpforms_ga_integration' );

The code uses the wp_footer action hook to output a JavaScript snippet that listens for the wpformsSubmitSuccess event. When the event is triggered, it sends a custom event to Google Analytics with the form title as the event label. This allows you to track form submissions as events in Google Analytics.

Example 2: Tracking form field interactions in Google Analytics

This use case demonstrates how to track user interactions with form fields in WP Forms using Google Analytics. The code example below adds JavaScript code to track form field focus and blur events as custom events in Google Analytics.

function wpsnippets_wpforms_ga_integration() {
    ?>
    <script>
        document.addEventListener( 'wpformsFieldFocus', function( event ) {
            ga( 'send', 'event', 'Form Field', 'Focus', event.detail.fieldLabel );
        });

        document.addEventListener( 'wpformsFieldBlur', function( event ) {
            ga( 'send', 'event', 'Form Field', 'Blur', event.detail.fieldLabel );
        });
    </script>
    <?php
}
add_action( 'wp_footer', 'wpsnippets_wpforms_ga_integration' );

The code uses the wp_footer action hook to output JavaScript code that listens for the wpformsFieldFocus and wpformsFieldBlur events. When these events are triggered, custom events are sent to Google Analytics with the field label as the event label. This allows you to track user interactions with form fields in Google Analytics.

Example 3: Tracking form abandonment in Google Analytics

This use case demonstrates how to track form abandonment in WP Forms using Google Analytics. The code example below adds JavaScript code to track when users start filling out a form but do not submit it, and sends a custom event to Google Analytics.

function wpsnippets_wpforms_ga_integration() {
    ?>
    <script>
        document.addEventListener( 'wpformsFormAbandon', function( event ) {
            ga( 'send', 'event', 'Form', 'Abandon', event.detail.formTitle );
        });
    </script>
    <?php
}
add_action( 'wp_footer', 'wpsnippets_wpforms_ga_integration' );

The code uses the wp_footer action hook to output JavaScript code that listens for the wpformsFormAbandon event. When this event is triggered, a custom event is sent to Google Analytics with the form title as the event label. This allows you to track form abandonment in Google Analytics.

Last updated on October 18, 2023. Originally posted on November 20, 2023.

Leave a Reply