在 AMP 页面中添加百度统计

与MIP同理，AMP

是 google 开发的一种构建网页快速呈现的静态内容的方式。

AMP

中的amp-analytics 组件

能够对页面中的用户数据进行分析。现在我们在 amp-analytics 组件中添加了百度统计的配置，实现了百度统计对 AMP 页面的支持。

使用

首先，要想在 AMP 页面中使用amp-analytics 组件，需要将其所需要的脚本添加到 AMP 页面的

head

标签下：

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

然后，将

amp-analytics

标签插入到页面 dom 中。amp-analytics

标签上必须添加属性

type

来告诉组件将统计数据发送到哪里；建议同时添加属性

id，这样可以识别是哪个

amp-analytics

元素（方便调试）。

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

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

• 用于网页跟踪的 pageview
• 用于点击事件跟踪的 event

网页跟踪

可以通过网页跟踪来衡量网站上特定网页获得的浏览次数，只需要将触发器 request 值设置为 pageview，同时需要配置网站的 token，即可发送网页浏览匹配。

<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

  中设置的属性说明：