Track HubSpot form submissions using Google Tag Manager and Google Analytics

abstract painting

If you’re embedding HubSpot forms on web pages, there’s good reason to track those submission actions in Google Analytics and Google Tag Manager. But also, by monitoring for submission actions using GTM, you can then harness that data for other platforms such as Facebook Ads, LinkedIn Ads or Bing Ads etc. This ia a great way to connect conversions from submissions to campaigns.

So let’s get started – HubSpot has kindly created a super useful Events API which we can watch for changes relating to our embedded forms. As a result, the code to track such an event is simple.

Create a new HTML Tag and insert the following script with the trigger All Pages

<script>
    window.addEventListener("message", function (event) {
        if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
            window.dataLayer = window.dataLayer || [];
            try {
                window.dataLayer.push({
                    'event': 'hubspot-form-submitted'
                });
            } catch (e) {
                console.warn("Datalayer push error: " + e)
            }
        }
    });
</script>

With this tag in place, form submissions will be tracked on your web property. The next step is to fire this information into Google Analytics.

Create a new Trigger

nametrigger typevalue
CE – HubSpot – Form SubmittedCustom Eventhubspot-form-sumitted

Finally, create a new Universal Google Analytics Tag with the following settings

tag settingvalue
Tag NameGA – Event – Hubspot – Form Submitted
Track TypeEvent
CategoryKey Engagement
ActionHubSpot Form Submitted
Label<empty>
TriggerCE – HubSpot – Form Submitted

With those three elements in place, give it a test run in preview mode by submitting a HubSpot embedded form. You should be able to see the Events firing in Google Analytics under the Real Time Events report.