Utilising forms on your website is a fool proof way of converting site visitors into paying customers. The Ninja Forms Plugin for WordPress comes with a wealth of easy to use tools to customise your forms to fit your brand and get the need to know details from your customers that will help you make more sales more often.

Adding Event Tracking for Ninja Forms

Let’s explore the code itself, what it does, and how you can implement it on your website.

The Code

  <script>
    jQuery( document ).ready( function() {
        //Setup our on formSumbit Listener.
        jQuery( document ).on( ‘nfFormSubmitResponse’, function() {
            //Do Stuff
            ga(‘send’, ‘event’, ‘Email List’, ‘Subscribed’, ‘New Subscriber’);
          });
    });
  </script>

view rawformSubmit.js hosted with ❤ by GitHub

What Does This Do, Exactly?

This snippet is saying that, on the click of any input element where type=button, Google Analytics is sent an event notification with the following information:

  • Event Category = Email List
  • Event Action = Subscribed
  • Event Label = New Subscriber

You can see those defined (and can change them to suit your need) in line 5 of the code above.

Each Ninja Forms Submit button is an input element where type=button, which you can see by using your browser’s Inspect Element tool as so:

As written, this code will fire anytime any Ninja Forms Submit button is clicked. What if you have multiple forms for different purposes, though?

Getting a Little More Specific

If you wanted this to fire for a specific form only, rather than every Ninja Form, you can modify line 4 of the code snippet. Replacing ‘input[type=button]’ with an individual submit button’s id will cause event tracking to fire only when that specific submit button is clicked.

You can use your browser’s Element Inspector to get the id of the individual submit button. In the screenshot above, you can see in the highlighted area the id of the submit button I targeted: nf-field-26. Denoting that as an id by using #, we would then use ‘#nf-field-26’ in line 4, as so:

  <script>
  jQuery( document ).ready( function() {
    jQuery( document )
    .on(‘click’, ‘#nf-field-26’, function() {
    ga(‘send’, ‘event’, ‘Email List’, ‘Subscribed’, ‘New Subscriber’);
    });
  });
  </script>

view rawMore Specific Event Tracking hosted with ❤ by GitHub

Great, Now What Do I Do with This Code?

It needs to live in your theme’s footer.php file. If you’ve not already made a child theme, now’s the time to make one. Otherwise, your event tracking will break the next time you update your theme. Just create a footer.php for your child theme, and add your code there.

If you’re not used to modifying your files, it’s not hard. You’ll need:

  • An FTP client to access your server’s files
  • A text editor like Sublime Text.

That’s all there is to it. I certainly do hope this is useful for many of you- I know that the event tracking for Ninja Forms via plugin article was pretty popular and I got a lot of disappointed feedback from folks it wasn’t working for.

Bonus!

Our senior developer Kyle worked with Dustin initially on getting this piece of code together. If you’d like a free plugin that does the work of this code for you, you can check out Kyle’s Github and download it from there. Thanks Kyle! Note that this WordPress plugin does not enqueue or configure Google Analytics, you’ll need that done already via another plugin or inserting the GA code in your site per their documentation. Also note that we do have a full featured GA extension in the pipes for Ninja Forms, though that has not progressed to the point where I can offer a timetable for it at this time.

Ninja Forms offers a broad range of tools for creating eye catching and professional built-in forms for your website. The Ninja Forms membership and additional add-ons help you to add sophisticated forms to your site like the experts. Helping your customers reach you directly and streamlining the process of getting their contact details.

Try Ninja Forms

Sponsored Content: This post is sponsored content and the placement has been paid for or contains affiliate links. For full information, see our terms of use