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

運作方式

<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>: {} 的設定屬性做為值。

評估事件

使用 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_categoryevent_labelvalue 參數的變數區塊中指定這些值:

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

網站速度

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>