Capture conversions from HubSpot forms in Google Analytics GA4 (with GoogleTagManager)

Here you can find instructions to capture conversions from HubSpot forms in Google Analytics GA4 using GoogleTagManager ( if necessary also with ServerSideTracking). We run into a common problem here:

HubSpot forms are loaded in an iFrame and GoogleTagManager cannot automatically capture form submissions at this level. How we can work around this and still capture all form submissions, we will show you in five steps in the following tutorial.

Reading time 5 min

1. create data layer variables

This step happens in the GoogleTagManager (not the ServerSideManager if you are using ServerSideTracking).

First, we need to be able to access three data layer variables. To do this, we create them under the variables:

This step is not mandatory, but in our case we still want to pass the eventCategory, eventAction and eventLabel parameters to our GA4 property as well, just like in UA Analytics.

2. create trigger

Now we define a trigger that responds to the event name hubspot_form_submission and otherwise fires all results with that name.

3. create tag and assign trigger

As a final configuration step, we create a tag of tag type "GoogleAnalytics: GA4 event". This tag will then forward the event accordingly towards GA4 or ServerSideTracking container, depending on the configuration:

4. triggering an event after submitting a HubSpot form.

<script data-hubspot-rendered="true">
hbspt.forms.create({
region: "eu1",
portalId: "1337",
formId: "xyz-123",
onFormSubmit: function($form) {
window.dataLayer.push({
'event': 'hubspot_form_submission',
'eventCategory': 'forms',
'eventAction': 'submit',
'eventLabel': window.location.pathname});
}
});
</script>

HubSpot provides a function called onFormSubmit as part of its JavaScript Embedd API, which is triggered after the form is submitted. Here we hook in to set a few DataLayerVariables, which we then intercept in TagManager and pass on to GA4.

The DataLayerVariables 'eventCategory': 'forms', 'eventAction': 'submit' and 'eventLabel': window.location.pathname are not absolutely necessary, but facilitate a further filtering of the submissions within GA4.

5. mark events as conversion in GA4

In order to see the events that are now forwarded to GA4 as conversions, you have to create them as such under Configure -> Conversions. You do this via the button "New Conversion Event". Enter "hubspot_form_submission" as the event name.

Done: With these steps, you should be able to track embedded HubSpot forms as conversions within your GA4 property without many problems.