How to Track HubSpot Form Submissions in GA4

HubSpot comes with plenty of perks—but tracking and analytics isn’t its strongest suit. If you’re using HubSpot forms on your website, that’s a solid start. But here’s the catch: without connecting those form submissions to Google Analytics 4, you’re basically flying blind. You won’t know which traffic sources are actually bringing in leads—and that means missed opportunities and wasted spend. This guide walks you through a reliable, tested method to track HubSpot form submissions in GA4 using Google Tag Manager (GTM).

Why are the built-in GA4 Form Submission events are failing with HubSpot

If you’ve tried GTM’s built-in Form Submission or Element Visibility triggers—or even set up form events directly in GA4—you’ve probably noticed something frustrating: they just don’t work with embedded HubSpot forms.

That’s because HubSpot forms are loaded dynamically and don’t behave like regular HTML forms. But don’t go hunting for complex workarounds just yet—thankfully, the brilliant folks at Three White Hats have created a custom listener script that solves this problem beautifully.

What’s a Listener Script?

Think of a listener script like a person standing in a room, quietly watching for something specific to happen—like someone ringing a doorbell.

In our case, the “doorbell” is when someone submits a HubSpot form on your website.

The listener script is a small piece of JavaScript code that you add to your site (through Google Tag Manager). Its job is to:

1. “Listen” or watch for the moment a user submits a HubSpot form.
2. Catch that moment when the form is successfully submitted.
3. Send a signal (aka an “event”) into Google Tag Manager’s data layer—like saying “Hey! Someone filled out the form!”

Step 1: Add the Listener Script in GTM

Here’s how you get started:

1. Head to Tags in GTM → Click New
2. Choose Custom HTML as the tag type
3. Paste this script from Julius

<script type="text/javascript">
  window.addEventListener("message", function(event) {
    if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
      window.dataLayer.push({
        'event': 'hubspot-form-success',
        'hs-form-guid': event.data.id,
        'email' : event.data.data.submissionValues.email
      });
    }
  });
</script>

1. Set the trigger to All Pages (or wherever your HubSpot form appears)
2. Name it something like cHTML – HubSpot Listener and Save

This script listens for HubSpot’s form submission event and pushes a custom event into GTM’s dataLayer.

Step 2: Test It in Preview Mode

Now let’s test if the listener is working:

1. Click Preview in GTM
2. Load the page with your HubSpot form
3. Submit the form

You should see a new event in the dataLayer called hubspot-form-success.

Step 3: Create the Trigger in GTM

Time to catch that event!

1. Go to Triggers > New
2. Choose Custom Event
3. Set Event Name to hubspot-form-success (exactly as is)
4. Name it and Save

This trigger will now listen for successful HubSpot form submissions.

Step 4: Capture the Form ID (super useful!-But optional)

If you have more than one form on your site, you’ll want to know which form was submitted.

Let’s pull the formId into GTM:

1. Go to Variables > User-Defined > New
2. Choose Data Layer Variable
3. Set the variable name to formId
4. Name it something like dlv – formId and Save

Boom. Now we can pass the form ID into GA4 too.

Step 5: Create Your GA4 Event Tag

Here’s where it all comes together:

1. Go to Tags > New
2. Choose GA4 Event Tag
3. Select your existing GA4 Configuration tag
4. Set Event Name to generate_lead (recommended by GA)
5. Under Event Parameters, add:
6. Use the trigger you created earlier (hubspot-form-success)
7. Name your tag GA4 Event – "generate_lead" (why? this is a recommended event from GA4) and save.

Step 6: Final Testing

1. Refresh Preview Mode
2. Submit the form again
3. You should see the generate_lead tag fire in GTM
4. Head to GA4 >Reports > Realtime Overview
5. Confirm the generate_lead event appears, along with the form_id parameter

It may take up to 24 hours for this to show in GA4 standard reports—so don’t panic if you don’t see it immediately.

Step 7: Register the Form ID in GA4 Reports

To use the form_id in GA4 reports:

1. Go to GA4 > Configure > Custom Definitions
2. Click Create Custom Dimension
3. Set:
4. Save it

This will allow you to filter or break down form submissions by specific forms in GA4.

Don’t Forget to Publish Your GTM Container!

Once everything is working in preview mode:

• Click Submit in GTM
• Add a name + description for your version
• Hit Publish

You’re live! 🎉

If this helped you out, pass it along or drop a comment on Julius’s original video—he’s the real MVP for breaking this down.