使用 amp-pixel 或 amp-analytics？
建立簡單的分析設定
- 簡單的 amp-pixel 設定
- 簡單的 amp-analytics 設定
AMP 故事預設設定
變數替換
使用者識別

分析：基礎知識

從這裡開始學習關於 AMP 分析的基本知識。

使用 amp-pixel 或 amp-analytics？

AMP 提供了兩個元件來滿足您的分析與衡量需求：amp-pixel 和 amp-analytics。這兩個選項都會將分析資料傳送到定義的端點。

如果您正在尋找類似簡單追蹤像素的行為，amp-pixel 元件提供了基本的頁面瀏覽追蹤功能；頁面瀏覽資料會傳送到定義的 URL。某些與供應商的整合可能會要求使用此元件，在這種情況下，他們會指定確切的 URL 端點。

對於大多數分析解決方案，請使用 amp-analytics。amp-analytics 也適用於頁面瀏覽追蹤。但您也可以追蹤使用者與任何類型頁面內容的互動，包括點擊連結和按鈕。

而且您可以衡量使用者在故事中點擊了多遠，以及使用者是否與互動元素互動。

請參閱AMP 分析深入探討。

作為與 AMP 平台整合的一部分，供應商已提供預先定義的 amp-analytics 設定，以便輕鬆擷取資料並推送至其追蹤工具。從分析供應商清單存取供應商文件。

您可以在頁面中使用 amp-pixel 和 amp-analytics：amp-pixel 用於簡單的頁面瀏覽追蹤，而 amp-analytics 用於所有其他用途。您也可以新增多個標籤。如果您與多個分析供應商合作，每個解決方案都需要一個標籤。請記住，更簡潔的 AMP 頁面對使用者更好，因此如果您不需要額外的標籤，請不要使用它們。

建立簡單的分析設定

了解如何建立簡單的 amp-pixel 和 amp-analytics 設定。

簡單的 `amp-pixel` 設定

若要建立簡單的 amp-pixel 設定，請將類似以下的程式碼插入到您的 AMP 頁面的 body 中

<amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>

在這個範例中，頁面瀏覽資料會連同隨機數字一起傳送到定義的 URL。RANDOM 變數是 AMP 平台中眾多替換變數之一。在此處了解更多關於變數替換的資訊。

amp-pixel 元件是內建的，因此您不需要像 AMP 的擴充元件（包括 amp-analytics）那樣的包含宣告。但您應該將 amp-pixel 標籤盡可能靠近 <body> 的開頭放置。追蹤像素僅在標籤本身進入檢視畫面時才會觸發。如果 amp-pixel 放置在頁面底部附近，則可能不會觸發。

簡單的 `amp-analytics` 設定

若要建立簡單的 amp-analytics 設定，您必須先在 AMP 文件的 <head> 中包含此 custom-element 宣告（另請參閱元件包含宣告）

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

以下範例與 amp-pixel 範例類似。每次頁面可見時，觸發事件都會觸發，並將頁面瀏覽資料連同隨機 ID 一起傳送到定義的 URL

<amp-analytics>
<script type="application/json">
  {
    "requests": {
      "pageview": "https://foo.com/pixel?RANDOM"
    },
    "triggers": {
      "trackPageview": {
        "on": "visible",
        "request": "pageview"
      }
    }
  }
</script>
</amp-analytics>

在上述範例中，我們已將名為 pageview 的請求定義為 https://foo.com/pixel?RANDOM。如先前所述，RANDOM 會被替換為隨機數字，因此請求最終會看起來像 https://foo.com/pixel?0.23479283687235653498734。

當頁面變為可見時（如觸發關鍵字 visible 所指定），事件會觸發，並傳送 pageview 請求。triggers 屬性決定何時觸發 pageview 請求。了解更多關於請求和觸發器的資訊。

AMP 故事預設設定

網站的典型使用者旅程與故事非常不同。在網站上，使用者可能會閱讀標題、捲動到頁面底部、與表單互動，然後點擊連結前往下一頁。故事會佔據整個視窗，使用者不會捲動，而是點擊以向前移動。

許多人希望將故事中每個新的 <amp-story-page> 都視為新的頁面瀏覽量來衡量，因為螢幕與螢幕之間的內容差異很大。然而，頁面只是完整故事中的單一元素 — 而且使用者通常需要查看許多故事頁面才能充分了解故事。因此，我們如何計算像頁面瀏覽量這樣簡單的事情，對我們的分析方法產生了巨大的影響。

AMP Analytics 讓您可以使用任何分析供應商輕鬆實作上述功能。例如，使用 Google Analytics 的Global Site Tag 看起來會像下面的程式碼片段。

<amp-analytics type="gtag" data-credentials="include">
 <script type="application/json">
  {
    "vars": {
      "gtag_id":"YOUR_GOOGLE_ANALYTICS_ID",
      "config": {
        "YOUR_GOOGLE_ANALYTICS_ID": {
          "groups":"default"
        }
      }
    },
    "triggers": {
      "storyProgress": {
        "on":"story-page-visible",
        "vars": {
          "event_name":"custom",
          "event_action":"story_progress",
          "event_category":"${title}",
          "event_label":"${storyPageId}",
          "send_to": [
            "YOUR_GOOGLE_ANALYTICS_ID"
          ]
        }
      },
      "storyEnd": {
        "on":"story-last-page-visible",
        "vars": {
          "event_name":"custom",
          "event_action":"story_complete",
          "event_category":"${title}",
          "send_to": [
            "YOUR_GOOGLE_ANALYTICS_ID"
          ]
        }
      }
    }
  }
 </script>
</amp-analytics>

此預設設定應為您提供 AMP 故事的完整工作設定。

如果您有興趣深入了解預設設定的功能，請閱讀 AMP 故事分析，以尋找更多 Google Analytics 的進階使用案例。

變數替換

amp-pixel 和 amp-analytics 元件都允許所有標準 URL 變數替換（請參閱 AMP HTML 變數替換）。在以下範例中，頁面瀏覽請求會連同目前 AMP 文件的標準 URL、其標題和用戶端 ID 一起傳送到 URL

<amp-pixel src="https://example.com/analytics?url=${canonicalUrl}&title=${title}&clientId=${clientId(site-user-id)}"></amp-pixel>

由於其簡潔性，amp-pixel 標籤只能包含平台定義的變數，或 AMP 執行階段可以從 AMP 頁面剖析的變數。在上述範例中，平台會填入 canonicalURL 和 clientId(site-user-id) 的值。amp-analytics 標籤可以包含與 amp-pixel 相同的變數，以及在標籤設定中唯一定義的變數。

在頁面或平台定義的變數的請求字串中使用 ${varName} 格式。amp-analytics 標籤會在建構分析請求時，將範本替換為其實際值（另請參閱 amp-analytics 中支援的變數）。

在以下 amp-analytics 範例中，頁面瀏覽請求會連同從變數替換中擷取的其他資料一起傳送到 URL，其中有些由平台提供，有些在 amp-analytics 設定中內嵌定義

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "pageview":"https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(site-user-id)}"
      },
      "vars": {
        "account":"ABC123"
      },
      "triggers": {
        "someEvent": {
          "on": "visible",
          "request": "pageview",
          "vars": {
            "title": "My homepage"
          }
        }
      }
    }
  </script>
</amp-analytics>

在上述範例中，變數 account 和 title 在 amp-analytics 設定中定義。canonicalUrl 和 clientId 變數未在設定中定義，因此它們的值由平台替換。

重要 – 變數替換具有彈性；您可以將相同的變數定義在不同的位置，而 AMP 執行階段將按照此優先順序剖析值（請參閱變數替換順序）。

使用者識別

網站使用 Cookie 在瀏覽器中儲存特定於使用者的資訊。Cookie 可用於判斷使用者是否曾造訪過網站。在 AMP 中，頁面可以從發佈商的網站或快取（例如 Google AMP Cache）提供。發佈商的網站和快取可能具有不同的網域。基於安全考量，瀏覽器可以（而且通常會）限制存取另一個網域的 Cookie（另請參閱跨來源追蹤使用者）。

預設情況下，無論頁面是從發佈商的原始網站還是透過快取存取，AMP 都會管理用戶端 ID 的提供。AMP 產生的用戶端 ID 的值為 "amp-"，後跟隨機 base64 編碼字串，如果同一使用者再次造訪，則保持不變。

在所有情況下，AMP 都會管理用戶端 ID 的讀取和寫入。當頁面透過快取提供或在發佈商原始網站的檢視內容之外顯示時，這一點尤其值得注意。在這種情況下，無法存取發佈商網站的 Cookie。

當 AMP 頁面從發佈商的網站提供時，可以告知 AMP 使用的用戶端 ID 框架要尋找和使用的備用 Cookie。在這種情況下，clientId 變數的 cid-scope-cookie-fallback-name 引數會被解釋為 Cookie 名稱。格式可以顯示為 CLIENT_ID(cid-scope-cookie-fallback-name) 或 ${clientId(cid-scope-cookie-fallback-name)}。

例如

<amp-pixel src="https://foo.com/pixel?cid=CLIENT_ID(site-user-id-cookie-fallback-name)"></amp-pixel>

如果 AMP 發現已設定此 Cookie，則用戶端 ID 替換將傳回 Cookie 的值。如果 AMP 發現未設定此 Cookie，則 AMP 將產生 amp- 形式的值，後跟隨機 base64 編碼字串。

在AMP 分析中支援的變數中，了解更多關於用戶端 ID 替換的資訊，包括如何新增選用的使用者通知 ID。

繼續透過AMP 分析深入探討和使用案例了解分析。