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

更新时间：2025年8月16号

这一节介绍如何在Google Tag Manager（GTM）中，对HubSpot Forms实现GA4表单提交事件跟踪。

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

原理说明

HubSpot Forms 提供了 JavaScript API，可在表单成功提交后触发回调函数。

核心逻辑是：使用addEventListener / onFormSubmitted 监听HubSpot表单提交成功事件，在提交成功时，通过dataLayer发送数据，在GTM中使用自定义事件触发器接收该事件。

以下代码支持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>

设置示例说明

Step 1 ：设置HubSpot Forms监听代码

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

触发条件可以设定仅在HubSpot Forms表单的页面即可，也可以选择All Pages。

Step 2 ：设置表单成功触发器

从上一步我们已经知道了event是form_submission。

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

Step 3 ：设置变量

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

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

如果你要做增强转化跟踪，可以使用这两个变量，延伸阅读：Google Tag Manager上安装Google Ads增强型转化跟踪

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

最后就是设置代码。

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

Step 5 ：预览调试

最后就是测试：

• 先不输入内容，直接点击提交，这时候应该不触发。
• 然后输入内容，点击提交，提交成功，应该是触发。

如果你不会调试，请看：Google Tag Manager中新的调试方式：Tag Assistant

Step 6 ：自定义设置

如果想在GA4中使用from_id和form_email，需要再GA4里的自定义设置里注册。

注意事项

• Email 属于 PII，仅建议用于：增强型转化和用户同意场景
• GA4数据通常有24小时延迟

其他表单系统参考

如果你是使用其他表单系统，延伸阅读：

• Google Analytics 4 上对Gravity Forms表单做跟踪
• Google Analytics 4 上对Contact Form 7做表单跟踪
• Google Analytics 4 上对Klaviyo Form表单做跟踪

参考资料

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