在 AMP 網頁中加入 Analytics (分析)

Accelerated Mobile Pages (AMP) 平台可用於建構可快速轉譯的靜態內容網頁。AMP 包含可用於評估使用者互動的 <amp-analytics> 元素，且內建 Google Analytics (分析) 支援功能。

評估網頁瀏覽量的基本設定

如要在 AMP 網頁上建立 Google Analytics (分析) 基本安裝，請複製這個程式碼片段，並以 Google 代碼 ID 取代 <GA_MEASUREMENT_ID>。找出 Google 代碼 ID。

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

重要事項： 如果網頁原始碼中已有使用 type="gtag" 設定的 amp-analytics 標記，請將 "GA_MEASUREMENT_ID": { "groups": "default" } 加到現有的 "config" 參數中。為獲得最佳效能，請勿以 type="gtag" 新增 amp-analytics 標記的第 2 個執行個體。

將資料傳送至多個目的地

您可以使用相同的 <amp-analytics> 標記將資料傳送至多個目的地，只要在 config 指令中加入新的評估 ID <GA_MEASUREMENT_ID_NEW> 即可。

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" },
      "<GA_MEASUREMENT_ID_NEW>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

運作方式

<amp-analytics> 元素是擴充的 AMP 元件，且在指令碼標記中明確以 custom-element 的形式啟用。

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

設定 <amp-analytics> 元素區塊後，即可啟用 Google 評估產品。將 <amp-analytics> 的 type 屬性設為「gtag」(以啟用 gtag.js 支援功能)，並將 data-credentials 屬性設為「include」(以啟用 Cookie)。

<amp-analytics type="gtag" data-credentials="include">
  ...
</amp-analytics>

AMP 不允許在其已核准的程式庫以外的任何 JavaScript，因此會改為使用 JSON 執行設定。vars 區塊會加入具有有效 <GA_MEASUREMENT_ID> 的 gtag_id 屬性，其下方會加入包含 <GA_MEASUREMENT_ID>: {} 的設定屬性做為值。

注意： 根據預設，如果 amp-analytics 使用 Google Analytics (分析) 資源 ID 設定，系統會自動記錄 page_view 事件。

評估事件

使用 triggers 搭配已定義的值，即可評估 AMP 網頁上的事件。這些屬性用於觸發條件設定：

• selector：用於指定目標元素的 CSS 選取器。
• on：指定事件類型。
• vars：在 event_name 中指定事件類型，並視需要新增其他參數。

本範例說明如何設定基本的 Google Analytics (分析) 事件。建立名為「按鈕」的觸發條件，以便在 ID 值為「the-button」的元素時觸發。這項觸發條件會將 event_name 值「login」以及 method 的值「Google」傳送至 Google Analytics (分析)：

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
         "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#the-button",
          "on": "click",
          "vars": {
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

Google Analytics (分析) 事件是 Google Analytics (分析) 專屬的事件類別，經常用來製作廣告活動報表。您可以使用 event_category、event_label 和 value 參數在 vars 區塊中指定這些值：

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
          "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#login",
          "on": "click",
          "vars": { 
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

如要進一步瞭解觸發條件設定，請參閱 amp-analytics 說明文件。

修改參數

若要覆寫預設的 Google Analytics (分析) 參數或新增參數，請在 config 區塊的 parameter 區段中加入所需的值。本例會覆寫 page_title 和 page_location 的預設網頁瀏覽和事件值：

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "page_title": "Beethoven symphonies",
        "page_location": "https://www.example.com/beethoven.html"
      }
    }
  }
}
</script>
</amp-analytics>

連結網域

網域連接器可讓不同網域中的兩個以上相關網站視為一個進行評估。指定要與 "linker": { "domains": [...] } 資源連結的網域：

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "linker": { "domains": ["example.com", "example2.com"] }
      }
    }
  }
}
</script>
</amp-analytics>

在已設定 Google Analytics (分析) 的 AMP 網頁中，系統預設會啟用透過 AMP 快取連結至標準網域的功能。如要停用 Google Analytics (分析) 連結網域流量的功能，請在設定參數中加入 "linker": "false"：

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "linker": "false"
      }
    }
  }
}
</script>
</amp-analytics>

注意： 您也可以使用空白的 domains 陣列停用網域連接器功能："linker": { "domains": [] }。

通用 Analytics (分析) 網站速度

Google Analytics (分析) 已設定為根據一小部分的網站流量，自動收集網站速度資料。您可以調整取樣率來收集更多或更少資料。如要將取樣率設為 100%，請在設定中新增醒目顯示的程式碼：

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "site_speed_sample_rate": 100
      }
    }
  }
}
</script>
</amp-analytics>

如要停止收集網站速度資料，請使用以下醒目顯示的程式碼：

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "site_speed_sample_rate": 0
      }
    }
  }
}
</script>
</amp-analytics>

AMP 流量與非 AMP 流量

根據預設，AMP 流量會使用不同於網路流量的用戶端 ID。AMP 網頁載入速度更快，並顯示與標準網頁不同的流量模式，這通常意味著 AMP 和非 AMP 流量的指標不同。

使用獨立資源來評估 AMP 流量後，您就能更準確地分析指標，並更準確地掌握流量資訊。如果您必須使用單一資源，如何區分 AMP 和非 AMP 流量：

• 使用資料來源維度或自訂維度 (通用 Analytics (分析)。)
• 使用自訂事件參數 (Google Analytics (分析) 4)。

對設定進行偵錯

AMP 驗證工具可用來判斷網頁是否不符合 AMP HTML 規格。在網頁網址中加入 #development=1 即可啟用驗證工具。

amp-analytics 擴充功能會提供警告和錯誤訊息，協助您偵錯及排解設定問題。將 #log=1 新增至網頁網址，即可在網路瀏覽器控制台中查看系統記錄的錯誤訊息。

完整範例

這個範例顯示完整的 AMP 網頁，其中包含一個按鈕。這項設定會將標準網頁瀏覽資料和「button-click」事件傳送至 Google Analytics (分析)：

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="self.html" />
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

    <!-- Load AMP -->
    <script async src="https://cdn.ampproject.org/v0.js"></script>

    <!-- Load amp-analytics -->
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  </head>
  <body>
    <!-- Configure analytics to use gtag -->
    <amp-analytics type="gtag" data-credentials="include">
      <script type="application/json">
        {
          "vars": {
            "gtag_id": "<GA_MEASUREMENT_ID>",
            "config": {
              "<GA_MEASUREMENT_ID>": { "groups": "default" }
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Make it so.</h1>
    <div>
      <button type="button" id="the-button">Engage!</button>
    </div>
  </body>
</html>

相關資源

• AMP：AMP 專案
• AMP：什麼是 AMP？
• AMP：amp-analytics
• gtag.js：使用 gtag.js 搭配 AMP
• 通用 Analytics (分析) 說明中心：Accelerated Mobile Pages (AMP)
• Google Analytics (分析) 4 說明中心：Accelerated Mobile Pages (AMP)