Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

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.

 

#1. how to track Gravity Forms with Google Tag Manager [short version]

If you’re in a hurry, just follow these quick steps. But if you want to understand why I chose one or another way, read the full blog post.

 

#1.1. Gravity Forms Listener

Create a Custom HTML tag with the following code:

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

Custom Event Trigger - Form Submission

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.

Form ID - Data Layer Variable

 

#1.3. Google Analytics Event Tag

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

Google Analytics Event Tag - Form Submission

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.

 

#2.1. Important: Before we continue

If for some reason, this blog post fails to help you track Gravity forms with Google Tag Manager, there is a bunch of other form tracking techniques.

After tracking hundreds (if not thousands) of various forms, I have polished the most common solutions, so you should definitely check the form tracking guide.

 

#2.2. Gravity Forms Listener

The entire form tracking process looks like this:

  1. We implement an auto-event listener which tracks only successful form submissions and pushes those events to the Data Layer.
  2. Create Custom Event trigger (which recognizes the Data Layer Event) and a Data Layer Variable (this one’s optional).
  3. Create a Google Analytics Event tag, link it to the aforementioned Custom Event Trigger.

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.

Shall we start?

 

#2.3. Create a GRAVITY FORMS LISTENER

In 2017, I’ve published a blog post How to write an auto-event listener which no coding skills which received a very positive feedback from the community. Today, I’ll demonstrate that technique in action with Gravity Forms.

 

#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:

Gravity Forms JavaScript API

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!).

Gravity Forms Confirmation Loaded API Reference

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:

gform_confirmation_loaded javascript snippet

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.

#2.3.4. STEP 4. ADD DATALAYER.PUSH EVENT(-S)

Copy that code from Gravity Forms API documentation and paste to some plain text or code editor (e.g. Notepad, Notepad++, Sublime, etc.)

Remove //code to be trigger when confirmation page is loaded

Prepare dataLayer.push event code (various GTM experts recommend to use window.dataLayer.push instead of plain dataLayer.push):

Why did I add formId? Well, that’s because the Gravity Form’s JavaScript webhook returns the ID of the form (see function(event, formId) ?). It’s optional, so feel free to remove it.

Now, merge the Gravity Form’s code snippet with window.dataLayer.push. This is what the final result should look like:

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.

Gravity Forms Listener

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.

Form Submission Data Layer Event

 

#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.

victory dance

#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:

Custom Event Trigger - Form Submission

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.

Form ID - Data Layer Variable

 

#2.5. Google Analytics Tag

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

Google Analytics Event Tag - Form Submission

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.

That’s it! Don’t forget to test various scenarios with a GTM Preview and Debug mode:

  • Submit the form when all required fields contain some values.
  • Try leaving at least one required field empty and try to submit the form.

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

 

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.

If this guide did not help you, don’t feel bad because I have a bunch of alternative solutions how to track forms with Google Tag Manager. Give it a shot.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Julius Fed

Head of Developer Operations at Omnisend. I am highly interested in Google Tag Manager, Google Analytics, Adwords, Email marketing, Email Deliverability, Digital Marketing in general. You can follow me on Twitter.