×

Ninja Forms Tracking with Google Analytics 4 and GTM

Eric Huguenin

Last Modified on October 23, 2024

With more than 800,000 active installations, Ninja Forms is a widely used plugin, and there may come a day when you’ll need to set up its tracking.

There are 2 practical ways for Ninja Forms tracking with Google Analytics 4 (GA4).

The first involves using GA4’s automatic form tracking feature, which isn’t always reliable. The second and most robust method is using Google Tag Manager (GTM) to deploy a custom tag that pushes data into the Data Layer.

Here’s what we’ll cover:

  1. What is a Ninja Form?
  2. How to Use Ninja Forms
  3. Ninja Forms Tracking with Google Tag Manager
  4. Creating a Custom HTML Tag & Trigger
  5. Sending a GA4 Ninja Form Submission Event

What is a Ninja Form?

Ninja Forms is a popular contact form builder. Its advantages include creating aesthetically appealing forms for WordPress websites without requiring developer skills.

Additionally, you can quickly create forms for different purposes, with advanced features that let you accept various types of payments, like subscriptions.

How to Use Ninja Forms

If you’re familiar with WordPress and installing plugins, you can skip this part and start from Create a Custom HTML Tag & Trigger. Otherwise, follow along as we add Ninja Forms to a WordPress page.

Install the Plugin on Your WordPress Site

  1. Go to your WordPress site admin. In the menu, click Add New Plugin.
Adding a new plugin to WordPress
  1. In the search bar Type Ninja form.
  2. Click Install Now, then Activate.
Activating the Ninja Forms plugin

Next, click the Ninja Forms menu item, then select Add New.

Adding a new Ninja form

Choose from the many templates they offer, or select a blank form that you can customize.

Choosing a Ninja form template

After reviewing your form, click Publish.

Publishing a Ninja form template

This action will redirect you to the main Ninja Form page.

Copy the shortcode of your desired Ninja Form. Embed the form in your web pages by pasting the code into the shortcode widget of your web page builder. You can create a new form to customize it how you prefer.

Copy the shortcode:

Copying the ninja form shortcode

Paste the shortcode in Navigation in Ninja Forms.

Ninja Forms Tracking with Google Tag Manager

As mentioned in the introduction, Ninja Forms tracking with GTM is the most recommended way, and therefore the one we’ll cover.

The reason the Enhanced Measurement’s automatic solution isn’t the most reliable (for now) is that it poses several problems, including sending a form submission event that isn’t one.

This often happens when the user starts filling out the form fields or, conversely, when they click the submit button without filling out the form.

However, if this solution proves useful for your current or urgent needs, take a look at our post on Automatic Form Tracking in GA4.

Here’s the plan:

  1. Create a CHTML Tag & Trigger

Here we’ll be using a custom tag for Ninja Forms submission tracking to see how the tag works.

  1. Sending a GA4 Ninja form Submission Event

After testing the Custom HTML tag, we will move on to create a new tag and trigger to send a form submission event to GA4.

Moving on to the second method, the one we recommend.

Before going into GTM, make sure you’ve turned off the form submission feature in GA4. This is to prevent sending duplicate events if you configure it separately in GA4 and GTM.

Create a Custom HTML Tag & Trigger

At this moment, if you were to use the Preview Mode of GTM and test the form, nothing would occur. This is the reason why our first step consists of using the following code enhanced by our colleague from MeasureSchool Praba.

<script>
jQuery(function($) {
  $(document).on('nfFormSubmitResponse', function(e, r) {
    var formData = r.response.data,
      formId = formData.form_id,
      formName = formData.settings.title,
      submissionId = formData.actions.save.sub_id;

    dataLayer.push({
      event: 'ninja_form_submission',
      form_id: formId,
      form_name: formName,
      form_submission_id: submissionId
    });
  });
});
</script>

This code snippet captures Ninja Forms submissions by using an event listener with jQuery. It listens for the ‘nfFormSubmitResponse’ event. When this event is triggered, the code is executed.

In GTM, go to TagsNew.

Creating a new tag

Click Tag Configuration.

Clicking Tag Configuration

Under Choose tag type, click Custom HTML.

Clicking Custom HTML

Paste the code.

Pasting the custom HTML code

Nothing will show up in GTM without a trigger for this tag. Since we’re still just testing things out, let’s create a generic trigger that will work on all pages.

Click the Triggering space.

Triggering space

Select All Pages.

Selecting all pages

Give your tag a descriptive name.

Tag naming convention example

Click Save.

Testing the Form 

Let’s fill out and submit a Ninja Form, to see what happens on the Google Tag Manager side.

First, in your workspace, click Preview at the top right corner of your screen. Insert the URL of the page where your Ninja Form is.

Fill out your form and click submit.

Filling a Ninja form

A success message will appear.

Ninja form success message

In Tag Assistant, you’ll see the result of the event listener from the code provided earlier. To get more information about the details pushed into the Data Layer form:

  1. Click the ninja_form_submission in the left navigation.
  2. Click the API Call dropdown arrow.
Ninja form submission event

In the API Call section, the event for the dataLayer push is “ninja_form_submission.” This is why you see it in the navigation.

Sending a GA4 Ninja Form Submission Event

Creating the GA4 Tag

First, follow the same steps we did to create the Custom HTML tag, except choose Google Analytics: Tag → New → Tag Configuration → Google Analytics.

Selecting the Google Analytics tag

Insert or paste your GA4 measurement ID. In GA4, you can find your measurement ID by going to Admin → Data collection and modification → Data streams.

Then, click your data stream and copy your measurement ID.

Copying the Measurement ID

You can follow our naming convention for the Tag name and the GA4 event name.

🚨Note: Generally, the best practice for naming the event for leads form submission in GA4 is generate_lead. This is based on GA4 recommended events.

For this guide, we created the generate_ninja_lead event name just for clarity.

GA4 event tag example

GTM Triggers for Ninja Forms

For our trigger, we’ll need to use a Custom Event trigger type. This is because the ninja_form_submission event appearing in the Tag Assistant’s left navigation is an event that doesn’t show up using standard methods.

To create the Custom Event trigger, click the Triggering box.

Triggering area

In Choose a trigger, click the plus sign +.

Choosing a trigger plus sign

Click the Trigger Configuration box. Under Choose trigger type, click Custom Event.

Choosing Custom Event trigger type

Here’s how your Custom Event trigger should look:

Custom Event trigger for Ninja forms

🚨Note: Unlike GA4 event names, here you’ll need to use the exact name pushed in the Data Layer.

You can copy and paste it from the API call we expanded when testing our form using the Custom HTML tag.

Copying Ninja form submission event

Now there are two considerations: the trigger configuration and a Custom Event.

If you only have one type of Ninja form, you can leave your trigger as it is, which says: This trigger fires on All Custom Events.

However, if you have multiple Ninja forms, you’ll need to refine your trigger, and for that, we’ll require the GTM Data Layer Variable.

Creating the Data Layer Variable (Optional)

If you need to distinguish between your various Ninja forms, you’ll need to use the Data Layer Variable. Fortunately, the code we use pushes the Ninja forms ID into the Data Layer.

This Data Layer variable will enable us to read that value, which we can then use as a condition for our trigger.

Go to Variables. In User-Defined Variables, click New.

New user-defined variable

Click the Variable Configuration box. Select Data Layer Variable.

Selecting the Data Layer Variable type

You can follow our configuration.

Data Layer Variable configuration

The form ID key is found in your code or the Data Layer.

Form ID key in the Data Layer

Now we’ll have to adjust our Custom Event trigger. Make sure to enter the value of your form_ID, which in our case is “1.”

In your Custom Event trigger, click Some Custom Events. Here are the conditions: DLV – Form ID equals 1. As you can see here:

Custom event trigger with form ID condition

Click the Save button at the top right corner.

At this point, you can consider the setup almost complete. However, nothing is truly finished until we run some tests. Let’s enable Preview mode again in GTM, so we can fill out and submit the Ninja form.

In Tag Assistant, we can see that our tag fired.

Successful GA4 Ninja form submission event

Summary

Ninja Forms are another popular type of form you might need to track someday. In this post, we covered what they are and two ways for Ninja Forms tracking.

The first method is through GA4’s built-in features in Enhanced Measurement, and the second is by using GTM, which we recommend.

Tracking forms can often be trickier than expected, and different types often require different solutions since there’s no one-size-fits-all solution.

To assist you, we shared our approach to tracking Forms with Google Tag Manager and GA4. It is a good idea to check out the section on form tracking using an Element Visibility trigger if, for any reason, what we covered here didn’t work.

How have tracking forms worked for you? Let us know in the comments below.

Sign up to the FREE GTM for Beginners Course...

[wpforms id="9076262" title="false" description="false"]

Eric Huguenin

Eric is a web analytics content creator at MeasureSchool. He holds certifications in Google Analytics and Google Tag Manager at the CXL Institute. He enjoys breaking down marketing topics into easier-to-understand articles.

Related Posts

Subscribe
Notify of
guest
3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Rodrigo Marquez
Rodrigo Marquez
2 months ago

Thank you very much, very useful!

eric
eric
2 months ago

Thanks, glad you liked it !

mike
mike
2 months ago

Can you just set it so we can add our google ads conversion code to the thank you message please, it will save people hours but it doesn’t work for some reason

NOW IT'S TIME TO

Start Measuring Like A Master

Itching to jump into the world of MeasureMasters? This is what you have to look forward to.

Ready to take your digital marketing to the next level?

Subscribe to our newsletter and stay ahead with our latest tips and strategies.