本頁面由 Cloud Translation API 翻譯而成。

AMP 代碼設定

Accelerated Mobile Pages (AMP) 專案是一個開放原始碼網路平台，可協助您改善網頁內容效能。AMP 內建 Google 代碼和 Google 代碼管理工具支援。本指南說明如何設定 Google Analytics (分析)，適用於 AMP 網頁。

安裝

Google 代碼可讓您在 AMP 網頁上安裝 Google Analytics (分析)、Google Ads 和其他 Google 產品。Google 代碼管理工具建立 AMP 容器後，可讓您透過代碼管理工具介面建立進階設定及部署第三方代碼。

請從下列按鈕中選取您的平台偏好設定：

Google 代碼

AMP 導入的 gtag.js 會使用 amp-analytics 架構，讓您能夠在 AMP 網站上檢測分析作業。資料可以從 AMP 網頁傳送至 Google Ads、Google Analytics (分析) 和其他 Google 產品，只要使用同一個 gtag.js 導入設定即可。

安裝

如要在 AMP 網頁上設定 Google 代碼 (gtag.js)，請務必先在網頁的 <head> 代碼中加入 amp-analytics 元件：

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

接下來，請在 AMP 網頁的 <body> 標記內，以 JSON 元件的形式將 Google 代碼新增至 AMP 網頁。將 <TARGET_ID> 替換為產品的標記 ID (例如Google Ads、Google Analytics (分析)) 來傳送資料：

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

如要在 Google 代碼中設定多項產品，您不需要加入該產品的完整標記。您只需要將目的地 ID 新增至個別的 config 指令即可。

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TAG_ID>",
    "config" : {
      "<TAG_ID>": { "groups": "default" },
      <!-- Additional IDs -->
    }
  }
}
</script>
</amp-analytics>

詳情請參閱 amp-analytics 說明文件。

事件觸發條件

如要傳送特定資料至您的產品，請根據點擊等事件設定觸發條件。AMP 中的 gtag.js 觸發條件與其他 amp-analytics 觸發條件設定相同。

本範例說明如何將 click 事件傳送至 Google Analytics (分析)。selector 值是一種 CSS 選取器，可讓您指定要指定的元素。on 值會指定事件類型，在本範例中為 click 事件。在 vars 區段的 event_name 中指定事件類型，並視需要新增其他參數。

"triggers": {
  "button": {
    "selector": "#the-button",
    "on": "click",
    "vars": {
      "event_name": "login",
      "method": "Google"
    }
  }
}

除了建議事件外，您也可以指定自訂事件。

連結網域

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

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

系統預設會啟用從 AMP 快取連結至標準網域的功能。如要關閉連結網域流量的功能，請在 config 參數中加入 "linker": "false"：

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

完整範例

這個程式碼範例說明 AMP 網頁的完整運作示範，建立單一 AMP 網頁，並在使用者點選按鈕時傳送 button-click 事件給 Google Analytics (分析)。將 <TAG_ID> 替換為有效的標記 ID：

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="self.html" />
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <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": "<TAG_ID>",
            "config": {
              "<TAG_ID>": {}
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Welcome to the mobile web</h1>
    <div>
      <button type="button" id="the-button">Example: Log in with Google</button>
    </div>
  </body>
</html>

疑難排解

您可以使用 amptagtest.appspot.com 來驗證標記設定，也可以執行下列操作，手動確保不同網域的 cid 值一致：

請務必清除 Cookie 或使用無痕模式。
如果系統在 Google Analytics (分析) Cookie 中找不到 cid，您也可以在網路瀏覽器的「網路」分頁中觀察到該 Cookie。搜尋 collect request，酬載應包含 cid 值。

從 Google CDN 傳送至用戶端網站後，cid 和 gclid 值應透過網址裝飾傳遞：

**_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**

最終到達網頁的 cid 值仍應與初始到達網頁相同。
請注意，標準網頁和非 AMP 到達網頁之間的重新導向和網域變更時，請務必謹慎。