HubSpot Form Event Listener

HubSpot is a CRM platform with all the software, integrations, and resources you need to connect your marketing, sales, content management, and customer service. HubSpot’s connected platform enables you to grow your business faster by focusing on what matters most: your customers.

With this simple Google Tag Manager Event Listener, you can track interactions like form submissions on Hubspot, and send them as conversions in analytics (Google Analytics, Mixpanel, Facebook, Google Ads, Twitter, etc.) using Google Tag Manager.

Simply copy the code into your Google Tag Manager with the necessary configuration and you are ready to begin collecting those events when they trigger.

How to track HubSpot form submission with Google Tag Manager

Hubspot is one of the leading marketing technology providers in the world. It is highly likely that you will encounter a website that uses a HubSpot form in your daily analytics journey, hence it is very important to have this HubSpot form submission tracking skill under your belt.

You’ll need Google Tag Manager and the HubSpot form submission event listener javascript code.

The code

    				
					<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>
    • Create a custom event trigger [hubspot-form-success] which will be used to fire your marketing tags such as Google Analytics 4, Facebook, Piwik Pro, etc.
    • Note that an event [hubspot-form-data] gets triggered before the Hubspot form is successfully submitted.
    • This event gets all the form field data captured in the form and can be used to enrich your data😉.
    • The event happens only on successful submission of HubSpot forms
    • Connect your marketing tag(s) to this trigger to send events to your analytics platform like GA4, Facebook, Piwik Pro, etc.
    • Trust But Verify (TBV). Test, test, and debug
    • Publish once everything is okay.

    Remember that you have to create DataLayer Variables to correct the form data

     

    Credit: Originally created by 3WhiteHats, also modified by dumbdata.co, and further refined steps by analyticsdome.com

    Share the Post:

    Related Posts