How To Set Up Conversion Tracking For Ninja Forms with Google Tag Manager

Published on October 9th, 2024
by Emma White

In today's digital landscape, accurate conversion tracking is crucial for businesses to measure the success of their online marketing efforts. Businesses need a way for potential clients and customers to contact them via their online presences, and a common method is through contact forms.

There are lots of different form providers out there, like WP Forms, Wordpress’ Contact Form 7, Gravity forms, and the subject of today’s blog; Ninja Forms. Each form solution has slightly different methods of tracking, so it’s essential to make sure you’ve got the right tracking in place to ensure you get the most accurate data to inform your online marketing efforts.

Why Accurate Conversion Tracking Matters

Before diving into the technical details, let's understand why conversion tracking is essential:

Measure ROI: Accurate tracking helps businesses calculate the return on investment for their marketing campaigns.
Optimise Campaigns: By identifying which forms and pages convert best, you can focus your efforts on high-performing areas.
Improve User Experience: Understanding user behaviour allows you to refine your forms and landing pages for better conversions.
Data-Driven Decisions: With precise tracking, you can make informed decisions about your marketing strategy and budget allocation.

For business owners, implementing correct form conversion tracking can lead to more efficient marketing spend, improved website performance, and ultimately, increased revenue.

Setting Up Ninja Form Conversion Tracking with Google Tag Manager

Follow these steps to set up conversion tracking for your Ninja Forms. You will need access to both Google Tag Manager and Google Analytics properties that are firing on your website.

Step 1: Create the Ninja Forms Listener Tag

The listener tag is a piece of JavaScript code that listens for the nfFormSubmitResponse DOM event and fires an event into the Data Layer called “ninjaFormSubmission.” It is also used to gather the form ID. The form ID is what will allow you to create different tracking for different forms if needed.

In Google Tag Manager (GTM), create a new tag and name it "Ninja Forms Listener".
Select "Custom HTML" as the tag type.
Insert the below JavaScript code.
Set the tag’s trigger to all pages.

<script>
jQuery(document).ready( function() {
  jQuery(document).on('nfFormSubmitResponse', function(event, response, id) {         
      dataLayer.push ({
        'event' : 'ninjaFormSubmission',
        'NFformID' : response.id           
            });
         });
    });
</script>

Code sourced from Analytics Mania.

Step 2: Create a User-Defined Variable

Creating this data layer variable allows us to utilise the form ID gathered by the listener code, and set up our tracking based on submissions of specific Ninja forms if you have multiple on your website.

In GTM, go to Variables > User-Defined Variables > New. Name the variable "Ninja Form ID".
Select "Data Layer Variable" for Variable Configuration.
Enter "NFformID" (case sensitive) as the Data Layer Variable Name.
Save the variable.

Step 3: Test the Setup

Confirm that everything we have set up so far is working correctly.

Use GTM's Preview Mode to open the page with the form you want to track on, and submit a test form.
Verify that the ninjaFormSubmission has fired and note the form ID from within the event’s variables.

Step 4: Create a Custom Event Trigger

Now we have the form ID, we can create a trigger. If you have multiple forms across your website for different purposes, you can use the form ID to track them individually. If you don’t need to track forms individually, you don’t need to make use of the form ID.

In GTM, go to Triggers > New > Trigger Configuration.
Select "Custom Event" and name it "ninjaFormSubmission" (case sensitive).
If tracking all forms together, keep "All Custom Events" selected.
For tracking forms separately, choose "Some Custom Events", choose Ninja Form ID variable from the dropdown list, then enter the form ID. You can choose either “equals” or “contains”, depending on what setup is best keeping in mind any other forms you may have on your website and their IDs.

Step 5: Set Up Google Analytics 4 Event Tag

Now we want to set up the tag that will fire an event and send it to GA4 when your Ninja form is submitted.

In GTM, create a new tag.
Choose "Google Analytics: GA4 Event" as the tag type.
Enter your GA4 measurement ID, which you will get from within GA4.
Set an event name (e.g., "contact_form_submission").
Select the trigger you created in Step 4.

Step 6: Test and Verify

Now you want to test that the whole setup is working, and the events are successfully being pushed through to GA4.

Open Google Analytics 4 and go to Admin > Data Display > Debug View.
Go back to GTM and trigger your tags in GTM's preview mode.
Check if the event appears in GA4's debug list.

Step 7: Mark as Conversion and Import to Google Ads

If you want to use this action for any form of reporting, you will need to mark the event as a key event in GA4. By doing this, you will also be able to import the key event into Google Ads as a conversion. So overall, you can use this conversion tracking set up to track the volume of form submissions from both Paid and Organic search.

Wait 24 hours for the event to populate in GA4.
Mark your event as a key event in GA4.
Import the conversion into Google Ads if needed.

Conclusion

By implementing ninja form conversion tracking, you're taking a significant step towards understanding your website's performance and user behaviour. This valuable data will help you make informed decisions, optimise your marketing efforts, and ultimately drive more conversions for your business.

Remember, the key to success is not just setting up the tracking, but also regularly analysing the data and making adjustments to your strategy accordingly. With these tools at your disposal, you're well-equipped to take your online marketing to the next level.