如何在AMP Story中正确部署Google Analytics代码？

AMP Story完全支持Google Analytics部署，你当前配置未生效通常是以下几个常见原因：

• 未在页面head中引入amp-analytics组件的依赖脚本，AMP所有自定义组件都需要提前引入对应脚本才能正常运行
• 仅配置了基础gtag参数，缺少AMP Story专属的事件触发规则，默认不会自动上报浏览、互动等事件
• 配置存在JSON格式错误，或者GA4媒体ID填写错误

正确配置步骤 #

1. 引入amp-analytics依赖 #

在页面<head>标签中添加如下脚本，注意要放在AMP主脚本之后：

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

2. 完整配置amp-analytics代码 #

将以下代码放在<body>标签内，替换G-XXXXXXXXXX为你自己的GA4媒体ID即可，该配置会自动跟踪故事页面浏览、故事完成进度、互动点击等常用事件：

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
  {
    "vars": {
      "gtag_id": "G-XXXXXXXXXX",
      "config": {
        "G-XXXXXXXXXX": {
          "groups": "default"
        }
      }
    },
    "triggers": {
      "trackPageview": {
        "on": "visible",
        "request": "pageview"
      },
      "storyPageView": {
        "on": "story-page-visible",
        "request": "event",
        "vars": {
          "event_name": "view_story_page",
          "event_category": "AMP Story",
          "event_action": "page_view",
          "event_label": "${storyPageId}"
        }
      },
      "storyComplete": {
        "on": "story-last-page-visible",
        "request": "event",
        "vars": {
          "event_name": "complete_story",
          "event_category": "AMP Story",
          "event_action": "complete"
        }
      }
    }
  }
  </script>
</amp-analytics>

生效验证注意事项 #

• 部署前先使用AMP验证工具检查页面是否存在语法错误，AMP页面存在任何校验错误都会导致组件无法正常加载
• 测试时关闭广告拦截、隐私反跟踪类插件，这类插件通常会拦截GA上报请求
• 部署后可在GA4后台的「实时」报告中查看是否有数据上报，判断配置是否生效

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