Updated: March 6th, 2018. Gravity Forms is a customizable WordPress plugin that 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.
Note: this blog post teaches how to track events with Universal Analytics. If you want to get familiar with event tracking in Google Analytics 4, you can also refer to this blog post.
#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:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(document).bind("gform_confirmation_loaded", function(event, formID) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: "formSubmission",
formID: formID
});
});
});
</script>
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.
IMPORTANT: This listener supports only AJAX-based Gravity Forms. If the page does not refresh after the successful submission, then this listener will work fine. If (after successful submission) the visitor is redirected to a separate Thank you page, you’ll have to add some additional code to form’s settings. Read the next chapter to find out more.
#1.1.1. What if my Gravity form refreshes the page or redirects a visitor to a ‘thank you’ page?
In that case, the aforementioned Gravity Form Listener will not work. What you’ll need to is to log in to WordPress, find the form and add an additional code snippet which will help us identify that the form was submitted successfully.
- Go to Forms and open the one you wish to track.
- Then go to its Settings
- Click Confirmations.
- Usually, the Confirmation type is “Text” and what you’ll need to do is to add a small JavaScript code there. It will create a Data Layer event “formSubmission” which we’ll use later as a trigger.
The code snippet that you need to add after the Confirmation message is:
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'formSubmission'
});
</script>
Two important things to keep in mind:
- Before pasting the code, switch the text editor to “Text” mode (instead of “Visual”)
- Disable the auto-formatting in that editor (there’s a checkbox at the bottom), otherwise, it will break the code.
How to test if this is working? Save the Confirmation settings, enable GTM Preview and Debug mode, go back to your form (on the website), and submit it. If you see “formSubmission” event in the Preview console, the code is working fine and you can move on to the next chapter.
One more thing. If you have two or more Gravity forms on the same page and those forms refresh the page, then you need to modify a bit the window.dataLayer.push code I’ve recently mentioned. In this case, both forms should different codes. The adjusted code of the first form could look like the this:
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'formSubmission',
'formID': '1' // you can replace that 1 with anything you want. Just make sure it makes sense to you.
});
</script>
As for the 2nd form, its code should contain ‘formID’: ‘2’.
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'formSubmission',
'formID': '2' // you can replace that 2 with anything you want. Just make sure it makes sense to you.
});
</script>
Why did we do that? different formIDs will help you identify (in the data layer) which form was submitted.
By the way, if the form redirects a visitor to another page (a.k.a. “Thank you page”), read this guide how to track such forms.
#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. Also, you don’t need this variable if your form refreshes the page and you used the solution described in the 1.1.1 chapter of this blog post.
#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.
#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:
- We implement an auto-event listener which tracks only successful form submissions and pushes those events to the Data Layer.
- Create a Custom Event trigger (which recognizes the Data Layer Event) and a Data Layer Variable (this one’s optional).
- 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 that 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:
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 the 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.)
<script type="text/javascript">
jQuery(document).bind('gform_confirmation_loaded', function(event, formId){
// code to be trigger when confirmation page is loaded
});
</script>
Remove //code to be trigger when confirmation page is loaded
<script type="text/javascript">
jQuery(document).bind('gform_confirmation_loaded', function(event, formId){
});
</script>
Prepare dataLayer.push event code (various GTM experts recommend to use window.dataLayer.push instead of plain dataLayer.push):
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'formSubmission', //you can actually name this even whatever you want
'formID': formId
});
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:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(document).bind("gform_confirmation_loaded", function(event, formID) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: "formSubmission",
formID: formID
});
});
});
</script>
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 Manager 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.
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 check how your form works after the successful submission. If it refreshes itself (but not the entire page), 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.
- If the form refreshes the entire page, you need to edit its confirmation message by adding a little code snippet with window.dataLayer.push. After the successful form submission, it creates an event that you’ll be able to catch with a custom trigger.
- If the form redirects a visitor to a Thank you page, you’ll need to use this tracking method.
- 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 that 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 on how to track forms with Google Tag Manager. Give it a shot.
By Julius Fedorovicius
Source: https://www.analyticsmania.com/post/track-gravity-forms-with-google-tag-manager/