RESOURCES/HUBSPOT LISTENER
HubSpot form tracking listener for Google Tag Manager
Embedded HubSpot forms post messages to the parent page when submitted. This listener pushes two events to the dataLayer: hubspot-form-data on submit, carrying the form GUID and field data, and hubspot-form-success once HubSpot confirms the submission. Fire your conversion tags on hubspot-form-success to avoid counting failed submits.
hubspot-listener.html
<script type="text/javascript">
window.addEventListener("message", function(event) {
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
window.dataLayer.push({
'event': 'hubspot-form-data',
'hs-form-guid': event.data.id,
'hs-formData': event.data.data
});
}
});
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>Install in 3 steps
- 01
In GTM, create a Custom HTML tag and paste this code.
- 02
Set the trigger to All Pages, or only the pages where the form is embedded.
- 03
Open GTM Preview, submit a test form, and confirm the event appears in the dataLayer. Then use that event as the trigger for your GA4, Meta, or Google Ads tags.
Common problems
More free listeners:Typeform · Calendly · GoHighLevel