Gravity Forms is a customizable WordPress plugin which enables you to add simple or complex forms to your website, blog, or whatever you’re running on WP. But just like any important interaction, form submissions must be tracked in order to better understand visitors’ behavior. In this blog post, I’ll show you how to track Gravity forms with Google Tag Manager and send Form submission events to Google Analytics.

Fire it on all pages that have the Gravity form embedded (e.g. Page Path contains “contact-us”). This JavaScript code will listen to successful form submissions and fire a Data Layer event, called formSubmission.

#1.2. Custom Trigger and (optional) Variable

In your GTM account, go to Triggers > New > Custom Events

Also, create a Data Layer variable called formID if you want to pass its value to Google Analytics. This variable is optional, you can skip it if you wish.

#1.3. Google Analytics Event Tag

Finally, pass the data to Google Analytics, by creating an event tag with the following settings:

Feel free to remove the {{dlv – formID}} variable if you wish. Assign formSubmission custom event trigger you have created in the previous chapter of this blog post.

That’s it! Don’t forget to test various scenarios:

Submit the form when all required fields contain some values. Expected result: the GA Event tag should fire.

Try leaving at least one required field empty and try to submit the form. Expected result: the GA Event tag should not be fired.

Also, don’t forget to check Google Analytics Real-time Event reports as all successful form submissions should be visible there.

#2. How To Track Gravity Forms with GTM [Long version]

Believe it or not, but you could have solved this puzzle by yourself, even if you don’t know how to code. In this blog post, I’ll explain various details of how a non-developer can write a little piece of code, use it in Google Tag Manager, and precisely track only successful Gravity form submissions.

You have probably already tried a built-in Google Tag Manager Form Submission trigger and it failed you with Gravity Forms. Otherwise, you wouldn’t be here, right? Well, you’re not alone because that trigger almost never works.

So what’s the solution? We should get (or maybe create) a Gravity Forms Listener, a JavaScript function which listens only to successful form submissions and fires a Data Layer event. As a result, we could utilize that event as a trigger and fire a Google Analytics Event tag.

#2.3.1. STEP 1. LET’S CHECK WHETHER THERE IS A JAVASCRIPT API

Open Google and enter Gravity Forms Javascript API. It’s crucial that you look for JavaScript API, not regular API. Your search results should look like this:

The 2nd search result looks promising. Let’s click it. We should be one step closer to writing an auto-event listener.

#2.3.2. STEP 2. LET’S SEE WHICH JS API METHODS ARE AVAILABLE

Now, check whether the API is well documented and easy-to-understand even for those who do not know how to code. Since we want to track ONLY successful form submissions we should keep looking for some terms which contain “success”, “form submission”, “confirmation”, etc. You get the idea, right?

What we are looking for is some kind of API method which is related to successful submissions. Honestly, it took me a while to find a proper page in Gravity Form’s documentation (because they offer A LOT of stuff).

On the left side of the Gravity Forms API reference, you’ll find a navigation bar. Go to Hooks > Filters > Confirmations > gform_confirmation_loaded. This JavaScript hook (gform_confirmation_loaded) fires when the form’s “Success” page is loaded (which is exactly what we’re looking for!).

Bingo! We’re one step closer to the success but there’s still something we need to verify.

#2.3.3. STEP 3. ARE The CODE EXAMPLES READY-TO-USE AND VERY SIMPLE?

Even if the API offers useful methods and the documentation is very well written, there’s still one requirement left. Is the API Reference really dummy-proof? Will a non-developer be able to use it with ease?

Honestly, it is not a very common practice to write super simple code examples in API references which could be useful for non-devs or beginners. Sometimes it’s even next to impossible.

For example, Wistia offers a very well-written Javascript API reference, but examples are not designed for entry-level developers, thus you and I won’t able to write our own custom auto-event listeners.

In Wistia’s case, we’re lucky to have Lunametrics because their developers posted this awesome Wistia listener for GTM. But there are still lots of situations where a ready-made tracking solution just simply does not exist.

OK, let’s go back to Gravity Forms. I have navigated to gform_confirmation_loaded JavaScript hook and found this example of code:

This is perfect! Let me explain what’s happening.

This code is ready to use. It states: if gform_confirmation_loaded occurs, initiate a function. Currently, that function is empty but we can easily embed the dataLayer.push event just by replacing the text //code to be trigger when confirmation page is loaded with the actual data layer code.

GET THE ULTIMATE LIST OF 120+ GOOGLE TAG MANAGER RESOURCES. EVERYTHING FROM A TO Z.

Great! We’re very close to finishing the Gravity Form auto-event listener!

#2.3.4. STEP 4. CREATE A CUSTOM HTML TAG AND TEST

In Google Tag Manager account, create a new Custom HTML tag. Paste the code you have created in the previous step.

Done! Save the tag and assign the trigger you want, e.g. All Pages (or, preferably, just on those pages where the form is located).

Don’t forget to test the listener with GTM Preview and Debug mode. Load the page with any Gravity Form and complete a test submission. A Data Layer event called formSubmission should appear in the event stream. Click it and check what data was passed to the Data Layer. It should look like this.

#2.3.5. STEP 5. SUCCESS

Victory dance! But don’t relax too soon. There’s still something left to do in order to track Gravity Forms with Google Tag Manager.

#2.4. Create Trigger (and, optionally, a Variable)

Even though there is a formSubmission event in the Preview and Debug console, you cannot use it as a trigger. Why? Because GTM, by default, does not recognize what’s happening in the Data Layer.

So what’s the solution? Create a Custom Event trigger. Go to your Google Tag Manage account and click Triggers > New. Create a Custom Event trigger with the following conditions:

In the next step, we’ll create a Google Analytics Event tag. If you want to pass a form ID with it, create a Data Layer Variable. It’s useful if you have more than one Gravity form on a page or a website.

#2.5. Google Analytics Tag

Finally, let’s pass the data to Google Analytics by creating an event tag with the following settings:

As I have mentioned before, feel free to remove the {{dlv – formID}} variable if you wish. Assign formSubmission custom event trigger you have created in the previous chapter of this blog post.

Final Words: How To Track Gravity Forms with Google Tag Manager

I hope that this blog post was useful. Not only did you manage how to track Gravity forms, but also you have learned how to write auto-event listeners without coding skills.

In conclusion, here’s the entire tracking workflow:

First, you need to implement an auto-event listener with a Custom HTML tag. A listener is a function which listens to particular interactions on a page. In this case, it’s a successful Gravity Form submission. You can either use a ready-made listener (if possible), try to write your own (here’s a guide for non-developers), or ask a developer to help you. A listener must push the event of a successful form submission to the Data Layer.

Create a Custom Event Trigger which would recognize the form submission Data Layer event, it’s a necessary ingredient for the Google Analytics Tag to fire. Optionally, you can create a Data Layer Variable which would help transfer Form ID to Google Analytics.

Finally, create a Google Analytics Event tag which is dispatched when a successful form submission occurs on a page.

Hey, all GTM Triggers are based on the Data Layer. If you want a particular interaction to trigger a GTM tag, you need to:
1. send it first to the Data Layer (in this case, we push “formSubmission” event).
2. Then we have to turn that Data Layer event into the actual trigger, that’s why we created a Custom Event Trigger which starts listening to “formSubmission” DL events.

Just implement that listener code (via Custom HTML Tag) and you’ll be fine.