如何在AMP 页面中添加百度统计代码详细教程

与MIPY页面同理，AMP页面是 google 开发的一种构建网页快速呈现的静态内容的方式。其中的 amp-analytics 组件能够对页面中的用户数据进行分析。现在我们在 amp-analytics 组件中添加了百度统计的配置，实现了百度统计对 AMP 页面的支持。

开始添加

首先，要想在 AMP 页面中使用组件，记得先将以下脚本添加到 AMP 页面的 head 标签下：

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

然后，将 amp-analytics 标签插入到页面 body 中。amp-analytics 标签上必须添加属性 type 来告诉组件将统计数据发送到哪里；建议同时添加属性 id，这样可以识别是哪个 amp-analytics 元素（方便调试）。

<amp-analytics type="baiduanalytics" id="analytics1">
  ...
</amp-analytics>

由于不能直接调用百度统计的标准代码，您需要使用以下支持的功能进行日志统计，包括：

1. 用于网页跟踪的 pageview
2. 用于点击事件跟踪的 event

记住千万不要直接把 pc 版本的百度统计代码直接放到 AMP 的 head 中，这样是没有作用的，反而谷歌会报错：‘不允许使用自定义 JavaScript’的报错，要使用 amp 自己的 js 调用的方式添加。

网页跟踪（必填项）

可以通过网页跟踪来衡量网站上特定网页获得的浏览次数，只需要将触发器 request 值设置为 pageview，同时需要配置网站的 token，即可发送网页浏览匹配，添加完记得去AMP页面验证工具中验证下有没有其他错误。

<amp-analytics type="baiduanalytics" id="analytics2">
    <script type="application/json">
        {
          "vars": {
            "token": "你的token"
          },
          "triggers": {
            "trackPageview": {
              "on": "visible",
              "request": "pageview"
            }
          }
        }
    </script>
</amp-analytics>

事件跟踪（可选项）

“事件”是指可以独立于网页或屏幕的加载而进行跟踪的用户与内容进行的互动。将触发器 request 值设置为 event，并设置所需的事件类别和操作字段，即可发送事件匹配。

<amp-analytics type="baiduanalytics" id="analytics3">
    <script type="application/json">
        {
          "vars": {
            "token": "你的token"
          },
          "triggers": {
            "trackEvent": {
              "on": "click",
              "selector": ".click",
              "request": "event",
              "vars": {
                "category": "song",
                "action": "play",
                "label": "HeyJude",
                "value": "300"
              }
            },
            "scroll": {
              "on": "scroll",
              "selector": "body",
              "request": "event",
              "scrollSpec": {
                "verticalBoundaries": [25, 50, 90],
                "horizontalBoundaries": [90]
              },
              "vars": {
                "category": "scroll",
                "action": "scroll",
                "label": "height",
                "value": "25"
              }
            }
          }
        }
    </script>
</amp-analytics>

• 需要在触发器的 vars 中设置的属性说明：

值	类型	是否必须	说明
category	string	是	类型
action	string	是	动作
label	string	是	标签
value	string	是	值