在 AMP 頁面中添加百度統(tǒng)計

與 MIP 同理，AMP 是 google 開發(fā)的一種構(gòu)建網(wǎng)頁快速呈現(xiàn)的靜態(tài)內(nèi)容的方式。

AMP 中的 amp-analytics 組件 能夠?qū)撁嬷械挠脩魯?shù)據(jù)進行分析?，F(xiàn)在我們在 amp-analytics 組件中添加了百度統(tǒng)計的配置，實現(xiàn)了百度統(tǒng)計對 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 來告訴組件將統(tǒng)計數(shù)據(jù)發(fā)送到哪里；建議同時添加屬性 id，這樣可以識別是哪個 amp-analytics 元素（方便調(diào)試）。

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

  ...

</amp-analytics>

由于不能直接調(diào)用百度統(tǒng)計的標準代碼，您需要使用以下支持的功能進行日志統(tǒng)計，包括：用于網(wǎng)頁跟蹤的 pageview 用于點擊事件跟蹤的 event

網(wǎng)頁跟蹤

可以通過網(wǎng)頁跟蹤來衡量網(wǎng)站上特定網(wǎng)頁獲得的瀏覽次數(shù)，只需要將觸發(fā)器 request 值設(shè)置為 pageview，同時需要配置網(wǎng)站的 token，即可發(fā)送網(wǎng)頁瀏覽匹配。

<amp-analytics type="baiduanalytics" id="analytics2">

    <script type="application/json">

        {

          "vars": {

            "token": "你的token"

          },

          "triggers": {

            "trackPageview": {

              "on": "visible",

              "request": "pageview"

            }

          }

        }

    </script>

</amp-analytics>

事件跟蹤

“事件”是指可以獨立于網(wǎng)頁或屏幕的加載而進行跟蹤的用戶與內(nèi)容進行的互動。將觸發(fā)器 request 值設(shè)置為 event，并設(shè)置所需的事件類別和操作字段，即可發(fā)送事件匹配。

<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>

需要在觸發(fā)器的 vars 中設(shè)置的屬性說明：