Ninja Forms Event Tracking with Google Tag Manager

Tracking Ninja Form submissions as Google Analytics goal conversions is a bit complex when using Google Tag Manager. This post will show you how to set up tracking, log the form ID on submission, AND only track conversions when the form is actually submitted.

Step 1: Create a GTM Tag that pushes a Data Layer event when the form is submitted successfully.
Step 2: Create a GTM Trigger that looks for the Data Layer event when the form is submitted, and triggers a second GTM Tag.
Step 3: Create a second GTM Tag that looks for the Data Layer push and creates Google Analytics Events.
Step 4: Create a form ID Data Layer Variable so that we can capture form ID.
Step 5: Set up a Goal Conversion in GA based on the GA Event from Step 3.

Step 1: Create Tag #1

The first tag is just a bit of Javascript that listens for a form submission. When the form is submitted, it sends a DOM event called nfFormSubmitResponse – this event is only triggered when the form is actually submitted. Log into GTM and create a new Tag (I’ve called mine nfFormSubmission) with the following configuration:

Tag Type: Custom HTML

Add the following code:

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

Triggering: All Pages

This listens for the nfFormSubmitResponse DOM event and fires an event into the Data Layer called “ninjaFormSubmission.” It also captures the form ID in the Ninja Forms shortcode and pushes it into the Data Layer too (in the screenshot below, that ID is “2”). The form ID is what will allow you to create different Goal Conversions for different forms – we’ll revisit that in later steps.

Step 2: Create a GTM Trigger

Next, create a Trigger for the Tag you’ve just created. I named mine Ninja Forms Trigger.

Trigger Type: Pick Other – Custom Event from the default list. We’ll use the event we created in Tag #1 as the trigger event.

Event Name: ninjaFormSubmission

This Trigger Fires On: All Custom Events

This uses the custom Data Layer event from Step 1 to trigger a Google Analytics event tag that we will setup in Step 3.

Step 3: Create Tag #2

Create another tag and name it whatever you want (I used “Ninja Form Submission”). Fill out the following fields as such:

Tag Type: Universal Analytics

Track Type: Event

Category: You can set this as whatever you want and that’s what it’s going to show up as in Google Analytics when you go to the Events report. I named mine contact-form.

Action: I picked ninja-successful-form-submission.

Label: If you want to track different forms separately, you need to set this as form-id-{{NFformID}} and follow the rest of these instructions closely.

Value: I did not add a value.

Non-Interaction Hit: I recommend selecting False – this will prevent the session from be counted as a bounce if the visitor only looks at one page, but completes a form submission before leaving.

Tracking ID: Your tracking ID. I have mine set up as a variable, which explains why it says {{GA Tracking Code}}

More Settings & Advanced Settings: If you’re an analytics wiz, there are advanced settings in here that you may want to configure. However, I did not change any of them.

When you’re done, you’ll end up with this:

Step 4: Create a Form ID Data Layer Variable

In Step 2 we pushed the form ID into the Data Layer when the form is submitted. Now we need to capture the form ID and get it into GTM and into our Google Analytics Events. 

Add a new User-Defined Variable called NFformID.

Variable Type: Data Layer Variable

Data Layer Variable Name: NFformID (case sensitive).

Submit (publish) your updated GTM workspace and then we’ll move on to Google Analytics Goal configuration!

Step 5: Setting up the Goal Conversion(s)

In Google Analytics and navigate to Admin > View > Goals. Click +New Goal and set it up as such:

Goal setup: Select Custom

Goal description:

Name: Call it whatever you want. I’ve called mine Ninja Form Submission.

Type: Select Event.

Goal details:

Category: Equals to > contact-form

Action: Equals to > ninja-successful-form-submission

Label: Select the form ID of the form you want to track. If you don’t want to track different forms separately, you can leave this blank. Mine was form-id-2.

Value: You can add a monetary value here if you’d like.

Use the Event Value as the Goal Value: If you set up a Value in ad a value attached to each event, you could set that up here. Since I did not, I will not.

Save the Goal Conversion and you’re done. If you want to set up other goals for different form IDs, just repeat the process but change the Label in the Goal Conversion.

Lastly, test the implementation by doing a couple test submissions on the site. You can use GA’s real time reporting to look for events firing. If you’re not seeing them, make sure you’re not excluding traffic with filters or opt-out extensions in your browser. For a mostly foolproof solution, submit the form on a mobile device using a data connection (no wifi), and use a completely unfiltered GA view to watch for the event.

Get Ninja Forms!

Using Contact Form 7 instead? See how to track CF7 form submissions with GTM and GA.