A short introduction
Ninja Forms is a popular plugin for WordPress that allows you to create and customise various forms on your website. In this post, we will look at how to set up Ninja Form tracking using Google Tag Manager.
We have already looked at the Contact Form 7 tracking setup process. Ninja Form tracking set up will be similar, only the event listening code will be different.
Post contents:
- Ninja Form events listening
- GTM variable set up
- GTM trigger and tag set up
- Google Analytics dimension set up
Ninja Form events listening
Firstly, we need to install the listening code on the website pages:
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> jQuery(document).ready( function(){ jQuery(document).on('nfFormSubmitResponse', function(event, response, id){ dataLayer.push ({ 'event' : 'ninja_form_submit', 'form_id' : response.id, // 'response': response }); }); }); </script> |
Note that the code contains a commented line – // 'response': response. The response parameter returns the full response when the form is sent, which contains all the information about the entered form fields and the sender’s data. If necessary, you can uncomment the line with response and extract the values that you want to send to Google Analytics. We will not consider the method with sending user data further, because this is individual for each form. We will only consider tracking the fact of sending the form and the form ID.
So, each time a Ninja form is sent, this event listener code will send the ninja_form_submit event to dataLayer, as well as the form_id parameter.
Copy and add the event listener code to the Custom HTML tag in GTM, and set the “All Pages” trigger.
Save the tag and open the site via GTM in Preview mode. Next, we need to go to the page with the Ninja form and perform a test form submission.
After submitting the form, we need to go to the Tag Assistant tab, where ninja_form_submit event should appear:
As you can see, along with the ninja_form_submit event there is also a form_id parameter, which takes the value “248”, this is the unique form ID that we will send to Google Analytics.
GTM variable set up
For the form_id parameter in Tag Manager, create a DataLayer Variable:
Save the variable and move on to setting up the trigger and Google Analytics tag.
GTM trigger and tag set up
Create a Custom Event trigger. In the “Event name” field, write the name of the event that comes to dataLayer when the form is successfully sent – ninja_form_submit.
Now we create a Google Analytics tag: GA4 Event (1). As a trigger, we add the previously created “Custom event – ninja_form_submit” (2). We also add the Measurement ID (3) and write down the Event Name (4) for Google Analytics. Add the Event parameter for form ID, let’s call it, for example, “ninja_form_id” (5), and its value will be the “dlv – form_id” variable (6).
Now let’s check the tag firing. Open the site again in “Preview” mode and make a test form submission. Go to the Tag Assistant tab and see that the tag is fired.
You can go to DebugView in Google Analytics to check the event:
As you can see, the ninja_form_submit event was successfully sent to Google Analytics and also contains a form ID parameter.
Google Analytics dimension set up
Setting up Ninja form tracking is almost complete. The only thing left to do is to create a Custom Definition for the ninja_form_id parameter, this will provide the ability to analyse submitted forms by form IDs in Google Analytics reports. But this is relevant if there are several Ninja Forms on the site, if you have only one Ninja form on the site, then you can skip this step.
So, go to the Google Analytics admin panel -> Custom definitions -> Create custom dimension:
Create a dimension with the following parameters:
- Dimension name: Ninja Form ID
- Scope: Event
- Event parameter: ninja_form_id
Now the Ninja Form tracking setup is complete.
A short afterword
The method for setting up Ninja Form tracking, which is discussed in this post, allows you to set up precise tracking of form submissions, as well as get the ID of individual forms, which will allow you to analyse interaction with each form on the site separately. All you need to do is copy the listening code presented in the post, paste it into the Custom HTML tag and set up sending the event to Google Analytics.
