Ninja Forms

Ninja forms (2020)

With the latest release of Ninja Forms the method in how these forms are being submitted has been changed, the below documentation will explain how to get the forms submitted to Ruler.

👍

*Note, older versions of Ninja Forms will still submit through our automated tracker, so we shouldn’t have to implement the below, you will also need the full version of JQuery enabled on your site.

Similar to how our other Manual Tracking methods work, we need to populate the JSON object with the form inputs that you wish to be tracked from the Ninja Form. Below are some examples of how this can be achieved.

JavaScript

<script type="text/javascript">
  var RulerAnalyticsPayload = {
    action: 'convert',
    variable: 'PopulateWithVariable',
    variable1: 'PopulateWithVariable' 
  };
</script>

📘

Variable - This should be the variable you wish to pull from the form on site, such as Email Address, Name, Phone Number etc. You can choose which variables you wish to populate here.

'Populate with Variable' - Please note this requires you to use your websites language to pull the variables from the form submission on your website. Leaving this blank will not pull through your submitted values, examples below.

The RulerAnalyticsPayload object is fully customisable, we just require that the action: ‘convert’ always be available within the object, the object can be populated with a number of methods, below are just some of the common approaches:

Vanilla JavaScript

JavaScript

<script type="text/javascript">
  var RulerAnalyticsPayload = {
    action: 'convert',
    Variable: document.getElementById(‘PopulateWithVariable’).value,
    variable1: document.getElementsByClassName(‘PopulateWithVariable1’)[0].value
  };
</script>

JQuery

JavaScript

<script type="text/javascript">
  var RulerAnalyticsPayload = {
    action: 'convert',
    Variable: $(‘#PopulateWithVariable’).value, 
    variable1: $(‘.PopulateWithVariable1’)[0].value 
  };
</script>

PHP

Text

<script type="text/javascript">
  var RulerAnalyticsPayload = {
    action: 'convert',
    Variable: <?php echo(PopulateWithVariable) ?>, 
    variable1: <?php echo(PopulateWithVariable1) ?>
  };
</script>

🚧

If you find you have an input that only has the class attribute we recommend that you print the class array that is returned so that you can make sure you are accessing the correct index of the array for the input. In the example we are accessing index or position 0 of the array, which relates to the first class within the list. There are many other ways in which you can get the value from your elements, we recommend you look up the methods via google or contact us for assistance.

Final Example

Text

<script type="text/javascript">
   jQuery(document).ready(function(){
       jQuery(document).on('nfFormReady', function( e, layoutView ) {
           jQuery('input[type="submit"]').bind('click touchend', function(e){
               var RulerAnalyticsPayload = {
                   'action': 'convert',
                   'VARIABLE': document.getElementsByClassName('PopulateVariable')[0].value,
                   'VARIABLE1': document.getElementsByClassName('PopulateVariable1')[0].value
               }; 
               RulerAnalytics.trackConversion(RulerAnalyticsPayload,"","",500);
           });
       });
   });
</script>

📘

If you require any assistance or have any questions please contact our [Support Team](mailto:[email protected]?subject= NinjaForms%20Integration)