Track HubSpot forms with Google Tag Manager and Google Analytics 4

Google Analytics Screen
Measurement
26th Nov 2025

Tag Manager and Google Analytics 4

Unfortunately with no built in connection between Hubspot generated forms (via iframe) and Google Analytics it can be difficult for marketers to effectively measure and optimise for conversions across ad platforms.

We have detailed our preferred and the most simple solution we have found to date in the steps below.

Prerequisites

In order to get started, ensure you have:

  • A HubSpot form embedded on your website.

  • Google Tag Manager installed on that same site.

  • A GA4 configuration tag published in your GTM container.

  • Access to publish Google Tag manager and edit in Google Analytics 4.

Ensure all of these are in place before getting started.

  1. How HubSpot forms work

HubSpot forms are often embedded either as:

  • an inline form - using iframe/embedded code

  • a popup form

These are loaded dynamically with JavaScrip, so traditional GTM “Form Submission” triggers likely will not work correctly.

The first step is to add a listener script that will:

  • Waits for a HubSpot form to submit

  • Pushes a structured message into the dataLayer

2. Add a dataLayer push when a HubSpot form is submitted

Step 2.1: Add a Custom HTML tag in GTM

1.In Google Tag Manager, go to Tags ->New.

2.Choose Tag Type: Custom HTML.

3.Name it something clear like: HS - Form Submission Listener.

4.Paste this script into the Custom HTML tag:

<script>

window.dataLayer = window.dataLayer || [];

//listener for older version (v3) of HS forms

window.addEventListener('message', function(event) {

  if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {

    window.dataLayer.push({

      event: 'hs_form_submission',

      form_id: event.data.id,

      conversion_id: event.data.data.conversionId,

      form_data: event.data.data.submissionValues,

    });

  }

});

//listener for v4 HS forms 

window.addEventListener("hs-form-event:on-submission:success", function(event) {

    var hsform = HubspotFormsV4.getFormFromEvent(event);

    if (hsform) {

      hsform.getFormFieldValues().then(function(fieldValues) {

        var transformedData = fieldValues.reduce(function(obj, item) {

          var key = item.name.split('/')[1]; 

          if (key) {

            obj[key] = item.value;

          }

          return obj;

        }, {});  

        window.dataLayer.push({

          event: "hs_form_submission",

          form_id: hsform.getFormId(),

          conversion_id: hsform.getConversionId(),

          form_data: transformedData

        });

      });

    }

  });

</script>

This code allows the following to happen:

  • It uses HubSpot’s own hbspt.forms.create() method 

  • It injects a new onFormSubmit callback.

  • When the user submits, we push an event into the dataLayer.

5.Set this script to trigger on ALL PAGES:

  • Trigger type: All Pages (Page View -> All Page Views).

  • Name it All pages.

6.Save the tag.

Part 3. Create a Custom Event trigger in GTM for “hubspot_form_submit”

Now we need GTM to react when our script pushes the event: 'hs_form_submission'.

1.Go to Triggers -> New.

  • Trigger type: Custom Event.

  • Event name: hs_form_submission

  • This trigger fires on: All Custom Events (keep it broad unless you want to filter by specific formId).

  • Name this trigger: HubSpot Form Submit.

This trigger will be used by your GA4 event tag.

Trigger Config for Custom Event

Part 4. Create a GA4 Event tag in GTM

  1. Go to Tags -> New.

  2. Tag Type: GA4 Event (sometimes called "Google Analytics: GA4 Event").

  3. Configuration Tag: choose your existing GA4 config tag (the one that contains your Measurement ID, e.g. G-XXXXXX).

  4. Event Name:
    hubspot_form_submit
    (You can call it whatever you like, but try to keep it consistent!)

  5. Triggering:

    • Add the trigger you created earlier: HubSpot Form Submit.

  6. Name this tag: GA4 - Event - HubSpot Form Submit.

  7. Save.

Part 5. Test in Preview

You want to confirm the full flow before publishing.

Use GTM Preview Mode

  1. In GTM, click Preview.

  2. Enter your site URL where the HubSpot form lives.

  3. The Tag Assistant window will open.

Now:

  • Submit the HubSpot form (use fake details if you want).

  • In Tag Assistant, look at the left side event timeline.

  • You should see an event called hubspot_form_submission.

Click that event.

You should confirm:

  • The GA4 - Event - HubSpot Form Submit tag fired.

  • The dataLayer for that event contains formId, formName, pageUrl.

If you don’t see the custom event in the left panel, the listener might not have run (often due to script loading order). In that case, make sure the listener tag is set to fire on All Pages and not blocked by tag sequencing rules.

Part 6. Mark this as a conversion in GA4

If this form is a lead form you likely will want it to count as a conversion in GA4. This allows for easier reporting and connection to 3rd party services (such as Google Ads).

In GA4, “conversions” are just events you flip on.

  1. Go to GA4 -> Admin -> Conversions.

  2. Click New conversion event.

  3. Enter the exact event name you used in the GA4 Event tag.
    Example:
    hubspot_form_submit

  4. Save.

That's it. You're now tracking HubSpot Forms in GA4 via GTM.