Master Ninja Forms Tracking: How to Track AJAX Submissions in GTM (Step-by-Step Guide)

If you are using Ninja Forms on your WordPress website, you may have noticed a major issue with your analytics: your form submissions aren’t showing up.

You have set up Google Analytics 4 (GA4), you have set up Google Tag Manager (GTM), but when a user contacts you, the data never arrives.

Why? Because Ninja Forms uses AJAX.

Unlike older forms that redirect you to a “Thank You” page (e.g., /thank-you/), Ninja Forms simply refreshes the content on the current page to show a success message. Because the URL doesn’t change, standard conversion tracking fails.

Here is what it looks like on our own site. Notice how the form submits, the message appears, but the URL remains /contact/.

To fix this, we can’t rely on page views. We need to install a “Listener” in GTM that waits for the form to report success, and then manually tells Google Analytics about it.

Here is the complete, step-by-step guide to setting this up in less than 5 minutes.

Step 1: Create a New Tag in GTM

First, log into your Google Tag Manager workspace.

1. Click on Tags in the left-hand menu.
2. Click the blue New button in the top right corner.

Step 2: Select the “Custom HTML” Tag Type

We need to inject a specific piece of JavaScript code that can “hear” Ninja Forms. This isn’t a built-in Google template, so we will use a Custom HTML tag.

1. Click inside the Tag Configuration box

2. A menu will slide out. Scroll down to the Custom section.

3. Select Custom HTML.

Step 3: Paste the Listener Code

Now, we need to paste the script. This code acts as a bridge. It waits for the specific nfFormSubmitResponse signal from Ninja Forms. When it hears that signal, it pushes a ‘success’ event into the Data Layer.

Copy the code below and paste it into the HTML box:

It should look exactly like this inside your tag configuration:

Step 4: Configure the “DOM Ready” Trigger

This step is crucial. Many people make the mistake of using “All Pages” (Page View) as the trigger.
Do not use “Page View”.
If the script loads before the form exists on the page, the listener will break. We need to wait for the DOM (Document Object Model) to be ready.

1. Scroll down to the Triggering section.
2. Click the circle icon or the + button in the top right.

3. In the trigger selection menu, click the + (Plus) icon in the top right to create a NEW trigger.

4. Click inside Trigger Configuration and select DOM Ready.

Name this trigger “All Pages – DOM Ready” and save it.

Step 5: Save and Verify

Your final setup should look like a Custom HTML tag containing the jQuery script, linked to a DOM Ready trigger.

1. Name your Tag (e.g., cHTML – Ninja Form Listener).
2. Click Save.
3. Click Preview in GTM and go to your website.
4. Fill out the form and hit submit.

Once the success message appears, check your GTM Debugger (Tag Assistant). You should see a new event called ninjaFormSubmission in the API summary.

Conclusion

You have now successfully bridged the gap between your website and Google Tag Manager.

What to do next: Now that the event is in the Data Layer, don’t forget to create a GA4 Event Tag that fires on the Custom Event ninjaFormSubmission. This will send the actual conversion data to your analytics reports.

Need help getting your tracking sorted? The team at Incisive Ranking specializes in complex technical SEO and analytics setups. Contact us today!