在 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 中設置的屬性說明：