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.

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).

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!

6 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.

Leave a Reply

Your email address will not be published. Required fields are marked *