如何将客户ID/自定义字段集成到ClickPatrol表单防护并同步至HubSpot？

看起来你遇到的核心问题是自定义字段无法同步到HubSpot，这通常是因为三个容易踩的坑：HubSpot后台未配置对应字段、代码整合方式不对，或者语法错误导致数据没正确传递。我来一步步帮你解决：

一、先做关键前提配置：在HubSpot后台创建对应自定义字段 #

这是最容易被忽略的步骤！HubSpot不会自动创建不存在的字段，所以你必须先在HubSpot里配置好要接收的自定义属性：

• 登录HubSpot，进入设置 > 属性 > 联系属性（如果是其他对象比如公司/交易，就选对应对象的属性）
• 创建一个新属性，比如命名为customfield（注意：字段的内部名称要和你代码里的完全一致，区分大小写）
• 确保属性的可见性和权限设置正确，允许表单提交写入数据

二、正确整合ClickPatrol防护与HubSpot表单代码 #

你的原有代码存在两个问题：一是语法错误，二是自定义字段的传递方式不符合HubSpot表单API的规范，同时ClickPatrol的脚本加载顺序也有讲究。下面是完整的正确代码：

<!-- 1. 先加载HubSpot的表单嵌入核心脚本（ClickPatrol依赖它才能生效） -->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>

<!-- 2. 加载ClickPatrol的防护脚本，替换[[user_id]]为实际的用户ID变量 -->
<script charset="utf-8" type="text/javascript" src="https://api.getformprotection.com/?skid=USER_ACTUAL_ID"></script>

<!-- 3. 配置HubSpot表单，并正确传递自定义字段/预填信息 -->
<script>
hbspt.forms.create({
  region: "na1",
  portalId: "123456",
  formId: "abcdef12-3456-7890-abcd-1234567890ab",
  // 所有预填/自定义字段必须放在fields对象里，这是HubSpot表单API的标准用法
  fields: {
    "customfield": "name of the user", // 键名要和HubSpot后台的属性内部名称完全匹配
    "email": "user@example.com" // 预填邮箱的示例（可选）
  },
  // 可选：表单提交后可加回调，方便调试
  onFormSubmit: function($form) {
    console.log("表单提交成功，自定义字段已尝试传递");
  }
});
</script>

代码关键说明：

1. 加载顺序：必须先加载HubSpot的嵌入脚本，再加载ClickPatrol的防护脚本，否则防护逻辑无法绑定到HubSpot表单上。
2. 自定义字段传递：不能直接把customfield放在hbspt.forms.create的根配置里，必须用fields对象来映射——这是HubSpot表单API的强制要求。
3. 语法修正：你原来的代码里有两处语法错误：customfield: "name of the user"后面没加逗号，formId后面多了分号，这些都会导致JS执行失败，数据根本传不出去。

三、动态注入用户ID/自定义字段的正确方式（比如通过GTM或单独JS文件） #

如果你需要动态获取用户ID（比如从Cookie、URL参数或后端渲染），可以先把值存在变量里，再传入fields和ClickPatrol的脚本：

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>

<script>
// 示例：动态获取用户数据的逻辑，替换为你实际的获取方式
const userId = document.cookie.split('; ').find(row => row.startsWith('user_id=')).split('=')[1];
const userName = window.currentUser?.name; // 比如从后端渲染的全局变量获取
const userEmail = new URLSearchParams(window.location.search).get('email'); // 从URL参数获取
</script>

<!-- 动态插入ClickPatrol的脚本，替换skid参数 -->
<script charset="utf-8" type="text/javascript" src="https://api.getformprotection.com/?skid=" + userId></script>

<script>
hbspt.forms.create({
  region: "na1",
  portalId: "123456",
  formId: "abcdef12-3456-7890-abcd-1234567890ab",
  fields: {
    "customfield": userName,
    "email": userEmail
  }
});
</script>

如果用GTM注入，一定要保证触发顺序：

1. 加载HubSpot嵌入脚本
2. 加载动态获取用户数据的脚本
3. 加载ClickPatrol防护脚本
4. 执行hbspt.forms.create配置

四、排查问题的关键步骤 #

如果还是看不到自定义字段数据，按以下顺序排查：

1. 检查浏览器控制台：打开F12，看是否有JS语法错误或网络请求失败（比如ClickPatrol的脚本加载失败，或者HubSpot表单请求报错）。
2. 验证字段名一致性：HubSpot后台的属性内部名称（不是显示名称）必须和你代码里的fields对象的键完全一致（比如后台是custom_field，代码里不能写customfield）。
3. 检查HubSpot表单设置：进入你的表单编辑页面，确保允许预填字段的选项是开启的，并且自定义字段已经添加到表单的字段列表里（或者至少设置为允许通过API提交，即使不在表单前端显示）。
4. 隔离测试：可以先暂时移除ClickPatrol的脚本，测试自定义字段是否能正常同步到HubSpot，确认后再重新加上防护，排查是否是防护逻辑拦截了数据。

内容来源于stack exchange