Powerful Event Tracking for Ninja Forms Made Easy

Want to implement Google Analytics event tracking for Ninja Forms but don’t want to fool with a plugin? Tired of beating your head against a wall trying to figure out how to do it? I’m thrilled to say that there is now a solution!

We ran an article a while back that looked at how to use a plugin to set up event tracking for Ninja Forms. Even though it worked fine in testing, your feedback made it clear that wasn’t the case in many of your own WordPress installs, and that’s where it counts. For those of you who had no luck going the plugin route or just prefer not to use a plugin, another solution was needed.

What follows is a simple method to start event tracking for Ninja Forms using a short snippet of code placed in your theme’s footer. A huge thank you is due to Dustin Stout of Warfare Plugins for taking the initiative to parse this code out and get it working with us. Let’s check it out now!

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

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:

event tracking for ninja forms submit button html

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:

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:

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.

What other Google Analytics related things would you like to hear about for Ninja Forms? How do you use GA with us? Let me know and we can explore integrating GA further down the road. Best of luck and happy tracking!