How to Track Form Submissions in GA4 Using GTM (6 Proven Methods)

Introduction

Forms are a key point of conversion on most websites. Their tracking enables the organization to measure the effectiveness of its marketing campaigns, identify drop-off points or errors in the user journey, and optimise form design and user experience. The insight thus gained through these forms allows qualified lead generation.

This data can be captured accurately through Google Analytics 4 (GA4) and Google Tag Manager (GTM) pair-up.  Whether you're tracking lead generation, newsletter signups, or contact form submissions, the guide in this blog will help you track every interaction. We’ll cover six proven methods to track form submissions in GA4 using GTM.

Prerequisites Before You Start

The Google Analytics 4 (GA4) and Google Tag Manager (GTM) pair up is a popular choice for tracking form submissions effectively. GTM acts as a tool to perform the form tracking through triggers that fire when a form is submitted (e.g., based on a button click, a thank you page visit, or the appearance of a success message). The information/data collected through these forms is then sent to GA4 as an event. 

Before going into the details of the different methods to track form submissions in GA4 using GTM, let’s take a look at the prerequisites of this process: 

• GA4 property setup
• GTM installed
• Website access
• HubSpot form presence (if applicable)
  

Method 1 – GTM Form Submission Trigger

When to Use

Using the GTM Form Submission Trigger method works well for forms where the Google Tag Manager can automatically detect submissions without any custom configurations. The major benefit of this Google Tag Manager form tracking is its easy to set up feature that records all the essential form interactions, providing insightful data without any coding hassle.

Step-by-Step Setup

Step 1: Turn on the Form Variables in the Google Tag Manager

• Navigate to the "Variables" section in GTM. You must enable the form variables because they are by default disabled.
• Select "Configure" from the "Built-In Variables" section. 
• All of the Form variables on the right sidebar should be enabled.

Step 2: Configuring the Trigger for Form Submission

• Go to GTM's "Triggers" section, which is in the left sidebar.
• To create a new trigger, click "New." Give it a name that speaks for itself, such as "Form Submission Trigger."
• Choose "Form Submission" from the list of options in the Trigger Type.
• Next, activate "Check Validation." This choice prevents the GTM from activating the Trigger in the event that the form encounters an error or fails to finish its typical course of action.

• You must choose the circumstances under which you would like the trigger to activate under the "Enable this trigger when" section. If you want the trigger to be active on every page, choose "Page Path—Contains—/."
• Now, under "This trigger fires on," you'll have two primary options:

Step 3: Connect a GA4 Event Tag to the Trigger

• Click "New" in the "Tags" box to create a new tag.
• Choose "Google Analytics: GA4 Event" under the Tag type.
• You can enter your GA4 Configuration Tag or select your GA4 Configuration ID under "Configuration."
• Choose a phrase that is self-explanatory, such as "form_submission," for "Event Name."
• Choose the newly generated Form Submission Trigger under "Triggering."

• In GTM, select "Preview" to switch to debug mode.
• Enter your website’s URL to start the session. With a debug pane at the bottom, this launches your website in a new tab.
• Complete the form on your website and submit it.
• Locate the Form Submission Trigger you configured in the debug pane. When the form is submitted, it ought to become active.
• Make sure the data is being transmitted to GA4 by having the GA4 Event Tag fire.

Method 2 – Thank You Page Redirect

When to Use

The Thank You page Redirect method is generally used when the submission tracker in GTM doesn’t work. This method is best for a form that redirects the users to a "Thank You" page. However it also works for a confirmation message or a voucher code—if the form ends with a redirect. What’s more is that you can track multiple forms under a single Thank you page.

Step-by-Step Setup

Step 1: Determine the Thank-You Page URL

This is the URL of the destination you want to track. For instance, it could be ‘/form-submitted’ or ‘/thank-you’.

Step 2: Create a Trigger in GTM

• Navigate to GTM's "Triggers" section and choose "Page View" as the “Trigger type”.
• Set "Some Page Views" as the trigger's definition.

• Enter the URL of the thank-you website to set the rule for Trigger (it is  /thankyou.html in this case). It can be adjusted to either “Page URL-contains-Thank you Page URL” or “Page Path-equals-Thank you Page URL”.

Step 3:. Connecting to an Event Tag for GA4

• To add a new tag, select "New" under the "Tags" section.
• Choose "Google Analytics: GA4 Event" under the Tag type.
• Enter your GA4 Measurement ID or select your GA4 Configuration Tag under "Configuration."
• Configure "Event Name" to match the action, such as "form_thank_you."
• Choose the "Thank You Page Trigger" that you just made under "Triggering."

Testing

• Complete a form on your website and submit it.
• Verify that you are redirected to the "Thank You" page as anticipated.
• The form submission can be seen by using GTM's Preview and Debug mode.
• Make sure that the GA4 Event Tag on the thank-you page fires and that the "Thank You Page Trigger" is activated. 

Method 3 – Element Visibility Trigger

When to Use

The element Visibility Trigger Method for form submission tracking in GA4 using GTM is generally used when a success message or other confirmation element appears on the same page after the form submission. 

It is an alternative for when the standard form submission triggers don't work well. The best part about this GA4 conversion tracking method is its user-friendly approach as the form doesn’t redirect to any other page, it’s also extremely useful for A/B testing.

This approach aligns well with HubSpot automation strategies that don't rely on page redirects.

Step-by-Step Setup

Step 1: Find the message of confirmation

• Examine the form's success message after submitting it successfully. Select the "Inspect Element" option by performing a right-click on this success message.
• The developer tools for the browser will then appear, displaying details about the message such as its content and CSS class.

• Locate the CSS class for the success message. It is "thanks" in this instance. The Element Visibility trigger method will use this as the condition for trigger.

Step 2: Establish a Visibility Trigger for an Element

• Navigate to "Triggers" in the Google Tag Manager container.
• Click "New" to create a new trigger, then select "Element Visibility" as the "Trigger type."
• Between the two "Selection Method" options - CSS Selector and Element ID. Choose "CSS Selector."
• Because the success message in the example just had class and no ID. Copy and paste the "thanks" class into the Element Selector. Since the class in CSS is specified by placing a dot before it, add a dot before “thanks”.

• Put "50%" as the "Minimum Percent Visible" setting.
• Click the "Observe DOM modifications" option next.

Step 3: Link to a GA4 Event Tag

• Create a new GA4 Event Tag in GTM by going to the "Tags" area (as explained in the previous methods).
• Attach the Element Visibility Trigger that you made in Step 2 to this tag.

Testing

• Go to your website and fill out the form there.
• Look closely for the confirmation notice in the content.
• To see if the trigger is working, open GTM's Preview and Debug mode.
• Verify that the GA4 Event Tag comes into action when the confirmation message appears on the screen. 

Method 4 – DOM Scraping

When to Use

Like the other methods mentioned above, the DOM Scraping, too, is your go-to solution for the forms where standard tracking methods fall short. What makes this GTM event tracking  special is its in-depth and precise approach to capture the specific details that other tracking methods might overlook.

However, it should only be used as a last resort as developers often update the website’s code. It is hence a risky move and even a slight change committed by the developer might break your implementation. So consult with your developer while trying out this method to track form submission as a GA4 event.

Step By Step setup 

Step 1: Determine the Target Element and Examine It

• Locate the "Thank you for subscribing" message that shows up after submitting a form.
• To inspect this message, right-click on it and choose "Inspect." This displays the HTML and CSS associated with this message in the developer console.

Step 2: In GTM, create a DOM Element Variable

• Go to the "Variables" section (located in the menu on the left) of your GTM dashboard.
• Click "New, then pick "DOM Element" as the type.
• Choose the selection method as "CSS Selector.
• Next, enter the “CSS Selector" as "div.note.form-success" from the sample.
• Give the variable a self-explanatory name as "DOM – Form Success Message," and click “Save”.

Step 3: Set up the GTM trigger

• Click "New" after selecting "Triggers" in GTM. Select "DOM Ready" as the type of trigger.
• Enter the trigger condition as "DOM – Form Success Message equals Thanks for subscribing”. This guarantees that it only becomes active when the visitors see the success message.

• Complete the trigger and save it.

Step 4: Link to a GA4 Event Tag 

• Make a new GA4 Event Tag in GTM's "Tags" area.
• Configure the tag using your GA4 settings and choose the trigger generated in Step 3
• Use the “DOM – Form Success Message” variable in the tag setup.
• Name the tag (e.g., “GA4 - Form Submission Event”) and save.

Testing

• To test the GTM event tracking, launch Preview and Debugging mode.
• Complete the Shopify demo store's form and submit it.
• Verify whether the GA4 Event Tag fires and whether the "DOM – Form Success Message" variable records "Thanks for subscribing" in the debug console under the "DOM Ready" event.
• Verify that the event is captured in the Debug View of Google Analytics 4.

Method 5 – Custom dataLayer Events

When to Use

This method like DOM Scraping requires developer’s consultation. Don’t let this scare you though! This GA4 conversion tracking method in GTM offers an extensive customization and detailed insights into user interactions with your forms.  It goes beyond the standard page views and clicks, it's more like getting the data straight from the source which is less likely to break during website updates,giving you the cleanest possible signal that a form was submitted successfully.

Step-by-Step Setup

Step 1: Define the dataLayer Event 

Collaborate with the developer to implement a custom dataLayer.push() into the callback function, which is activated upon successful form submission.

Here’s a sample of a dataLayer push code:

<script>

window.dataLayer.push({

'event': 'event_name'

});

</script>

Enter a suitable name for the event in place of ‘event-name’ in the above code.

Step 2: Verify the Event and Preview on GTM

• Once the code has been added to your website, launch GTM's Preview mode.
• Make a form available on your website.
• Verify whether the GTM debug console's dataLayer displays the "formSubmission" event.

Step 3: Configure GTM's triggers and variables

Configuring the variable:

To create Data Layer Variables in GTM for every data point you are recording, follow these steps:

• Go to the "Variables" section (located in the menu on the left) of your GTM dashboard.
• In the "User-Defined Variables" section, select "New."
• Select "Data Layer Variable" under "Variable Configuration."
• Enter the precise name of the data layer variable you wish to access in the "Data Layer Variable Name" field.
• Leave all other settings as they are
• Click the "Save" button to save your new data layer variable. 

Configuring the Trigger:

• Click New under Triggers. Enter the following parameters:
• Select "Custom event" as the “Trigger Type”.
• “Event name”: formSubmission (this could change according to your circumstances). Verify that the marketer and developer are using the same name.
• “This trigger fires on”: “All custom events”. All form submission events will therefore be triggered and monitored.

Step 4: Attach the variable to a GA4 event tag.

• Make a new GA4 Event Tag in GTM's "Tags" area.
• Configure the tag using your GA4 settings and choose the trigger generated in Step 3
• Ensure that this tag utilizes the newly created Data Layer Variables to relay data to GA4.

Testing

• Check that the custom event is properly pushed to the data layer and test the form submission procedure.
• To make sure the GA4 tag fires correctly when a form is submitted, use GTM's Preview and Debug mode.

Method 6 - HubSpot Form Tracking in GA4 Using GTM

When to Use 

HubSpot has a built-in form tracking feature which automatically utilises the HubSpot tracking code when the Form Builder in HubSpot is used. However,  when the forms are not built in HubSpot, manual integration with the HubSpot Tracking Code facilitates the form tracking. You can take this a step ahead with HubSpot GTM integration. 

HubSpot form tracking in GA4 using GTM allows creation of custom events and variables which enable tracking of specific form data points, and generating reports tailored to your business needs. HubSpot Free CRM already offers some tracking. But integrating GA4 via GTM gives much deeper insight.

With this HubSpot Form Tracking in GA4 you can manage all your tracking codes in one place, making it easier to add, update, or remove tracking without directly modifying your website's code. Thereby allowing a more holistic view of user behavior by analysing form submissions alongside other website data.

Step-by-Step Setup

The process of HubSpot form tracking using GTM has 4 major steps. These include:

Step 1: Generating a custom HTML tag in GTM.

Strep 2: Adding a dataLayer variable to read the HubSpot’s GUID.

Step 3: Creating a new Trigger in GTM 

Step 4: Linking it to a GA4 Event tag.

Testing 

• Enter GTM Preview mode in GTM.
• Submit the required form.
• Confirm that the GA4 Event tag fires as expected.

Track Better, Convert Smarter!

Set up GA4 form tracking using GTM & HubSpot

Book a meeting

Why Work with HubSpot Experts

To take form tracking beyond the basic process integrated in the HubSpot software, using Google Tag manager and GA4 analytics becomes essential. This setup is best done with the support of a HubSpot Expert. Let’s take a look at how this collaboration will benefit your business: 

• Time savings- Although the setup is not too complex, joining hands with a HubSpot expert like MarkeStac will definitely save up on the crucial time of your team.
• Error-free setup- Getting the work done by experts leaves no room for error ensuring that any custom modifications are done promptly with their years of experience. 
• Marketing alignment- Through the tie-up with your team, the HubSpot experts will ensure your form-tracking goals are perfectly aligned with the marketing objectives. 
• Conversion accuracy- The insight gained through this collaboration will help with conversions through insights about user behaviour, improved marketing strategies.

Conclusion

Form tracking in Google Analytics 4 (GA4) using Google Tag Manager (GTM) offers the perfect synchronisation so you don’t lose out on any crucial information/data. Each of the six methods relayed above work perfectly in this regard. 

Choosing the right one however will depend on your level of expertise (for DOM Scraping and Custom dataLayer Variables) and the redirection if any after form submission (whether it’s a thank you page or an element in the form page itself). Using HubSpot experts for the last method becomes pivotal in ensuring that every single interaction is recorded seamlessly. Contact us for more information on the same.