使用GTM对HubSpot Forms做GA4事件跟踪

更新时间：2026年8月16号

背景与原理

HubSpot Forms 通过 JavaScript 动态加载，GA4 或 GTM 内置的表单触发器通常无法直接识别其提交行为。因此，需要借助 HubSpot 官方提供的 JavaScript API 进行事件监听。

核心原理：

使用 addEventListener / onFormSubmitted 监听 HubSpot 表单提交成功事件。当提交成功时，通过 dataLayer.push 将事件数据发送至 GTM，再由 GTM 中的自定义事件触发器接收该事件，最终触发 GA4 事件代码完成跟踪。

以下实现方案同时兼容 HubSpot Forms v3 和 v4，将代码部署到包含 HubSpot Forms 的页面即可生效。

跟踪代码

点击展示跟踪代码

<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: '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: "form_submission",
          form_id: hsform.getFormId(),
          conversion_id: hsform.getConversionId(),
          form_data: transformedData
        });
      });
    }
  });
</script>

说明：该代码通过监听 message 事件捕获 HubSpot 表单提交回调。提交成功时，向 dataLayer 推送 form_submission 事件，并携带 form_id 和 form_data 两个参数，供后续变量配置使用。

接下来看如何在GTM上设置

GTM 配置步骤

Step 1 ：部署HubSpot Forms监听代码

在GTM中点击「代码」—「新建」—「选择一个代码类型以开始设置」——「自定义HTML」，命名为cHTML-Listen HubSpot Forms，做如下设置：

触发条件建议设置为仅包含 HubSpot Forms 的页面加载时触发，若不便区分页面，也可选择 All Pages。

Step 2 ：创建表单提交成功触发器

上一步代码中推送的事件名称为form_submission，据此创建自定义事件触发器：

在GTM中点击「触发器」—「新建」—「选择一个触发器类型以开始设置」——「自定义事件」，命名为form_submision(HubSpot Forms)，做如下设置：

Step 3 ：配置数据层变量

为后续GA4事件代码提供表单数据，需创建两个数据层变量：

在GTM中点击「代码」——「新建」——「选择一个变量类型以开始设置…」——「数据层变量」，命名为dlv-form_id(HubSpot Forms)，做如下设置：

同理设置dlv-form_data.email(HubSpot Forms)。

提示： 如需进行Google Ads增强型转化跟踪，可直接使用上述两个变量。参考：：Google Tag Manager上安装Google Ads增强型转化跟踪

Step 4 ：配置GA4事件跟踪代码

在GTM中点击「代码」—「新建」—「选择一个代码类型以开始设置」——「Google Analytics（分析）：GA4 事件」，命名为GA4 Event-form_submission(HubSpot Forms)，做如下设置：

Step 5 ：预览调试

配置完成后，使用 GTM 预览模式进行验证：

先不输入内容，直接点击提交，这时候不触发 form_submission 事件
然后输入内容，点击提交，提交成功，应该触发 form_submission 事件，且数据层中正确携带 form_id 和 form_data

不熟悉GTM调试方式的读者，可参考：Google Tag Manager中新的调试方式：Tag Assistant

Step 6 ：GA4自定义设置（可选）

若需要在GA4报告中使用 form_id 和 form_email 作为分析维度，需在 GA4 后台的「自定义设置」中提前注册对应的事件参数：

进入 GA4 管理后台 → 「自定义设置」；
创建自定义维度，分别映射 form_id 和 form_email；
保存后，参数数据将在后续报告中生效。

重要注意事项

Email属于PII数据：form_email 属于个人身份信息（PII），不建议作为常规分析维度使用。
GA4数据延迟：GA4 事件数据通常存在最多24小时的处理延迟，调试时若在 GA4 报告中未立即看到数据，属正常现象。建议优先通过 GTM 预览模式和 DebugView 验证事件是否正确触发

其他表单系统跟踪方案

如果你使用其他表单系统，可参考以下对应教程：

参考资料

https://www.analyticsmania.com/post/track-hubspot-forms-with-google-tag-manager-and-google-analytics-4/

有疑问可以在底部留言