24 Oct

Tracking HubSpot Form Submissions with Google Tag Manager

To track HubSpot form conversions in Google Tag Manager, start by copying the event listener code and placing it into a custom HTML tag in GTM, set to trigger on a page view.

Then, head over to the triggers section and create a custom event trigger called [hubspot-form-success]. This trigger will be the key to firing your marketing tags and pixels, including Google Analytics, Facebook Pixel, Mixpanel, Piwik Pro, and more.

Remember to ensure your setup complies with privacy regulations. You can use trigger conditions in Google Tag Manager to fine-tune your conversions, tracking them only on specific pages, form IDs, or for certain user types.

An important note: an event named `[hubspot-form-data]` triggers before the HubSpot form submission is completed. This captures all the data from the form fields, which can then be used to enrich data when the [hubspot-form-success] event fires after a successful submission.

Pro Tip: Create a Data Layer variable to access and use the data fields effectively.

<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>

Leave a Reply