Tracking HubSpot form submissions in Google Analytics 4 (GA4) using Google Tag Manager (GTM) is crucial for understanding user interactions and optimizing conversions. Since HubSpot forms are often embedded within iframes, tracking them requires a specialized approach.
This guide will walk you through two methods to track HubSpot form submissions in GA4:
- Using the HubSpot Form Listener with Google Tag Manager
- Tracking Form Submissions within an Iframe using Mutation Observers
1. Using the HubSpot Form Listener in Google Tag Manager
HubSpot provides a built-in JavaScript event listener (hsFormCallback), which sends a message when a form is successfully submitted. You can capture this event in Google Tag Manager and push the data into GA4.
Steps to Implement the HubSpot Form Listener in GTM
Step 1: Create a Custom HTML Tag in GTM
- Open Google Tag Manager.
- Go to Tags > New and select Custom HTML as the tag type.
- Add the following script inside the Custom HTML Tag:
<script type="text/javascript">
window.addEventListener("message", function(event) {
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
window.dataLayer.push({
'event': 'hubspot-form-success',
'hs-form-guid': event.data.id
});
}
});
</script>
- Set the Trigger to All Pages.
- Save and Publish the tag.
Step 2: Create a GA4 Event Tag for HubSpot Form Submissions
- Go to Tags > New and select Google Analytics: GA4 Event.
- Choose your GA4 Configuration Tag.
- In Event Name:
hubspot_form_submit - Click on Event Parameters, and add:
- Parameter Name:
form_id→ Value:{{hs-form-guid}} - Parameter Name:
page_url→ Value:{{Page URL}}
- Parameter Name:
- Under Triggering, click + to create a new trigger:
- Select Custom Event
- Set Event Name to
hubspot-form-success - Match Some Events where
eventequalshubspot-form-success
- Save and Publish the tag.
✅ Your HubSpot form submissions will now be tracked in GA4 under the event name hubspot_form_submit.
2. Tracking HubSpot Form Submissions Inside an Iframe
Since HubSpot forms are often embedded in iframes, tracking them requires a different approach. Mutation Observers can detect changes inside an iframe (such as a form submission), and push the event to Google Tag Manager.
Step 1: Add the Custom HTML Tag for Iframe Form Tracking
- In Google Tag Manager, go to Tags > New and select Custom HTML.
- Add the following script:
<script>
(function() {
function abuDataLayer() {
var iframeSelector = 'iframe'; // Change this if your iframe selector is different
var iframe = document.querySelector(iframeSelector);
var isFormSubmitted = false;
var isInsideIframe = false;
var isCodeExecuted = false;
var iframeHeight;
var observer = new MutationObserver(function (_mutationsList, observer) {
var currentHeight = iframe.offsetHeight;
var iframeHeightChange = Math.abs(((currentHeight - iframeHeight) / iframeHeight) * 100);
if (!isFormSubmitted && iframeHeightChange > 40) {
observer.disconnect();
isFormSubmitted = true;
window.dataLayer = window.dataLayer || [];
dataLayer.push({
event: 'iframe_form_submit',
form_location: window.location.href,
iframe_id: iframe.getAttribute('id'),
iframe_class: iframe.getAttribute('class')
});
}
});
function handleMouseOver(event) {
if (event.target.closest(iframeSelector)) {
isInsideIframe = true;
} else {
isInsideIframe = false;
}
}
function handleFormSubmission() {
var formInsideIframe = iframe.contentDocument.querySelector('form');
formInsideIframe.addEventListener('submit', function (event) {
var formData = {};
var formInputs = formInsideIframe.querySelectorAll('input, select, textarea');
for (var i = 0; i < formInputs.length; i++) {
var input = formInputs[i];
if (input.type === 'radio') {
if (input.checked) {
formData[input.name] = input.value;
}
} else if (input.type === 'checkbox') {
if (!formData[input.name]) {
formData[input.name] = [];
}
if (input.checked) {
formData[input.name].push(input.value);
}
} else {
formData[input.name] = input.value;
}
}
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'iframe_form_submit',
form_location: window.location.href,
iframe_id: iframe.getAttribute('id'),
iframe_class: iframe.getAttribute('class'),
user_inputs: formData
});
});
}
document.addEventListener('mouseover', handleMouseOver);
window.addEventListener('blur', function () {
if (isInsideIframe && !isCodeExecuted) {
isCodeExecuted = true;
document.removeEventListener('mouseover', handleMouseOver);
window.dataLayer = window.dataLayer || [];
dataLayer.push({
event: 'form_start',
form_location: window.location.href,
iframe_id: iframe.getAttribute('id'),
iframe_class: iframe.getAttribute('class')
});
if (iframe.contentDocument) {
handleFormSubmission();
} else {
iframeHeight = iframe.offsetHeight;
observer.observe(iframe, { attributes: true, childList: true, subtree: true });
}
}
});
}
abuDataLayer();
})()
</script>
- Set the trigger to All Pages.
- Save and Publish the tag.
Step 2: Create a GA4 Event Tag for Iframe Form Submissions
- Go to Tags > New and select Google Analytics: GA4 Event.
- Choose your GA4 Configuration Tag.
- In Event Name, enter:
iframe_form_submit - Click on Event Parameters, and add:
- Parameter Name:
form_location→ Value:{{form_location}} - Parameter Name:
iframe_id→ Value:{{iframe_id}} - Parameter Name:
iframe_class→ Value:{{iframe_class}} - Parameter Name:
user_inputs→ Value:{{user_inputs}}
- Parameter Name:
- Under Triggering, create a new Custom Event Trigger:
- Event Name:
iframe_form_submit
- Event Name:
- Save and Publish the tag.
✅ Your iframe-embedded HubSpot form submissions will now be tracked in GA4 under the event name iframe_form_submit.
Final Thoughts
By implementing either method, you ensure that HubSpot form submissions are accurately tracked in GA4. This allows you to measure form conversion rates, optimize your marketing funnel, and make data-driven decisions.
🔹 Use the HubSpot Form Listener if the form is not inside an iframe.
🔹 Use the Iframe Tracking Method for embedded HubSpot forms.
Would you like help setting up GA4 conversion tracking for these form submissions? 🚀