Ninja Form Tracking with Google Tag Manager and Google Analytics

Ninja Forms is one of the popular forms on WordPress. If you’re interested in tracking Ninja Forms and need to capture form submission events and user input values to enhance conversion tracking, then this tutorial is for you.

Ninja Form DataLayer Coder

<script>
/**
* Author: Md Hasanuzzamna
* Linkedin: https://linkedin.com/in/md-h
* Youtube: https://youtube.com/@leomeasure
* Email: info@leomeasure.com
*/

(function() {
  function convertNinjaFieldsToInputs(fields) {
      var inputs = {};

      for (var key in fields) {
          if (fields.hasOwnProperty(key)) {
              var label = fields[key].label;
              var slug = label.toLowerCase().replace(/ /g, "_");
              var value = fields[key].value;;

              if(slug === 'phone') {
                value = value.replace(/[\(\)\s-]/g, '');
              }

              inputs[slug] = value;
          }
      }
      return inputs;
  }


  jQuery(document).on('nfFormSubmitResponse', function(event, responseData, id) {  
    dataLayer.push({
      event: 'ninja_form_submit',
      form_id: responseData.id,
      inputs: convertNinjaFieldsToInputs(responseData.response.data.fields),
    });
  });
})()
</script>

Preview it

Submit the form in preview mode

We wil send form ID to google analytics

Create a variable now

Trigger

Now create a tag

Now preview it

Fill up the form again

Now, we will show how to collect information like email, first name or last name. lets collect the email first

Now, for phone number

For First Name

For last name

Now, preview it

For the fillup again

Now, create tag for Google ad conversion