如何使用amp-analytics在AMP页面实现Facebook Pixel滚动深度追踪？

现有配置的核心问题 #

• 未声明amp-analytics对应的Facebook Pixel类型模板，配置的滚动触发规则无法将请求发送到Pixel的接收端点
• 事件参数命名不符合Facebook Pixel的自定义事件传参规范，即使触发上报也无法被后台识别
• 未将滚动深度的实际数值作为参数携带，仅写死固定事件名，无法区分不同滚动层级的上报行为

修正后的完整实现 #

首先需要在页面的amp-analytics标签上指定type属性为facebookpixel，确保内置对接模板正常加载，标签基础结构为：
<amp-analytics type="facebookpixel" id="fb-pixel">
标签内部嵌入的json配置参考如下：

{
  "vars": {
    "pixelId": "你的Facebook Pixel ID"
  },
  "triggers": {
    "scroll25Trigger": {
      "on": "scroll",
      "request": "event",
      "scrollSpec": {
        "verticalBoundaries": [25]
      },
      "vars": {
        "eventName": "CustomEvent",
        "eventID": "scroll_depth_25",
        "eventPayload": {
          "content_name": "ScrollDepth",
          "scroll_percent": "25"
        }
      }
    },
    "scroll50Trigger": {
      "on": "scroll",
      "request": "event",
      "scrollSpec": {
        "verticalBoundaries": [50]
      },
      "vars": {
        "eventName": "CustomEvent",
        "eventID": "scroll_depth_50",
        "eventPayload": {
          "content_name": "ScrollDepth",
          "scroll_percent": "50"
        }
      }
    },
    "scroll100Trigger": {
      "on": "scroll",
      "request": "event",
      "scrollSpec": {
        "verticalBoundaries": [100]
      },
      "vars": {
        "eventName": "CustomEvent",
        "eventID": "scroll_depth_100",
        "eventPayload": {
          "content_name": "ScrollDepth",
          "scroll_percent": "100"
        }
      }
    }
  }
}

调试与注意事项 #

• 每个滚动边界的触发逻辑为首次到达对应深度时上报一次，不会重复触发，符合常规追踪需求
• 配置完成后可通过调试工具检查每个边界点的上报请求，确认参数中携带的scroll_percent数值准确
• 上报的自定义事件需要在Facebook事件管理平台完成对应规则配置后，才能在后台统计维度中查看滚动深度的相关数据
• 可根据实际需求在scrollSpec的verticalBoundaries数组中增加更多自定义深度值，扩展触发层级

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