hubspot form Event Listener

Enhance your marketing data with this event listener, which makes it easy to listen to successful Hubspot form submissions and track them as conversions in analytics (Google Analytics, Mixpanel, Facebook, Google Ads, etc.) using Google Tag Manager.

How to track hubspot form submission with google tag manager

To track Hubspot form conversions with Google Tag Manager, all you’ll have to do is copy the event listener code and paste it into your custom HTML tag in GTM, trigger it on pageview.

Next, you’ll have to navigate to triggers to create a custom event trigger type [hubspot-form-success] which will be used to fire your marketing tags/pixels such as Google Analytics, Facebook Pixels, Mixpanel, Piwik Pro, etc.

Also, ensure your implementation is privacy compliant. Using trigger conditions in Google Tag Manager, you can streamline your conversion to be recorded on certain pages, form IDs or user types.

One thing to note is that an event gets triggered before the Hubspot form is successfully submitted, the event name is [hubspot-form-data].

This event gets all the form field data captured in the form and can be used on the successful form submission event [hubspot-form-success] to enrich your data.

? Pro Tip: To access the data fields, create a datalayer variable.

? Credit:

3WhiteHats Initially Created This Code (we made modifications to capture the form data)

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