Ninja Forms + Segment integration | Sending Ninja Forms data to Segment

Juan Growth Marketing

So, it turns out people really enjoyed the $0 Growth Marketing Stack post.

I got about 100 signups (read 80), 3 contracting jobs and a couple of job offers on the back of it.

True story.

Most of the people who paid, or tried to pay since I refunded them all, were stuck modifying Ninja Forms to send data to Segment.

In this tutorial, I’ll go over how I integrated Ninja Forms to Segment for free, step by step.

PS, if you want personalised assistance you can book me by the minute

Ninja Forms + Segment Integration Requirements

  • Send conversion data to Segment only when a form is submitted successfully.
    • This means I’m not trying to just track clicks to the ‘Submit’ button, I want to track actual submissions.
  • Send conversion data to Segment without relying on a Thank You page redirect. 
    • ie, track conversions when you don’t have a thank you page.

Constraints

  • Cheap or free

My Solution

I’ll explain the process at a high level to begin with.

Ninja Forms is extensible, and has several add-ons that make it easier for non-technical users to create forms.

After a bit of searching through the Ninja Forms documentation, I found a link to this Ninja Forms Google Analytics plugin.

What the plugin does is:

  1. Someone completes the form
  2. The form entry is validated/confirmed as successful
  3. The NF Google Analytics plugin fires a the standard GA event
    ga( 'send', 'event', 'form', 'submit', formTitle );

What I’ve done is replace the google analytics event with a Segment event. See below if you need a more detailed explanation.

Implementation

I could package up and send you the plugin, but in this tutorial you’ll edit the code yourself so you can actually understand and learn what’s going on.

I’ve split the implementation into two stages. Stage one is modifying the Ninja Forms Google Analytics plugin and uploading it to your site.

Stage two is creating the actual form you’ll embed on the site so that it feeds the data to Segment.

So here we go:

Stage one, modifying the Ninja Forms plugin

Bear in mind your own set up will be different, you’ll need to adjust the code below to make it your own so that it makes sense for what you’re doing.

However, going through the steps will teach you what you have to do to make it your own:

  1. First of all, install Ninja Forms on your WordPress site an activate it
  2. Next, download the Ninja Forms plugin to your computer
  3. On your computer, go to the plugin folder and find your local version of the file called nf-ga.js
  4. Open that file in a text editor (I use Brackets but you can use any text editor) and go to line 18: line 15 of the file

Change line 18 (ie everything between try { } to the following (There are better ways to do this (ie for each form field, do x) but I though this was a good way to teach what is happening.):

//Find form values  
//Syntax - Segment event name = Ninja Forms fields 
var firstName = document.querySelector(".firstName").value;
var lastName = document.querySelector(".lastName").value;
var email = document.querySelector(".formEmail").value;
var eventName = document.querySelector(".eventName").value;
var eventValue = document.querySelector(".eventValue").value;
var formPhone = document.querySelector(".formPhone").value;
var productID = document.querySelector(".productID").value;
  
// Now send the Segment identify call
// First make the emails lower case          
analytics.identify(email.toLowerCase(), { 
             
// Syntax - trait:Variable with form value
firstName:firstName,  
email:email.toLowerCase(),
lastName:lastName,
phone:formPhone,
productID:productID
});  
          
// Syntax - property:Variable with form value        
analytics.track(eventName, {  
revenue:Number(eventValue),
productID:productID
})
  1. Save the file. Exit the file. Re-zip the plugin folder.
  2. Upload and install your modified plugin zip file in WordPress, then activate it.

I’ll write a post explaining in more detail how Segment works, but you should visit their documentation to work it out in the meantime. Understanding Segment is important in order to follow this tutorial as well as the previous one.

For example, here are Segment’s common fields. Those fields are ‘reserved’ variable names which Segment itself uses (i.e. firstName, lastName, etc…). I’ll write more about this in the near future.

And with that, we’ll move on to stage two.

Stage two, setting up Ninja Forms embedded form and custom fields to send data to Segment

Ok, so now you have Ninja Forms installed, as well as the modified Ninja Forms Google Anlytics plugin.

Now, we need to create an actual form.

In order for the plugin to work, we need to add a specific class to each relevant form field.

Let’s take a break here, please have a look at these lines of code, similar to those in the plugin:

var email = document.querySelector(".formEmail").value;
var firstName = document.querySelector(".firstName").value;

and

analytics.identify(email.toLowerCase(), {
firstName:firstName
});

The words in red tell our plugin which form fields to get data from for each variable, and the variable names are blue. Variable names are arbitrary you can use any variable name you want.

The word in green is how we’re labelling that data for Segment and every other tool in the stack.

This is basically the logic that makes up the relationship between the form, Segment and the rest of your tools!

So, let’s tie it all together.

  1. Create a new Ninja Form
  2. Add the following Text fields:
    1. First Name
    2. Last Name
    3. Email
    4. Phone
    5. Event Name (what I will call that event across all the tools, signed up for example)
    6. Event Value (numerical for me $)
    7. Product ID (internal reference)
  3. For each of those fields, go into the edit field menu, click on the ‘Display’ drop down and add the corresponding class name to element field, like so: Ninja Forms Segment Integration Note: Whatever you put in each Element Field needs to match exactly what you put in the plugin code!
  4. Save the form
  5. Embed the form somewhere on the site and test it out.
  6. If it’s correct, you should see an event come through as well as an ‘identify’ call in Segment.
  7. Style the form, you can hide those fields with CSS so the users can’t see them

Once you’ve done it and get it, you should go back and make it your own.

For instance, you might want to use different event names, or not use as many fields. It’s up to you.

All you’d need to do is remove the unnecessary fields from both the Ninja Form and the Plugin lines that reference them, or vice versa if you wanted to add new ones or change the labels.

Conclusion

It’s a little fiddly at first, but once you get what’s going on hopefully you can develop your own plugin or maintain this yourself. Understanding the logic behind it is actually what’s important, since the way this stuff is implemented varies a lot from business to business.

Share this post