How To Track Gravity Form Submissions

Are you using Gravity Forms on your website and looking to enhance your understanding of user interactions? Tracking form submissions effectively not only helps in optimizing the user experience but also provides valuable insights into your audience’s engagement with your website. Gravity Forms is a popular WordPress plugin known for its versatility and ease of use, making it an excellent choice for businesses of all sizes.

In this article, we’ll dive into the specifics of setting up form submission tracking using Google Tag Manager (GTM) with a focus on leveraging Gravity Forms’ built-in functionality. Whether you’re new to GTM or looking to refine your existing tracking setups, we’ll guide you through the process of capturing valuable data from your forms to inform your marketing strategies and improve overall site performance.

Note: This guide is part of our conversion tracking series using Google Tag Manager. For a beginner guide to form tracking, do view our main article – How to track form submissions.

Overview of Form Submission Tracking Methods

While Gravity Forms simplifies the creation and management of contact forms, tracking these form submissions to analyze performance involves a few more steps. To fully grasp the impact of your forms, you must be able to capture data on how users interact with them. Here we explore several methods to track form submissions, each suited to different needs and technical environments:

• Page View Tracking: This method involves tracking visits to a specific “Thank You” or confirmation page that users are redirected to after submitting a form. It’s a straightforward approach if your form is set to redirect upon submission.
• Submit Button Click Tracking: By monitoring clicks on the submit button, this method records each attempt to submit the form, regardless of whether the submission is successful or not.
• CSS Selector for Success Message: This method uses CSS selectors to detect and track the display of a success message on the form page, indicating a successful submission without redirection.
• Custom DataLayer Event Tracking: The most robust method, this involves pushing custom events from Gravity Forms into the DataLayer when a form is submitted, allowing for precise tracking of successful submissions and additional data.

Each of these methods has its own set of advantages and can be implemented using Google Tag Manager to enhance your data collection capabilities. While we will focus primarily on the Custom DataLayer Event for its accuracy and depth of data, these other methods are covered in our main article – How to track form submissions. For this comprehensive guide, we will delve into these methods with a special emphasis on integrating Gravity Forms’ events for a seamless and efficient tracking setup.

Setting Up DataLayer Event Tracking in GTM for Gravity Forms

Tracking form submissions effectively in Google Tag Manager (GTM) involves setting up a system to capture specific events and push them into the DataLayer. For Gravity Forms, this means utilizing the built-in confirmation settings to trigger a custom event in the DataLayer when a form is submitted successfully. By capturing these events, you can enrich your analytics with detailed interaction data, improving your ability to analyze and optimize user behavior.

Implementing a Custom HTML Tag in Gravity Forms:

To ensure that form submission events from Gravity Forms are tracked, you’ll need to add a custom HTML code snippet to the confirmation settings of the form. This custom script will push relevant data into the DataLayer, which can then be captured by your GTM setup.

Here’s how to set up the tracking:

1. Open Gravity Forms Dashboard:
Navigate to your WordPress dashboard and select the Gravity Forms plugin to open the list of available forms.

2. Locate the Form:

Click on ‘Forms’ in the main dashboard.

Select the form you wish to track by clicking on its title.

Once in the form editor, click on ‘Settings’ and then select ‘Confirmations’.

3. Edit the Confirmation Text:

In the Confirmation settings, you’ll typically see the confirmation type set to “Text”.

Switch the text editor to “Text” mode (instead of “Visual”) to enter the code without any formatting issues.

4. Add DataLayer Push Code:

In the Text editor, enter the following JavaScript code:

 

<script>

window.dataLayer = window.dataLayer || [];

window.dataLayer.push({

  ‘event’: ‘formSubmission’

});

</script>

1. This code snippet pushes an event named formSubmission to the DataLayer whenever the form is submitted.
2. Disable Auto-Formatting:
   • Before saving, check the box labeled “Disable the auto-formatting” at the bottom of the editor. This prevents Squarespace’s editor from altering the JavaScript code, which could break the functionality.
3. Save and Exit:
   After adding the code and disabling auto-formatting, save your changes and exit the form editor.

Details of Data Being Pushed to the DataLayer:

• Event: This is a custom event labeled “formSubmission”, which you will use in GTM to trigger specific tags.

Utilizing DataLayer Event To Create The Trigger And Tag

After setting up the DataLayer to capture specific events from Gravity Forms submissions, the next step is to make practical use of this data within Google Tag Manager. This involves verifying that the DataLayer is receiving the data correctly, creating a custom trigger based on the event, and configuring a tag to send this data to Google Analytics 4 (GA4).

Step 1: Verifying Data in the DataLayer

• Enter GTM Preview Mode: Navigate to your Google Tag Manager workspace and click the ‘Preview’ button to activate the preview mode. This mode allows you to see real-time changes and interactions on your site as you test different configurations.
• Submit a Test Form: Go to a page on your website where a Gravity Form is active and submit the form as a user would. Make sure to fill out the fields required by your form setup.
• Check the DataLayer for Variables: Once the form is submitted, check the DataLayer tab within the GTM preview pane. You should see the new variables such as event populated with data from the form submission. This step confirms that the custom HTML code you set up is working correctly and pushing the desired data into the DataLayer.

Step 2: Creating a Custom Trigger

• Set Up a New Trigger: In GTM, go to the ‘Triggers’ section and click ‘New’. Choose ‘Custom Event’ as the trigger type. For the event name, enter “formSubmission”, the same name used in your DataLayer push. This ensures that the trigger listens for exactly this event coming from the DataLayer.
• Configure and Save the Trigger: Name your trigger descriptively, such as ‘Gravity Form Submission Trigger’, and save it. This trigger will now listen for the “formSubmission” event and activate associated tags whenever this event occurs.

Step 3: Creating a Tag to Send Data to GA4

• Create a New GA4 Event Tag: In GTM, create a new tag and select ‘Google Analytics: GA4 Event’ as the tag type. Connect the tag to your GA4 property by specifying the GA4 Configuration Tag or directly entering your Measurement ID.
• Set Up Event Parameters: Configure the tag to send event data. Name the event (e.g., ‘Gravity Form Submission’ – this is the name that will be passed onto GA4). You can set up event parameters to capture specific form details that are important for your analytics.
• Link the Tag to Your Custom Trigger: Assign the newly created ‘Gravity Form Submission Trigger’ to this tag. This setup ensures that the tag fires every time the custom event is triggered in the DataLayer.
• Save and Test Your Tag: Save your new tag and use GTM’s preview mode to test it. Submit a form to see if the tag fires and the data appears in GA4’s real-time or DebugView reporting.
• Publish Your Changes: Once you’ve verified that everything is functioning as expected and the data appears correctly in Google Analytics, go ahead and publish your changes in GTM.

Advantages of Using This Method:

• Accuracy and Relevance: By tracking only forms that successfully complete, you ensure the data is relevant and reflects actual user conversions.
• Rich Data Capture: Pushing form submission events into the DataLayer allows for deeper analysis of form interactions, enabling more targeted and effective optimizations.

Conclusion

With the setup detailed in this guide, you can harness the power of Google Tag Manager and Google Analytics 4 to capture valuable data from Gravity Forms submissions, enriching your understanding of how users engage with your forms.

At First Page Digital, we specialize in offering comprehensive digital marketing solutions, including advanced form tracking setups like the ones described here. As a leading digital marketing agency, we understand the importance of leveraging precise and actionable data to enhance campaign strategies and boost conversion rates. As such, all SEO services and PPC campaigns include free tracking setup for your website’s contact form.

If you’re looking to refine your digital marketing efforts or need assistance implementing sophisticated tracking solutions, we invite you to consult with our experts.