How to Track HubSpot Form Submissions via Google Tag Manager

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.