How To Track WordPress Ninja Form Submissions

Are you using Ninja Forms on your WordPress site and looking to enhance your understanding of user interactions? Tracking form submissions effectively not only helps in optimising the user experience but also provides valuable insights into your audience’s engagement with your website. Ninja Forms, one of the most popular WordPress form plugins, offers robust functionality and flexibility, making it an ideal choice for businesses of all sizes.

In this article, we’ll dive into the specifics of setting up form submission tracking using Google Tag Manager (GTM) with a focus on leveraging Ninja Forms’ built-in events. Whether you’re new to GTM or looking to refine your existing tracking setups, we’ll guide you through the process of capturing valuable data from your forms to inform your marketing strategies and improve overall site performance.

Note: This guide is part of our conversion tracking series using Google Tag Manager. For a beginner guide to form tracking, do view our main article – How to track form submissions.

Overview of Form Submission Tracking Methods

While Ninja Forms simplifies the creation and management of contact forms on WordPress, tracking these form submissions to analyze performance involves a few more steps. To fully grasp the impact of your forms, you must be able to capture data on how users interact with them. Here we explore several methods to track form submissions, each suited to different needs and technical environments:

• Page View Tracking: This method involves tracking visits to a specific “Thank You” or confirmation page that users are redirected to after submitting a form. It’s a straightforward approach if your form is set to redirect upon submission.
• Submit Button Click Tracking: By monitoring clicks on the submit button, this method records each attempt to submit the form, regardless of whether the submission is successful or not.
• CSS Selector for Success Message: This method uses CSS selectors to detect and track the display of a success message on the form page, indicating a successful submission without redirection.
• Custom DataLayer Event Tracking: The most robust method, this involves pushing custom events from Ninja Forms into the DataLayer when a form is submitted, allowing for precise tracking of successful submissions and additional data.
• Each of these methods has its own set of advantages and can be implemented using Google Tag Manager to enhance your data collection capabilities. While we will focus primarily on the Custom DataLayer Event for its accuracy and depth of data, these other methods are covered in our main article – How to track form submissions. For this comprehensive guide, we will delve into these methods with a special emphasis on integrating Ninja Forms’ events for a seamless and efficient tracking setup.

Identifying Ninja Forms on Your Website

To effectively set up tracking for Ninja Forms submissions, you first need to confirm whether your WordPress site is using this specific form plugin. Identifying the form type is crucial as it dictates the customisation and configuration you’ll apply in Google Tag Manager. Here are two straightforward methods to determine if your site is running Ninja Forms:

Manual Inspection of Form Code:

• Open the webpage 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 in the Elements panel. Ninja Forms typically includes specific classes like .nf-form-content which can be found in the form’s enclosing <div> or directly within the <form> tag.
• Check for hidden inputs or data attributes that indicate the use of Ninja Forms, such as data-nf-form.

Using Wappalyzer Chrome Extension:

• Install the Wappalyzer extension from the Chrome Web Store if you haven’t already.
• Navigate to the webpage that contains the form.
• Click on the Wappalyzer icon in your browser’s toolbar to display the detected technologies.
• Look for Ninja Forms under the categories that might list it, typically found under “CMS” or “JavaScript libraries”.

Pro Tips:

• Cross-Reference Findings: After identifying the plugin through one method, confirm with the other to ensure accuracy.
• Regular Updates: Keep your Wappalyzer extension updated to detect the latest technologies accurately.
• Check for iFrames: If no form type is detected through these methods, consider whether the form might be embedded using an iframe, complicating detection. Look for <iframe> tags around the form area, or use a Chrome extension like “iFrame detector” to identify embedded forms.

Setting Up DataLayer Event Tracking in GTM for Ninja Forms

Tracking form submissions effectively in Google Tag Manager (GTM) involves setting up a system to capture specific events and push them into the DataLayer. For Ninja Forms, this means utilizing its built-in events to monitor form submissions that result in successful completions. By capturing these events, you can enrich your analytics with detailed interaction data, improving your ability to analyze and optimize user behavior.

Step 1: Implementing Listener Tag in GTM:

To ensure that form submission events from Ninja Forms are tracked, you’ll need to create a custom HTML tag in GTM that listens for the nfFormSubmitResponse event. This event is particularly useful as it confirms not just the form submission but also the successful completion, providing a reliable indicator of a completed interaction.

Here’s how to set up the tag:

1. Open Google Tag Manager:

Navigate to your GTM dashboard and select or create a container for your website.

2. Create a New Tag:

Click on ‘Tags’ from the sidebar menu, then click ‘New’ to start creating 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>

jQuery(document).ready( function() {

  jQuery(document).on(‘nfFormSubmitResponse’, function(event, response, id) {         

      dataLayer.push ({

        ‘event’ : ‘ninjaFormSubmission’,

        ‘NFformID’ : response.id           

            });

         });

    });

</script>

 

This script listens for the nfFormSubmitResponse event and then pushes relevant data into the DataLayer, including the form’s ID.

4. Set Tag Firing Options:

Under ‘Triggering’, select the trigger that fires on all pages. This ensures the script is loaded on every page where a Ninja Form might be present, allowing it to capture every instance of the form submission.

5. Save and Name Your Tag:

Provide a descriptive name for your tag, such as ‘Ninja Form Listener’, and save it.

Details of Data Being Pushed to the DataLayer

• Event: This is a custom event labeled “ninjaFormSubmission”, which you will use in GTM to trigger specific tags.
• NFformID: The unique identifier of the form that was submitted, useful for differentiating between multiple forms on your site.
• Utilising DataLayer Event To Create The Trigger And Tag
• After setting up the DataLayer to capture specific events from Ninja Forms submissions, the next step is to make practical use of this data within Google Tag Manager. This involves verifying that the DataLayer is receiving the data correctly, creating a custom trigger based on the event, and configuring a tag to send this data to Google Analytics 4 (GA4).

Step 2: Verifying Data in the DataLayer

• Enter GTM Preview Mode: Navigate to your Google Tag Manager workspace and click the ‘Preview’ button to activate the preview mode. This mode allows you to see real-time changes and interactions on your site as you test different configurations.
• Submit a Test Form: Go to a page on your website where a Ninja Form is active and submit the form as a user would. Make sure to fill out the fields required by your form setup.
• Check the DataLayer for Variables: Once the form is submitted and the nfFormSubmitResponse event is triggered, check the DataLayer tab within the GTM preview pane. You should see the new variables such as event and NFformID populated with data from the form submission. This step confirms that the custom HTML tag you set up is working correctly and pushing the desired data into the DataLayer.

Step 3: Creating a Custom Trigger

• Set Up a New Trigger: In GTM, go to the ‘Triggers’ section and click ‘New’. Choose ‘Custom Event’ as the trigger type. For the event name, enter “ninjaFormSubmission”, the same name used in your DataLayer push. This ensures that the trigger listens for exactly this event coming from the DataLayer.
• Configure and Save the Trigger: Name your trigger descriptively, such as ‘Ninja Form Submission Trigger’, and save it. This trigger will now listen for the “ninjaFormSubmission” event and activate associated tags whenever this event occurs.

Step 4: Creating a Tag to Send Data to GA4

• Create a New GA4 Event Tag: In GTM, create a new tag and select ‘Google Analytics: GA4 Event’ as the tag type. Connect the tag to your GA4 property by specifying the GA4 Configuration Tag or directly entering your Measurement ID.
• Set Up Event Parameters: Configure the tag to send event data. Name the event (e.g., ‘Ninja Form Submission’ – this is the name that will be passed onto GA4), and use the DataLayer variables to send additional data such as the form ID. You can set up event parameters to capture specific form details that are important for your analytics.
• Link the Tag to Your Custom Trigger: Assign the newly created ‘Ninja Form Submission Trigger’ to this tag. This setup ensures that the tag fires every time the custom event is triggered in the DataLayer.
• Save and Test Your Tag: Save your new tag and use GTM’s preview mode to test it. Submit a form to see if the tag fires and the data appears in GA4’s real-time or DebugView reporting.
• Publish Your Changes: Once you’ve verified that everything is functioning as expected and the data appears correctly in Google Analytics, go ahead and publish your changes in GTM.

Advantages of Using This Method

Accuracy and Relevance: By tracking only forms that successfully complete, you ensure the data is relevant and reflects actual user conversions.

Rich Data Capture: Pushing form ID and responses into the DataLayer allows for deeper analysis of form interactions, enabling more targeted and effective optimisations.

Conclusion

With the setup detailed in this guide, you can harness the power of Google Tag Manager and Google Analytics 4 to capture valuable data from Ninja Forms submissions, enriching your understanding of how users engage with your forms.

At First Page Digital, we specialise in offering comprehensive digital marketing solutions, including advanced form tracking setups like the ones described here. As a leading digital marketing agency, we understand the importance of leveraging precise and actionable data to enhance campaign strategies and boost conversion rates. As such, all SEO services and PPC campaigns include free tracking setup for your website’s contact form.

If you’re looking to refine your digital marketing efforts or need assistance implementing sophisticated tracking solutions, we invite you to consult with our experts.