在 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 中设置的属性说明：