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

Accelerated Mobile Pages (AMP) 是一個平台，用於建立靜態網頁，用於快速呈現靜態內容。AMP 內含的 <amp-analytics> 元素可用來評估使用者互動，且內建 Google Analytics (分析) 的支援。

用來評估網頁瀏覽的基本設定

如要在 AMP 網頁上建立 Google Analytics (分析) 的基本安裝，請複製這個程式碼片段，並將 <GA_MEASUREMENT_ID> 換成您要使用的資源 ID。(找出您的 Google Analytics (分析) 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 標記的第二個執行個體。

運作方式

<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」data-credentials(啟用 gtag.js 支援)，並將 data-credentials 屬性設為「include」" (啟用 Cookie)。

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

AMP 僅允許使用自有已核准程式庫的 JavaScript，因此設定是透過 JSON 執行。系統會將具有有效 <GA_MEASUREMENT_ID> 的 gtag_id 屬性新增至 vars 區塊，然後在下方新增含有 <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 值和「Google」的 method 值傳送至 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 參數的變數區塊中指定這些值：

<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": [] }。

網站速度

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 流量，請使用資料來源維度或自訂維度來區分流量。

根據預設，Google Analytics (分析) 會透過資料來源維度傳送「AMP」值。這個值可用來在一項資料檢視中區隔、篩選或分析 AMP 和非 AMP 內容。

對設定進行偵錯

AMP 驗證工具可用來識別網頁是否符合 AMP HTML 規格。請在網頁網址中加入 #development=1 來開啟驗證工具。

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

完整範例

本例顯示一個包含單一按鈕的完整 AMP 網頁。這項設定會將標準網頁瀏覽和「按鈕點擊」事件傳送至 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：搭配 AMP 使用 gtag.js
• Google Analytics (分析) 說明中心：Accelerated Mobile Pages (AMP)