如何为简单HTML页面配置Facebook CAPI实现服务端事件采集

1. 前置准备 #

• 先在Meta事件管理工具获取3个核心参数，后续全流程都会用到：像素ID、CAPI访问令牌、测试事件码（仅测试阶段使用）
• 准备任意可用的后端服务（Node.js、Python、PHP等都可以），核心要求是支持发送HTTP POST请求，绝对不能直接在前端HTML调用CAPI接口，会导致访问令牌泄露

2. 前端埋点补充 #

因为你当前只有简单HTML页面，首先需要在前端收集服务端上报需要的用户标识参数，再传递给你的后端服务：

• 必须传递的核心参数：fbp（Meta写入浏览器的Cookie值，格式为fb.1.xxx）、fbc（广告点击触发的点击标识，同样存储在Cookie中）、事件类型（比如Purchase、AddToCart）、事件属性（比如商品金额、商品ID）；用户邮箱/手机号为可选参数，补充后会大幅提升事件匹配率，注意需要先做SHA256哈希加密再传递
• 前端获取fbp和fbc的JS代码可以直接插入现有HTML页面：

function getCookie(name) {
  let value = "; " + document.cookie;
  let parts = value.split("; " + name + "=");
  if (parts.length === 2) return parts.pop().split(";").shift();
}
const fbp = getCookie('_fbp');
const fbc = getCookie('_fbc');

• 前端通过普通POST请求把上述所有参数传给你的后端接口即可，不需要携带任何CAPI相关的密钥信息。

3. 后端服务核心配置 #

后端的唯一核心逻辑就是组装参数后向CAPI接口发起请求，通用请求规则如下：

• 请求地址：https://graph.facebook.com/v18.0/<替换为你的像素ID>/events
• 请求方法：POST，请求头携带 Content-Type: application/json
• 请求query参数需携带access_token，值为你的CAPI访问令牌
• 标准请求体结构（以购买事件为例）：

{
  "data": [
    {
      "event_name": "Purchase",
      "event_time": <事件发生的Unix时间戳，单位为秒>,
      "user_data": {
        "fbp": "<前端传递的fbp值>",
        "fbc": "<前端传递的fbc值>",
        "em": ["<用户邮箱的SHA256哈希值，可选>"]
      },
      "custom_data": {
        "currency": "CNY",
        "value": 99.9
      },
      "action_source": "website"
    }
  ],
  "test_event_code": "<测试阶段填写你的测试事件码，正式上线后删除该字段>"
}

注意：event_time必须是事件实际发生的时间戳，不能超过7天，否则CAPI会直接拒收；所有用户个人信息类参数必须先做SHA256哈希加密再传输，禁止传明文。

4. 测试验证 #

前往Meta事件管理工具的「测试事件」页面，输入你的测试事件码，完整触发一次前端事件流程，确认服务端事件是否正常在后台展示；如果上报失败，CAPI接口会返回具体错误提示，对照修正参数即可。

5. 上线注意事项 #

• 同一个事件如果同时在浏览器端和服务端上报，需要给事件设置相同的event_id，Meta会自动去重不会重复统计
• 严格保管CAPI访问令牌，禁止出现在前端代码、公开配置文件中
• 上线后定期查看事件管理工具的事件匹配质量，可通过补充更多用户标识参数进一步提升匹配率。

内容的提问来源于stack exchange，提问作者Barbara Ester