AMP页面结合Google Analytics追踪Riveted自定义事件求助

我来帮你搞定AMP页面上Google Analytics追踪Riveted自定义事件的问题～你现在的代码只配置了基础的页面浏览追踪，要让GA记录Riveted的事件，得给amp-analytics加专门的触发器来监听插件抛出的自定义事件，具体修改如下：

修改后的完整代码 #

<amp-analytics type="googleanalytics">
  <script type="application/json">
    {
      "vars": {
        "account": "XX-XXXXXXXX-X"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"
        },
        "trackRivetedEvents": {
          "on": "custom",
          "selector": "body",
          "request": "event",
          "vars": {
            "eventCategory": "Riveted",
            "eventAction": "${eventAction}",
            "eventLabel": "${eventLabel}",
            "eventValue": "${eventValue}"
          },
          "customEventName": "rivetedSessionEvent" // 需替换为Riveted实际抛出的事件名
        }
      }
    }
  </script>
</amp-analytics>

关键配置说明 #

1. 新增trackRivetedEvents触发器

   • "on": "custom"：指定触发器监听自定义JavaScript事件
   • "customEventName"：这里必须和Riveted插件实际抛出的事件名称一致。你可以通过浏览器开发者工具的「事件监听」面板查看插件触发的事件名（比如可能是rivetedActiveTime、rivetedSessionEnd这类），把这个值替换进去。
   • "selector": "body"：事件绑定到body元素，确保能捕获到插件全局触发的事件

2. 事件参数映射

   • eventCategory固定设为你提到的"Riveted"，和GA行为板块的事件分类对应
   • eventAction、eventLabel、eventValue使用${变量名}的格式，会自动从Riveted事件的detail对象中取值。比如如果插件触发事件时是这样的：

     document.body.dispatchEvent(new CustomEvent('rivetedSessionEvent', {
       detail: {
         eventAction: 'session_complete',
         eventLabel: 'single_page',
         eventValue: 180 // 活跃时长，单位秒
       }
     }))
     

     GA就会自动记录对应的动作、标签和数值。

验证与调试 #

修改完成后，你可以通过两种方式确认事件是否被正确追踪：

• 打开GA的实时报告-事件板块，在页面上触发Riveted事件（比如等待会话结束），看是否能实时看到事件记录
• 用浏览器开发者工具的「网络」面板，过滤google-analytics请求，查看请求参数里是否包含ec=Riveted（事件分类）、ea=（事件动作）等参数

额外注意事项 #

如果Riveted插件有多种事件类型（比如活跃时间更新、会话开始/结束），你可以为每种事件单独创建触发器，或者在一个触发器里通过eventAction区分不同事件类型，根据你的需求调整即可。

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