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

AMP 代碼設定

Accelerated Mobile Pages (AMP) 專案是開放原始碼網路平台，協助改善網頁內容效能。AMP 包含為 Google 代碼和 Google 代碼管理工具內建支援服務。本指南將說明如何設定 Google Analytics 做為 AMP 網頁。

安裝

您可以使用 Google 代碼安插 Google Analytics、Google Ads 等 AMP 網頁上的 Google 產品。Google 代碼管理工具設定 AMP 容器可讓您建立進階設定及部署第三方產生代碼

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

Google 代碼

AMP 導入 gtag.js 會使用 amp-analytics 架構：可協助您在 AMP 網站上檢測 Analytics 網頁資料可以是從 AMP 網頁傳送到 Google Ads、Google Analytics 和其他 Google 產品使用相同的 gtag.js 程式碼

安裝

如要在 AMP 網頁上設定 gtag.js，請先確認您已經在網頁的 <head> 標記中加入 amp-analytics 元件：

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

接下來，請將 Google 代碼以 JSON 元件的形式加進 AMP 網頁，網頁上的 <body> 標記。將 <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 觸發條件採用的 JSON 模式與其他 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 網頁，並將 button-click 事件傳送給 Google 點擊按鈕時產生的數據分析。將 <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，也可能是列在網路瀏覽器的「網路」分頁中搜尋「collect request」，且酬載應包含 cid 值。

一旦您從 Google CDN 傳送到客戶網站後， cid 和 gclid 值應透過網址裝飾傳送：

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

最終到達網頁的 cid 值應與
重新導向和變更標準網頁的網域時請小心和非 AMP 到達網頁