Skip to content

Step-by-Step Ninja Forms & Google Analytics Integration

Form submissions, in general, are usually meant to capture leads, so it's imperative that we integrate our forms into Google Analytics and learn as much as we can from our users.

In this post we will go step-by-step through the process of tying your Wordpress Ninja Form submissions with Google Analytics via the Google Tag Manager.

Let's get started (we're assuming your already have Ninja Forms, and the plugin "Google Tag Manager for Wordpress" by Thomas Geiger installed.  Or you can paste the GTM code straight into your template immediately after the <body> tag. You can use your gmail account to create your Google Tag Manager account here.  It's free!):

1. Make sure you've enabled the necessary Built-In Variables in your Google Tag Manager Account.

You can get to this page by selecting 'variables' in the left hand menu. Make sure to select both Clicks and Form elements.

Google Tag Manager Variables

2. Set up a Click Trigger to listen to your Ninja Form

It helps to think of triggers as listeners.  Triggers are activated when certain criteria are met on your site. We're going to listen for the click from the Ninja Form Submit button.  Why not select Form Submission in Google Tag Manager?  We tried and it didn't work with Ninja Forms.

ninja-form-google-tag-trigger

Choose Event: Click

Configure Trigger: All Elements

Fire On: 

Click Id equals ninja_forms_field_xx

Dig into your ninja form html code using your web inspector. We're looking for the id of the input submit code. Here the submit id is ninja_forms_field_35, so in my Google Tag Manager trigger you would set it to fire on 'Click Id' 'equals' 'ninja_forms_field_35'. The submit button has  a unique identifier for each ninja form, so these numbers will vary for everyone.

ninja forms submit code

 

3. Set up an Event Tag

Great, we've set the trigger, but now we need to make it talk to our Google Analytics and pass on the information. We do this by creating an Event Tag. Click 'New' to get started.

google-tag-manager-add-tag

Google-tag-Manager-set-up

 

Choose Product: Google Analytics

Choose a Tag Type: Universal Analytics

Configure Tag:

Tracking ID: This is where you ad your Google Analytics Id.  This is a number that starts with UA and can be found in the property settings in the admin section of your Google Analytics account.

Track Type: Event

Event Tracking Parameters

The following parameters can be customized to your needs.

Category (required): This is the category that you want your event to be listed under.  You can name it Lead, Sales, Download request, or whatever your needs are to identify it in Google Analytics.

Action (required): A string that is uniquely paired with each category, and commonly used to define the type of user interaction for the web object.

Label (optional): An optional string to provide additional dimensions to the event data

Value (optional): an integer that you can use to provide numerical data about the user event. This is useful if you know the monetary value of your form submission.

Non-Interaction Hit (Optional): A boolean that when set to true, indicates that the event hit will not be used in bounce-rate calculation.

 

Screen Shot 2016-02-12 at 9.50.09 PM

Now we need to choose the trigger that fires this tag.  Select 'More'.

Screen Shot 2016-02-12 at 9.50.39 PM

 

Select the trigger we made in step 2.

Screen Shot 2016-02-12 at 9.50.48 PMHit Save and test.

5. If set up correctly, anytime the form is submitted you can find it represented in your event actions in Google Analytics.

6.  Getting more creative

Ninja Forms allows you to embed the same form in different pages.  Since the trigger is listening for the id of the submit button, this can technically occur on multiple pages. Depending on your needs you may want to create a trigger for a form on a specific page. To do that, the triggers you create can be specified to only fire on forms of specific pages.

In the picture below the trigger is fired when the Click Id equals ninja_forms_field_47 and the page URL contains /services.

Screen Shot 2016-02-12 at 9.51.43 PM

 

Google Tag Manager streamlines and simplifies website and mobile app tagging. Instead of asking your IT team to manage individual tags across your websites, you can edit and manage tags on any page via a unified user-friendly tool. Google Tag Manager allows you to focus on marketing, not coding.