Why You Need Enhanced HubSpot Form Tracking

HubSpot’s native tracking and GTM integrations are limited. When your form is embedded in an iframe, GTM can’t “see” the form submission event.

That’s where this enhanced listener comes in; it captures HubSpot form submissions (from both V3 and V4 APIs) and pushes the data to the dataLayer, allowing you to:

• Fire conversion tags (GA4, Meta Pixel, LinkedIn, TikTok, etc.)

• Capture user data such as Name, email, Phone, etc.

• Maintain consistent tracking across HubSpot-hosted and embedded forms

Step 1: Install the HubSpot form listener

Add the following script to your site through GTM or directly in your page code.

<script>
(function() {
  function pushData(data) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push(data);
  }
    function cleanFields(fields) {
    var exclude = ['email','phone','mobilephone','firstname','lastname','address','city','state','country','zip','hs_context','g-recaptcha-response'];
    var out = {};
    for (var k in fields) {
      if (!fields.hasOwnProperty(k)) continue;
      var v = fields[k];
      if (!v || exclude.indexOf(k) !== -1) continue;
      out[k.indexOf('/') !== -1 ? k.split('/').pop() : k] = v;
    }
    return out;
  }

  // HubSpot v4 form submit
  if (typeof HubspotFormsV4 !== 'undefined') {
    window.addEventListener('hs-form-event:on-submission:success', function(e) {
      var f = HubspotFormsV4.getFormFromEvent(e);
      if (!f) return;
      f.getFormFieldValues().then(function(fields) {
        var formData = {};
        for (var i = 0; i < fields.length; i++) formData[fields[i].name] = fields[i].value;
        pushData({ event: 'hubspot_form_submission', form_id: f.getFormId(), data: cleanFields(formData) });
      });
    });
  }

  // HubSpot v3 iframe form submit
  window.addEventListener('message', function(e) {
    if (e.data && e.data.type === 'hsFormCallback' && e.data.eventName === 'onFormSubmitted') {
      pushData({ event: 'hubspot_form_submission', form_id: e.data.id, data: cleanFields(e.data.data.submissionValues || {}) });
    }
  });
})();
</script>

Step 2: Create a new Custom HTML Tag in GTM

• Go to Tags → New → Custom HTML

• Paste the above script inside

• Set the Trigger to “All Pages” or preferably, only on pages that contain HubSpot forms

• 
  

💡 Tip: Limiting it to specific pages improves page performance and tag firing accuracy.

• 
  

Step 3: Create dataLayers Variables

Form ID

User data

These variables let you capture and send the user information from your HubSpot form submissions to your advertising platforms.

Step 4: Send Data to GA4, Meta Pixel, or other platforms

You can now use the event hubspot_form_submission to fire your GA4 conversion event, Meta Pixel lead, or other platform tags.

This setup ensures consistent form tracking, even for HubSpot forms embedded via iframe.

Final Thoughts

By using this listener script with GTM, you bridge the tracking gap caused by HubSpot iframes.

You’ll get more reliable conversion data, deeper user insights, and better campaign optimization across all platforms.