Track Gravity Forms With Google Tag Manager and GA4

Updated: April 7th, 2023.

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, tracking form submissions is necessary to understand visitors’ behavior better. 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 4.

– Hide table of contents –

  • #1. Track Gravity Forms with GTM (short version)

    • #1.1. Gravity Forms Listener

      • #1.1.1. What if my Gravity form refreshes the page or redirects to a ‘thank you’ page?

    • #1.2. Custom Trigger and (optional) Variable

    • #1.3. Google Analytics 4 Event Tag

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

    • #2.1. Important: Before we continue

    • #2.2. Gravity Forms Listener

    • #2.3. Create a Gravity Forms listener

      • #2.3.1. STEP 1. Let’s check whether there is a JavaScript API

      • #2.3.2. STEP 2. Let’s see which JS API methods are available

      • #2.3.3. STEP 3. Are the code examples ready-to-use and very simple?

      • #2.3.4. STEP 4. Add dataLayer.push event(s)

      • #2.3.5. STEP 5. Create a Custom HTML tag and test

      • #2.3.6. STEP 6. Success

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

    • #2.5. Google Analytics 4 Tag

  • Final Words

#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 how to evaluate different ways of doing this, 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>

Set the tag to fire on all pages with the embedded Gravity form (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 AJAX-based Gravity Forms. The listener will work properly if the page doesn’t refresh after submission. If a successful submission sends the user to a separate Thank you page, you’ll have to add additional code to the 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?

You’ve probably figured that the Gravity Form Listener given above does not work in these situations. Instead, you’ll need to log in to WordPress, find the form and add an additional code snippet so that the listener identifies a successful form submission.

In WordPress:

  1. Go to Forms and open the one you wish to track.

  2. Then go to Settings

  3. Click Confirmations.

  4. Usually, the Confirmation type is “Text” and what you’ll need to do is 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:

  1. Before pasting the code, switch the text editor to “Text” mode (instead of “Visual”)

  2. 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, return 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 some parts of the window.dataLayer.push code I’ve recently mentioned.

In this case, both forms should have different codes. The adjusted code of the first form could look like 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 form IDs 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 on tracking 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, and you can skip it if you wish. Also, you don’t need this variable if your form refreshes the page and you use the solution described in the 1.1.1 chapter of this blog post.

#1.3. Google Analytics 4 Event Tag

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

Feel free to remove the {{dlv – formID}} variable if you wish. Assign the 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 GA4 Event tag should fire.

  • Try leaving at least one required field empty and try to submit the form. Expected result: the GA4 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, 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, here are 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 a 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, and 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 rarely 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 published a blog post on How to write an auto-event listener with zero coding skills. It received 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 you’ll need to 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 that 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 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 valuable methods and the documentation is very well written, one requirement still remains. Is the API Reference really dummy-proof? Will a non-developer be able to use it with ease?

Honestly, it is not common practice to write super simple code examples in API references which could be helpful 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 be able to write our own custom auto-event listeners.

In Wistia’s case, we’re lucky to have Bounteous 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 triggered 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 it 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 triggered when confirmation page is loaded
});
</script>

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

<script type="text/javascript">
jQuery(document).bind('gform_confirmation_loaded', function(event, formID){
});
</script>

Prepare dataLayer.push event code:

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 form’s ID (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.5. STEP 5. Create a Custom HTML tag and test

In the 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.6. STEP 6. Success

Victory dance! But don’t relax too soon. There’s still something left to do 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 Google Tag Manager, by default, does not recognize what’s happening in the Data Layer.

So what’s the solution? You’ll need to 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 4 Event tag. If you want to pass a form ID with it, create a Data Layer Variable. It’s helpful if you have more than one Gravity form on a page or a website.

#2.5. Google Analytics 4 Tag

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

As I mentioned previously, feel free to remove the {{dlv – formID}} variable if you wish. Assign form_submission 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: Track Gravity Forms with Google Tag Manager and GA4

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

In conclusion, here’s the entire tracking workflow:

  • First, you must 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 that 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 can 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 that would recognize the form submission Data Layer event. It’s a necessary ingredient for the Google Analytics 4 Tag to fire. Optionally, you can create a Data Layer Variable to help transfer Form ID to Google Analytics.

  • Finally, create a Google Analytics 4 Event tag that fires 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.

PreviousGoogle Tag Manager Form Tracking with Google Analytics 4NextLooker Studio

Last updated