Setting up data layer events for HubSpot forms
We can set up a custom data layer event and track submissions with HubSpots forms by using an event listener to fire a data layer event on a successful form submission. This uses the HubSpot global form events code to fire a data layer event
In this guide, we only create 1 event and that is for the successful submission of the form.
This simply fires a data layer event and passes 1 piece of variable information which is the ID of the form.
HubSpot form event listener tag configuration
Tag name: HubSpot Form – Event Listener
Tag type: Custom HTML
Trigger: All pages (page view) (that the forms exist on)
HTML:
<script>
window.addEventListener("message", function(event) {
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
dataLayer.push({
'event': 'hsFormSubmission',
'hsFormID': event.data.id})
}
});
</script>

Creating a data layer variable to capture the form ID
In the event listener code we pass the variable “hsFormID” with HubSpot’s id of the form. We need to configure a variable within the Google Tag Manager interface to use this.
Variable configuration
Variable name: DLV – HubSpot Form ID
Variable type: Data layer variable
Data layer variable name: hsFormID
Data layer version: version 2

Sending HubSpot form submissions data to Google Analytics 4
The code above can be used to create a tag and trigger to send to many different third parties, however, in this guide we will show you how to send this information to GA4.
We will need to create a GA4 event tag and trigger to be able to pass this information back.
This guide assumes you already have a Google Analytics 4 configuration tag set up.
Firstly, we will need to create a trigger to fire on the new HubSpot form data layer event.
Trigger configuration for HubSpot form submissions
Trigger name: HubSpot – Form Submission
Trigger type: custom event
Event name: hsFormSubmission (exactly matching the event name in the HubSpot form listener tag)
Trigger fires on: all custom events

GA4 tag configuration for HubSpot form submission events
Tag name: GA4 – Event – Form Submission Success
Event name: form_submission
Event parameters:
form_id = {{DLV – HubSpot Form ID}}
Trigger: HubSpot – Form Submission (custom event)

We create the GA4 tag with an event name of form_submission. This name can be customised to fit in with other form submission events you may have. If you choose to do this it is recommended to pass another parameter to easily segment the form provider.
No Comment! Be the first one.