was successfully added to your cart.

Cart

Ninja Forms Event Tracking with Google Tag Manager

By March 5, 2018 Analytics

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.

Ninja Forms

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 submittedLog into GTM and create a new Tag (I’ve called mine nfFormSubmission) with the following configuration:

Tag Type: Custom HTML

Add the following code:

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!

Ninja Forms

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

Chris Berkley

About Chris Berkley

Chris is a digital marketing consultant specializing in SEO and Analytics across industries including healthcare, education, finance and others.

35 Comments

  • Ida says:

    I believe I’ve followed everything here, and am using this for multiple forms, so have set up and defined separate goals. While I see the individual tags firing in Tag Assistant, nothing is actually being reported to / in Google Analytics.

    Looking online for insight on a potential fix, I’m seeing other code configurations, most of which include something that starts like this:

    ga(‘send’, ‘event’,

    Not familiar with javascript itself, I’m now wondering whether there’s some other element I should have set up in my tag manager but am unaware of and/or have somehow overlooked.

  • Mike says:

    Thanks – works!

    You figure GTM would have this covered with their form submission trigger eh?

    • Chris Berkley says:

      It’s not really GTM’s fault – most forms fire a submit event when you click the ‘Submit’ button but they don’t validate whether the form was submitted properly. My experience is that a lot of development is performed without Analytics in mind.

  • Tommy says:

    Hi Chris Berkley,

    Thx for the guide – works perfect here 🙂

  • Racheal says:

    Hello Chris! Thanks for this tutorial. It definitely put me many steps closer to tracking Ninja Forms. I’m currently having one small problem. I’m attempting to track 2 forms. When I test one form tag by submitting the form – both form tags fire. Where have I gone wrong? Any assistance/advice is welcome!

    • Chris Berkley says:

      You should only have 2 GTM Tags to track Ninja forms – the custom JS tag and the Universal Analytics tag that creates GA events. Did you create additional GTM tags? That second tag will dynamically send the form ID into GA as an Event Label, with the corresponding form ID. So you set up GTM one time and then configure GA Goal Conversions based on the different form IDs in the Event Label.

      • Racheal says:

        Yes – I did. So that is probably where I went wrong. Unfortunately this is too complicated for me to get it to work properly. I’ll just track the submit button clicks instead. Obviously not as good, but easier.
        Thanks for your help!

        • Chris Berkley says:

          I wouldn’t recommend tracking button clicks for a bunch of reasons. Plus, you’ve already done 90% of the work. Set up GTM one time (steps 1-4) then repeat step 5 as needed to setup different Goal Conversions. You can set up multiple Goal Conversions by changing the Goal Conversion Label to track different form IDs.

  • Benjamin says:

    Hi David, the listener works fine but not the form tag. Could it be because the form is in a popup? The div id is: contact-form-wrap.

    The response message is: Tack! Ditt meddelande har skickats och vi återkommer till dig så snart vi kan.

  • David says:

    Hi Chris, thanks for this article works really well.

    Can I ask, for step one, is there any way you can edit the code and also push through the name of the form (So I can add it into as a DLV)?
    – The reason I ask this, is because I want to take it up a notch (because I’m lazy) and make GA show the label as the name of the form 😛
    – I am able to correspond it to lookup table variable, but thought might be an easier way to just push it through the first DL push

    • Chris Berkley says:

      It may be possible, I don’t know. I had to reach out the Ninja Forms team just to get the data I needed for this process (their documentation wasn’t very clear). Their customer service is great, however!

  • Mordechai says:

    Hi Chris,
    Having some trouble. On a form submission the event data is being sent to analytics and is being recorded. However, the goal we setup is not being converted? When I check the datalayer, the appropriate NFformID is coming through so I am not not sure what is going on.

    Appreciate your help,
    Mordechai

  • Mordechai says:

    Hi Chris,
    We followed the instructions you provided. We are able to see the Event we created (our Contact-Us as a result of the ninja-successful-form-submission) but our Goal Conversions (Ninja Form Submission) are not coming through.
    Any assistance you can provide would be appreciated.

    Thank You,
    Mordechai

  • Jane says:

    Thank you so much, still works! I’ve added GA Tracking ID as a constant variable too. Works great. 🙂

    Tried to get the Form Title from response.data.settings.title but it’s unstable and throw out JS errors more times than working fine. Gave up on trying to retrieve the title for the time being.

  • Hi Chris – thanks for this tutorial. I got it all set up however it is not working for me. I use Popup Maker with Ninja Forms – so the forms are a popup, could that be the issue? Do you have any other info that could help me set this up correctly? Thanks, in advance!

  • srijith says:

    Hi Chris, the code is working for me, however i need Form title and not Form ID, how do i do that. Any suggestion.

    • Chris Berkley says:

      I’m not familiar with any methods to capture form title. When I emailed the team at Ninja forms, they didn’t indicate form title was a field that could be grabbed.

  • Ben Carew says:

    Hi Chris
    I just tried to repeat the process for a second Ninja Form (with ID 3) and I repeated all steps in Tag Manager and GA as described above. I didn’t create another User-Defined Variable called NFformID because I assumed it could be reused for the second form.

    When I tested it in real time events however the form 2 event triggered instead of the new form 3 event.

    Any ideas?

    Thanks in advance.
    Ben

  • Ben Carew says:

    It definitely does work, as does the Contact Form 7 instruction with Google Tag Manager.

    Thanks Chris!

  • Matt says:

    Thanks Chris, this worked a treat. I tried implementing the ‘Form Submission’ trigger on the form, but GTM didn’t seem to register it. I was able to get the trigger with your instructions. Thanks for the post.

  • Ron Herren says:

    Two things people whom can’t get this to work may be missing:

    1. In Step 3, the {{GA Tracking ID}} needs to be your Google Analytics Tracking ID; not a variable (unless you’ve defined that variable, of course.)
    2. Have you set-up your dataLayer above your GTM container per …developers.google.com/tag-manager/devguide ?

    • Hi Ron – could you help a little more with setting the data layer above the GTM container? It is just including the code from the 1st step above my GTM container (in my case in wordpress)?

      • Chris Berkley says:

        Implementing the datalayer above the GTM container isn’t relevant here because you’re firing the datalayer Javascript push through GTM.

  • Miskandar says:

    Hi Chris,
    Thank you so much for your helpful article…!
    I have read your article and tried to track Ninja Form Submission of my client’s website.
    i can view NFformID on User-Defined Variables
    Even though I cannot view event data is being sent to Real Time – Events on GA, but I can view it on Goals conversion setting.

    Once again thank you so much for sharing this article!

  • Tim Greenhalgh says:

    This doesn’t work its triggered nothing on google analytics and didn’t work on the site in preview. Very disappointing

  • David says:

    This doesn’t work. On submission no event data is being sent to analytics. When I check the datalayer there is no NFformID being included.

  • Mantas says:

    Does not work 🙁

Leave a Reply