HubSpot Form Submission Tracking with GTM and Deduplication

Lead tracking accuracy is important in determining the success of lead generation on your website or through your marketing efforts. It gives you an insight into how many leads you are generating and also serves as data that can be analyzed in Google Analytics 4 (GA4).

However, duplicate form submission tracking is one of the most frequent problems that may happen while tracking forms on the website, even if it is a HubSpot form. Whenever there is duplication of form submissions, your conversion data becomes inflated, which makes the measurement of your website and marketing performance much harder.

If you’re using HubSpot forms and want to track form submissions, this guide will show you how to set up tracking with Google Tag Manager (GTM) and ensure that each successful submission is recorded only once in GA4.

Why Duplicate Form Submission Tracking Occurs

By default, HubSpot uses each contact’s email address to detect and prevent duplicate contacts. So once a visitor/user has filled out a form on your website, and has later on filled out another form using the same email address, HubSpot will not duplicate this contact but rather record this action within the activity stream of the existing contact.

(From New Submission to Contact Reconversion)

Yet, the data recorded in your analytics may include duplicates depending on how Google Tag Manager (GTM), Google Analytics 4 (GA4), and other tracking tools you use are configured. As a result, your analytics may no longer reflect actual user activity.

But then, before we look at the solution, it’s important first to understand why duplicate form submission tracking occurs. Determining the root cause will allow you to implement the correct solution so that each completed form submission gets counted only once.

Here are the common causes of duplicate conversions:

• The form is submitted several times, for example, by clicking the Submit button multiple times before processing, and there is no mechanism preventing double submissions.
• The thank-you page is refreshed, triggering the conversion again because the conversions are tracked based on the page view.
• GTM triggers, or GA4 Event tags, have been set up for tracking the same form submission.
• Several HubSpot form events have been applied to fire off the same conversion in GTM.
• The same conversion event is fired by several tracking tools (GTM, HubSpot, Google Ads, and some other plugin).

And most of these issues can be prevented with the right tracking setup. Let’s walk through how to configure this one using Google Tag Manager.

Understanding the HubSpot Tracking Flow to GTM and GA4

Before we proceed with the methods, it is also important that we get some insight into how the entire process of form submission tracking takes place, which is :

User → HubSpot Form Submission → Google Tag Manager (GTM) → Google Analytics 4 (GA4) Conversion

When a form submitted through HubSpot is successfully submitted, GTM will be able to capture the submission and trigger an event in GA4. Once GA4 captures the event as a key event, it qualifies as a conversion.

And in order to have an accurate report, this particular event will need to fire once per successful form submission.

GTM Setup for Tracking HubSpot Form Submission

Now that you understand how it all works and what normally causes duplication, it’s time for you to configure the Google Tag Manager so that you can track the form conversions from HubSpot. All you need to do is make sure you have the GTM code on your website and be familiar with tagging and triggers in the GTM.

Since HubSpot forms are JavaScript-driven (and, in some implementations, embedded within an iframe in some legacy or third-party implementation), Google Tag Manager’s built-in Form Submission trigger isn’t always a reliable way for HubSpot form tracking because many submissions don’t trigger a native HTML form submit event that GTM listens for. To address this, we’ll create a Custom HTML tag that hooks into HubSpot’s form submission callback and pushes a custom event to the data layer whenever a form is successfully submitted.

In Google Tag Manager, create a new Custom HTML tag and paste the script below into the HTML field. Add the “All Pages” trigger, so that this listener will get loaded on all those pages that have HubSpot forms. Then finally, save the tag with an appropriate name such as “HubSpot Listener”.

<script>

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

//listener for HS forms (v3) old version

window.addEventListener(‘message’, function(event) {

if (event.data.type === ‘hsFormCallback’ && event.data.eventName === ‘onFormSubmitted’) {

window.dataLayer.push({

event: ‘hs_form_submission’,

form_id: event.data.id,

conversion_id: event.data.data.conversionId,

form_data: event.data.data.submissionValues,

});

}

});

//listener for HS forms (v4)

window.addEventListener(“hs-form-event:on-submission:success”, function(event) {

var hsform = HubspotFormsV4.getFormFromEvent(event);

if (hsform) {

hsform.getFormFieldValues().then(function(fieldValues) {

var transformedData = fieldValues.reduce(function(obj, item) {

var key = item.name.split(‘/’)[1];

if (key) {

obj[key] = item.value;

}

return obj;

}, {});

window.dataLayer.push({

event: “hs_form_submission”,

form_id: hsform.getFormId(),

conversion_id: hsform.getConversionId(),

form_data: transformedData

});

});

}

});

</script>

How the Code Works (v3 vs. v4)

As you can see, the above code has two main parts.

• “message listener”: It is the code that will listen to all events from the browser and checks whether each of the messages gets delivered after successful submission of the form through HubSpot.
• “hs-form-event:on-submission:success listener”: The code will listen to the success event of HubSpot, which means that it detects when there has been a successful submission of the form.

The use of both listeners in GTM will make it compatible with various versions of HubSpot forms, either the new or the old version. It ensures that there is consistency with regards to the successful submission of the form.

With the creation of new user-defined variables “Data Layer Variable”, the Google Tag Manager will be able to track the data being sent via the HubSpot listener and will be stored in the dataLayer, whether it is form IDs, form name, conversion ID, etc.

A trigger that we will use further to send the GA4 Event tag on the successful submission of the HubSpot form.

The next step is to create a GA4 Event tag. This tag sends your custom HubSpot form submission event to Google Analytics 4 (GA4) and fires only after a successful HubSpot form submission is detected.

Also, add the following parameters related to events:

• form_id – Specifies the particular form submitted via HubSpot. In case there is more than one HubSpot form available on your website, this parameter helps differentiate forms from each other in order to evaluate their performance in GA4.
• conversion_id (optional) – Unique ID for each conversion of a HubSpot form. While this parameter does not solve duplication in a client-side GTM implementation by itself, it still comes in handy for debugging, validation of your implementation, and some advanced future deduplication techniques at the server side.

Set the setting for the Tag Firing Option to Once Per Event. It ensures that the GA4 Event tag does not fire multiple times on the same GTM event. Lastly, link the custom event trigger that you have created in step 2 to the GA4 Event tag.

Then you should add the trigger created in Step 3.

Before publishing your GTM container, spend some time on testing your implementation by means of GTM Preview Mode. In this way, you will be able to make sure that your tags and triggers are working correctly and your GA4 Event tag fires once for each submitted HubSpot form.

Further on, use GA4 DebugView to verify your implementation after testing with GTM Preview Mode. In this way, you will be able to verify that all your events are being sent to GA4 and that no duplicates exist among these events.

Important thing to remember for HubSpot form deduplication

For most HubSpot + GTM implementations, these are the important steps:

• Track only successful HubSpot form submissions
• Using a HubSpot form submission listener (such as the HubSpot callback event) is much more reliable than:
• Button click triggers
• GTM’s built-in Form Submission trigger

These methods can fire even when validation fails or may not work consistently with HubSpot’s JavaScript forms.

• Use one custom event as your trigger.

Your GA4 tag should fire only from that custom event (for example, hubspot_form_submission), not from multiple triggers. This will stop multiple channels from firing the GA4 event.

• Don’t use multiple listeners/tags.

• Make sure there is no:
• Two HubSpot listener tags
• Two GA4 Event tags that fire on the same submission
• Some other plugin or script that sends the same conversion to GA4.
• GA4 tag should be set to “Once per Event”.This prevents the tag from firing more than once for the same GTM event, but it will not stop duplicate dataLayer events or duplicate events sent by other scripts.

However, if your conversion can be sent from multiple sources (for example, GTM and server-side tracking or another integration), use a unique event or conversion ID where supported so duplicate events can be identified and discarded.

Conclusion

And that’s it! You now know how to track form submissions via HubSpot forms with Google Tag Manager, send that data to Google Analytics 4, and how to avoid any duplicate conversions

Although this might look like a bit of a complicated process, that doesn’t mean you shouldn’t do it. This is definitely an investment of time but one that is worth making, as once you get this right, you will be able to use your data to your advantage.

Knowing that you’re working with correct data will surely help you understand the performance of your forms and marketing campaigns, create better reports, and make the right decisions.