深入研究 AMP 分析

重要：本文件不適用於您目前選擇的廣告格式！

本指南深入探討 amp-analytics 元件，將 amp-analytics 設定範例分解為以下主要建構區塊

本指南的其餘部分使用此設定範例，該範例追蹤頁面瀏覽量和使用者點擊連結，並將分析資料傳送至第三方供應商 Google Analytics

<amp-analytics type="googleanalytics" config="https://example.com/analytics.account.config.json">
<script type="application/json">
{
  "requests": {
    "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
    "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
  },
  "vars": {
    "account": "ABC123"
  },
  "extraUrlParams": {
    "cd1": "AMP"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    },
    "trackAnchorClicks": {
      "on": "click",
      "selector": "a",
      "request": "event",
      "vars": {
        "eventId": "42",
        "eventLabel": "clicked on a link"
      }
    }
  },
  'transport': {
    'beacon': false,
    'xhrpost': false,
    'image': true
  }
}
</script>
</amp-analytics>

上述範例程式碼旨在幫助您學習，但絕非實際範例。如果您與分析供應商合作，則上述範例可能沒有意義；供應商設定簡化了複雜性。請查閱您的分析供應商文件以取得範例設定。

將分析資料傳送到哪裡：type 屬性

AMP 旨在支援兩種常見的資料收集模式

由發布商擁有的端點接收，用於內部分析系統。
由供應商擁有的端點接收，以與供應商解決方案互通 (例如，Adobe Analytics、Chartbeat、Google Analytics)。

若要將分析資料傳送至分析供應商，請在 amp-analytics 標籤中加入 type 屬性，並將其值設定為適當的供應商，如「分析供應商」清單中所定義。

例如：<amp-analytics type="googleanalytics"> 將分析資料傳送至第三方分析供應商 Google Analytics。若要將資料傳送至發布商擁有的端點，只需不要加入 type 屬性；分析資料將傳送至每個請求的已定義端點。

分析供應商設定是快速開始使用 amp-analytics 的方法。您應查閱供應商的文件和說明資源以取得進一步指導。如先前所述，已與 AMP 整合的供應商清單，以及其特定文件的連結，可在「分析供應商」清單中找到。

如果您是分析供應商，請進一步了解如何將您自己的分析設定整合到 AMP HTML 中。

載入遠端設定：config 屬性

您不必將 amp-analytics 的所有設定都包含在您的 AMP 頁面上。相反地，您可以呼叫遠端網址來取得全部或部分設定。

這讓您可以執行諸如根據特定請求變更設定之類的操作。如果您身為發布商可以控制遠端檔案，則可以執行任何必要的伺服器端處理來建構設定資料。

載入遠端設定的第一步是在 amp-analytics 標籤中加入 config 屬性

<amp-analytics config="https://example.com/analytics.account.config.json">

下一步是建立位於遠端網址中的 JSON 內容。在這個簡單的範例中，JSON 物件中包含的設定只是分析帳戶的變數值。

`https://example.com/analytics.account.config.json` 中的範例內容

{
  "vars": {
    "account": "UA-XXXXX-Y"  // Replace with your property ID.
  }
}

最後一步是確保遠端檔案中的內容被拉到 amp-analytics 設定中的適當位置。在此處的 pageview 和 event 請求中，account 變數值會自動設定為遠端網址中的帳戶值 ("account": "UA-XXXXX-Y")

"requests": {
  "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
  "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
}

重要事項 – AMP 不會驗證是否多次使用相同的變數。值會依照變數替換優先順序填入，而遠端網址中的值位於該順序的最頂端 (請參閱「變數替換順序」)。

請求、觸發器與傳輸

requests 屬性定義「傳送哪些資料」(例如，pageviews、events)，以及資料傳送到哪裡 (用於傳輸資料的網址)。

triggers 屬性描述何時應傳送分析資料，例如，當使用者檢視頁面、當使用者點擊連結時。

transport 屬性指定如何傳送請求，更具體地說，是協定。

請繼續閱讀以了解有關這些設定的更多資訊。(您也可以在 amp-analytics 參考資料中閱讀有關這些設定的資訊

傳送哪些資料：requests 屬性

request-name 用於觸發器設定中，以指定應針對特定事件傳送哪些請求。request-value 是 https 網址。這些值可能包含可參考其他請求或變數的預留位置符號。

"requests": {
  "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
  "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
}

某些分析供應商 (包括 Google Analytics) 已提供設定，您可以透過 type 屬性使用。如果您使用分析供應商，則可能不需要包含 requests 資訊。請參閱您的供應商文件，以了解是否需要設定 requests，以及如何設定。

附加請求網址：額外網址參數

extraUrlParams 屬性指定要附加到請求網址查詢字串的其他參數，透過常用的 "&foo=baz" 慣例。

amp-analytics 範例會將額外參數 cd1 加入請求，並將參數值設定為 "AMP"

  "extraUrlParams": {
    "cd1": "AMP"
  }

何時傳送資料：triggers 屬性

triggers 屬性描述何時應傳送分析請求。它包含觸發器名稱和觸發器設定的鍵值對。觸發器名稱可以是任何由英數字元 (a-zA-Z0-9) 組成的字串。

例如，以下 amp-analytics 元素已設定為在首次載入文件時，以及每次點擊 a 標籤時，將請求傳送到 https://example.com/analytics

"triggers": {
  "trackPageview": {
    "on": "visible",
    "request": "pageview"
  },
  "trackAnchorClicks": {
    "on": "click",
    "selector": "a",
    "request": "event",
    "vars": {
      "eventId": "42",
      "eventLabel": "clicked on a link"
    }
  }
}

重要事項 – 上述方法僅建議用於 AMP 頁面，而不適用於 AMPHTML 廣告。由於分析的優先順序低於頁面上的內容，因此建議使用瀏覽器重新導向來追蹤點擊，以避免點擊遺失。

AMP 支援以下觸發器設定

觸發器設定	描述
`on` (必要)	要監聽的事件。有效值為 `click`、`scroll`、`timer` 和 `visible`。
`request` (必要)	要傳送的請求名稱 (如requests 中所指定)。
`vars`	包含鍵值對的物件，用於覆寫在頂層設定中定義的 vars，或指定此觸發器獨有的 vars (另請參閱「變數替換順序」)。
`selector` (當 `on` 設定為 `click` 時為必要)	用於精簡應追蹤哪些元素的 CSS 選擇器。使用值 `*` 追蹤所有元素。此設定與 `click` 觸發器結合使用。了解如何使用選擇器來追蹤頁面點擊和社交互動。
`scrollSpec` (當 `on` 設定為 `scroll` 時為必要)	控制在頁面捲動時，在哪些條件下觸發 `scroll` 事件。此物件可以包含 `verticalBoundaries` 和 `horizontalBoundaries`。至少需要其中一個屬性才能觸發 `scroll` 事件。請參閱有關追蹤捲動的範例。
`timerSpec` (當 `on` 設定為 `timer` 時為必要)	控制何時觸發 `timer` 事件。計時器將立即觸發，然後在指定的間隔之後觸發。此設定與 `timer` 觸發器結合使用。

重要事項 – 來自較低優先順序設定的觸發器會被來自較高優先順序設定的同名觸發器覆寫 (請參閱「變數替換順序」)。

如何傳送資料：transport 屬性

transport 屬性指定如何傳送請求。預設情況下啟用以下三種方法

傳輸方法	描述
`beacon`	表示可以使用 navigator.sendBeacon 傳輸請求。這將傳送 `POST` 請求，帶有憑證和空的本文。
`xhrpost`	表示可以使用 `XMLHttpRequest` 傳輸請求。這將傳送 `POST` 請求，帶有憑證和空的本文。
`image`	表示可以透過產生 `Image` 標籤來傳送請求。這將傳送 `GET` 請求。

只會使用一種傳輸方法，而且是啟用、允許和可用的最高優先順序的方法。優先順序為 beacon > xhrpost > image。如果用戶端的使用者代理程式不支援某種方法，則會使用下一個最高優先順序的已啟用方法。

只有在您想要限制傳輸選項時，才在您的設定中加入 transport 屬性，否則可能會停止請求。

在以下範例中，beacon 和 xhrpost 設定為 false，因此即使它們的優先順序高於 image，也不會使用它們。如果用戶端的使用者代理程式支援 image 方法，則會使用它；否則，不會傳送任何請求。

'transport': {
  'beacon': false,
  'xhrpost': false,
  'image': true
}

變數替換順序

AMP 依照優先順序順序使用值填入變數

遠端設定 (透過 config)。
巢狀於 triggers 內觸發器內的 vars。
位於 amp-analytics 內頂層的 vars。
平台提供的值。

在此範例中，有遠端設定、在頂層定義的變數、在觸發器中定義的變數以及在平台層級定義的變數

<amp-analytics config="http://example.com/config.json">
<script type="application/json">
{
  "requests": {
    "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(cid-scope)}",
  },
  "vars": {
    "account": "ABC123",
    "title": "Homepage"
  },
  "triggers": {
    "some-event": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "My homepage",
        "clientId": "my user"
      }
  }
}
</script>
</amp-analytics>

當同一個 var 在多個位置定義時，變數優先順序順序會設定其值一次。因此，如果遠端設定在上述範例中將 account 定義為 UA-XXXXX-Y，則各種 vars 的值將如下所示

`變數`	值	定義者
`canonicalUrl`	`http://example.com/path/to/the/page`	平台
`title`	我的首頁	觸發器
`account`	`UA-XXXXX-Y`	遠端設定
`clientId`	我的使用者	觸發器