Tracking Ninja Form Submissions with Google Analytics & JQuery

Form plugins for WordPress are great. They make it incredibly quick and easy to deploy enquiry forms with minimal effort. However, as you may have seen in my previous posts, many of the plugins often lack easy integration with Google Analytics or Google Tag Manager. While many plugins provide the ability to redirect customers to a dedicated “Thank You” page upon successful form submission/validation, more often that not I see the default AJAX-style response which simply displays the ‘Thank You’ message on the same page.

Ninja Forms fits directly into this category. It’s possible to redirect customers to a dedicated confirmation page after successful form submission, and it’s possible to customise the AJAX confirmation message if not using the redirection method; however, there are no default options for triggering Events within Google Analytics. Fortunately, jQuery can come to our rescue.

Note: there is a post on the Ninja Forms website – https://ninjaforms.com/event-tracking-for-ninja-forms-no-plugin/ which addresses this issue, but the problem with this code is that is triggers the Google Analytics event each time the ‘Submit’ button is clicked, regardless of whether the form successfully validated or not.

Triggering Google Analytics Events with jQuery for Ninja Forms

The following code is a quick and easy method of utilising jQuery to trigger a custom Google Analytics ‘Event’ once the Ninja Form has been submitted and validated.

Universal Analytics

Global Site Tag

Tag Manager

This code will work regardless of whether you are using 1 or 100 Ninja Forms. Here, we’re using the form title variable ‘form.data.settings.title’ to differentiate between the form submissions, allowing you to configure goals within Google Analytics based on the event label to differentiate each type of form. (FYI we’re also adding a lot to the console for debugging purposes, but this can be omitted if required).

Also bear in mind that if you’re using Google Tag Manager the syntax will send the data to Tag Manager, but you’ll need to create a ‘Custom Event’ trigger and a relevant Tag to capture this data and forward to Google Analytics.

To enable the code, simply include it within the footer file of your WordPress theme (usually footer.php) ahead of the closing body tag.

That’s it. It’s that simple!

9 thoughts on “Tracking Ninja Form Submissions with Google Analytics & JQuery

  • Hi Chris,
    What if the site is using the Global site tag (gtag) Analytics implementation? Do you suggest using the code:
    jQuery( document ).on( ‘nfFormReady’, function() {
    nfRadio.channel(‘forms’).on(‘submit:response’, function(form) {
    gtag(‘event’, ‘submit’, {‘event category’: ‘form’, ‘event label’: form.datasettings.title});
    console.log(form.data.settings.title + ‘ successfully submitted’);
    });
    });

    • Hi Mike,

      Are you using Paul’s amended code for the Global Site Tag as opposed to the original code snippet? If so, I think there’s a slight error in his script.

      This line:
      gtag(‘event’, ‘submit’, {‘event category’: ‘form’, ‘event label’: form.datasettings.title});

      Should have been:
      gtag(‘event’, ‘submit’, {‘event category’: ‘form’, ‘event label’: form.data.settings.title});

      Note the addition ‘.’ between the words ‘data’ and ‘settings’.

      Try that and let me know if it works.

      Thanks,

      Chris

  • Thanks for the info here Chris – this is so close to working however I’m not seeing the Form title appearing in Analytics (it does show up in console however). This is what I get in analytics (gtag):
    Category: general
    Action: submit
    Event Label: not set.
    So close to working!

    • Hi Austin,

      Definitely sounds like something has broken! Can you provide a link to your website so I can dig a little deeper?

      Thanks.

      • Was anything solved regarding this query? I am getting exactly the the same issue…

        category: general
        action: submit
        label: (not set)

        I’m using the below code:

        jQuery( document ).on( ‘nfFormReady’, function() {
        nfRadio.channel(‘forms’).on(‘submit:response’, function(form) {
        gtag(‘event’, ‘submit’, {‘event category’: ‘form’, ‘event label’: form.data.settings.title});
        console.log(form.data.settings.title + ‘ successfully submitted’);
        });
        });

        • Hi Adam,

          Unfortunately Austin didn’t get back to me and I’ve been unable to replicate the issue. I’ve used this on multiple occasions and not had the issue that you and Austin have described, so it’d be good to understand how/why people are experiencing this issue.

          My guess is that perhaps you guys are using alternative versions of Google Analytics tracking (i.e the code that you provided is for the Global Site Tag, but perhaps you’re using Universal Analytics or a different version?); but I’m getting – I’d like to find the answer!

          Any chance you can provide the URL where this is happening so I can review and debug it?

          Thanks.

  • OK. I’ve finally managed to replicate the “Category: general, Action: submit, Event Label: not set” issue and the fix is easy.

    The code provided for the Global Site Tag was missing underscores for ‘event_category’ and ‘event_label’.

    Old Code:
    gtag(‘event’, ‘submit’, {‘event category’: ‘form’, ‘event label’: form.data.settings.title});

    Revised Code:
    gtag(‘event’, ‘submit’, {‘event_category’: ‘form’, ‘event_label’: form.data.settings.title});

    That’ll fix it for anyone experiencing this issue.

Leave a Reply

Your e-mail address will not be published. Required fields are marked *