Gravity Forms is known for its tons of features and ease of implementation, be it a simple one-page form or a multi-page ecommerce checkout. Surprisingly (at least for me), it’s just as straight-forward when tracking a Gravity form submission in Google Tag Manager. This form is sends out confirmation messages on successful submission as well as triggers GTM’s inbuilt Form Submission trigger most times – this is the surprising part, btw, lol – very rarely do we see this trigger working correctly while trying to set up form tracking.
This tutorial includes tracking methods for both of the above-mentioned possibilities. If the inbuilt Form Submission trigger catches the form submission, consider yourself lucky as you’ll just need to follow the first couple steps listed below. If your luck isn’t shining so much, worry not, we still got you covered. We will need to create an element visibility trigger in that case and get the tag attached to it. There will be a few additional steps included but it will be a fool-proof tracking of Gravity forms through GTM as we’d be tracking the confirmation classes themselves.
Quick links to lead you through the guide:
How to know if the form you want to track in built with Gravity Forms plugin?
Gravity Forms uses classes and IDs that begin with ‘gform’. Open up Developer Tools in Chrome, browse to the page where you got the form that needs to be tracked, right-click on the form submit button and select ‘Inspect’. It should open up a panel that is similar to what you see in the below snapshot:
As you can see, the form uses classes and IDs that have got ‘gform’ prefixed to their names. This usually is a clearcut identifier that the form you wish to track is built with Gravity Forms plugin. If you are not seeing this prefix, it’s probably not a Gravity Form that you have on hand.
How to track Gravity Forms using the GTM Form Submission trigger
This one’s quick and easy as GTM has got this inbuilt for convenience. You will need to go to Variables -> Configure and enable all the form-related variables. These are turned off by default to prevent any unnecessary data collection, so they need to be turned on.
Once they are enabled, you should be able to see the form variables coming in on Preview mode. We will verify which variables can be uniquely tracked by doing a quick debug, and then set up a trigger on that variable. So firstly, go to Preview mode and enter in the page URL that houses your Gravity form. On successful connection, fill in the form and submit it. Below is what you should be seeing in the Preview window when you view Data Layer tab (right panel) under form_submit event (left panel):
Scrolling further down the Output panel should give you this:
This indicates that our form has got a unique ID named ‘gform_2’ that we can use to track submissions. That’s good enough for us to have the trigger set up! So the next step is creating a new trigger, and associating it with the trigger type ‘Form Submission’:
Set it to fire on ‘Some Forms’ as we want to add in a condition on when it fires. I have only got one Gravity form up, so I have chosen ‘Form ID’ as the variable and ‘contains’ ‘gform_2’ as the condition. If you got multiple Gravity forms you would like to track, you can just have ‘contains’ ‘gform’ as the condition. It should fire the trigger at every successful submission of any Gravity form, and as we will be collecting and sending the form ID to Google Analytics (how-to covered later in this tutorial), figuring out which form has been submitted would be as easy as matching it to its ID.
If you have a single-page form that is responding to the GTM inbuilt form submission trigger, you are nearly done! All you need to take care of now is to create a new GA4 Event Tag, add in your Analytics measurement ID and give a unqiue name to the form submission event (you’ll see this name pop up in Google Analytics, so choose accordingly). We want to record the form ID to know which form has been submitted, so add that to the event parameters. I’ve also added page URL as an additional parameter, just to be able to verify which page has a form been submitted on.
And that’s all folks! Your Gravity forms are a-tracking in Google Analytics through GTM! You can now jump to Testing Gravity Forms tracking and wrap this up.
But you could be one of those unlucky ones for whom the inbuilt form submission trigger did not work. Or your form could be a multi-step one for which this method would not yield correct results. Read on if you got either of these cases on hand.
Tracking Gravity Form submission through element visibility
Create a new trigger and choose ‘Element Visibility’ as the trigger type. We want this trigger to fire when the confirmation message gets displayed on-screen, so let’s choose CSS Selector and keep the Element Selector as ‘.gform_confirmation_message’ (this is the CSS class of the confirmation message). As we are tracking the appearance of this confirmation message, choose to fire this trigger every time an element appears on the screen.
Lastly, I’ve chosen to fire this only when the form ID contains ‘gform’. As we saw earlier, all IDs/ classes of Gravity Forms is pre-fixed with ‘gform’. And considering we only wish to track clicks on the form buttons (the logic being that the confirmation message will only appear after the submit button has been clicked), the easiest way to go about it is to ensure clicks are only tracked for a Gravity form ID.
Attach this trigger to a GA4 event tag like before, and keep the settings as shown below:
That’s it! You should be good to go!
Testing Gravity Forms tracking
Let’s test this in the Preview mode now. This is what we see after a successful form submission:
As you can see, our custom tag for recording Gravity Form submissions has fired, sending the defined event over to GA4. Here’s the detail of what this tag is recording:
The custom parameters we sent for Form ID and Page URL can also be seen here. However, please note that GA4 requires us to create a custom definition to register any incoming custom event parameter. I’ll be covering how to go about this in another guide later.
Quick Questions:
Can we track a multi-step Gravity form using this guide?
Yes, the element visibility method can actually be used for multi-step Gravity forms as well as long as there is a confirmation message popping up at the end. The confirmation message has a unique class associated with it, so it gets detected only when the message pops up after a successful form submission; it won’t trigger when someone just moves to the next step within the form.
Can form fields be captured through GTM and sent over to Google Analytics?
We can have the filled form fields captured but please note that it is against Google’s policies to track and record user-specific data. Some analytics tools do allow it, however, it takes writing data layer code to pass form fields. We will cover this in a separate tutorial later.
Can we use JS hooks to capture when the form is getting successfully submitted?
Sure, we can. That’s another method that can work to track Gravity form submissions, but it is a bit long-winded. The above two methods should instead be easier to implement, and have been tested to work with Gravity Forms 2.8 and up.
Of course, if you tried both of the above-mentioned methods and are still unable to set up tracking for Gravity Forms, do reach out to us through the comment box below, and we’d surely to help out!
0 Comments