嵌入HubSpot表单Google Ads流量归因异常问题咨询

我在网站中嵌入了HubSpot表单，但来自Google Ads的流量无法正确归因，全部显示为“直接流量”。需要明确以下几点：

1. 该归因的技术实现原理
2. 是否需要手动传输数据才能让归因正常工作
3. 适配该场景的官方文档指引

当前Vue实现代码：

<script setup>
import { HUBSPOT_PORTAL_ID } from "@/utils/constants";

const props = defineProps({
  formId: {
    type: String,
    required: true,
  },
});

const cookieEnabledList = useCookie("enabledList");

onMounted(() => {
  const script = document.createElement("script");
  script.src = "https://js.hsforms.net/forms/v2.js";
  document.body.appendChild(script);
  script.addEventListener("load", () => {
    if (window.hbspt) {
      window.hbspt.forms.create({
        portalId: HUBSPOT_PORTAL_ID,
        formId: props.formId,
        target: ".hubspot-form",
      });
    }
  });
});
</script>

补充信息：用户同意授权后，window.google_tag_data.ics.entries返回内容如下：

{
    "ad_storage": {
        "implicit": true
    },
    "analytics_storage": {
        "implicit": true,
        "update": true
    },
    "ad_user_data": {
        "declare": true,
        "implicit": true,
        "update": true
    },
    "ad_personalization": {
        "implicit": false,
        "update": true
    }
}

一、归因技术实现原理 #

HubSpot表单的Google Ads归因依赖三大核心机制：

• gclid参数捕获：Google Ads点击会向落地页URL追加gclid（Google Click ID）参数，这是归因的核心标识。
• Cookie存储追踪：HubSpot的跟踪脚本会自动捕获gclid，并将其与用户会话绑定，存储在hubspotutk等Cookie中。
• 表单提交时的数据同步：用户提交表单时，HubSpot表单脚本会读取Cookie中的归因数据，随表单内容一起发送到服务器，完成流量来源标记。
• 隐私权限限制：如果用户未授权广告/分析类Cookie，浏览器会阻止HubSpot存储或读取追踪数据，直接导致归因失效，流量被归类为直接流量。

二、是否需要手动传输数据 #

你的场景下需要手动介入调整，核心问题是表单加载时机与Cookie授权不同步：
目前代码在组件挂载时直接加载表单脚本，但此时用户可能还未完成Cookie授权，导致脚本无法读取gclid相关Cookie。

可行解决方案： #

1. 延迟加载表单脚本：等待用户完成Cookie授权（确认ad_storage和analytics_storage权限开启）后，再加载HubSpot表单脚本。
2. 手动传递gclid参数：主动捕获URL中的gclid，在创建表单时通过context参数手动传递给HubSpot。

修改后的示例代码：

<script setup>
import { HUBSPOT_PORTAL_ID } from "@/utils/constants";
import { watch } from "vue";

const props = defineProps({
  formId: {
    type: String,
    required: true,
  },
});

const cookieEnabledList = useCookie("enabledList");

// 监听Cookie授权状态，满足条件后加载表单
watch(cookieEnabledList, (newVal) => {
  const hasAdStorage = newVal?.includes("ad_storage");
  const hasAnalyticsStorage = newVal?.includes("analytics_storage");
  if (hasAdStorage && hasAnalyticsStorage) {
    loadHubSpotForm();
  }
}, { immediate: true });

function loadHubSpotForm() {
  // 主动捕获URL中的gclid参数
  const urlParams = new URLSearchParams(window.location.search);
  const gclid = urlParams.get('gclid');

  const script = document.createElement("script");
  script.src = "https://js.hsforms.net/forms/v2.js";
  document.body.appendChild(script);
  
  script.addEventListener("load", () => {
    if (window.hbspt) {
      const formConfig = {
        portalId: HUBSPOT_PORTAL_ID,
        formId: props.formId,
        target: ".hubspot-form",
      };
      // 手动传递gclid到表单上下文
      if (gclid) {
        formConfig.context = {
          page: {
            queryString: `gclid=${gclid}`
          }
        };
      }
      window.hbspt.forms.create(formConfig);
    }
  });
}
</script>

三、官方核心文档指引 #

• HubSpot表单与Google Ads集成：重点查看归因数据传递逻辑、Cookie权限配置章节
• HubSpot表单API参数手册：深入了解context参数自定义传递追踪数据的用法
• Google Ads与HubSpot归因匹配：学习gclid参数的捕获、存储及同步机制

内容的提问来源于stack exchange，提问作者Julian Weimer