深入探討 AMP 分析功能

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

本指南的其餘部分使用這個設定範例，此範例會追蹤網頁瀏覽次數和使用者點擊連結的次數，並將分析資料傳送給第三方供應商 Google Analytics (Google 分析)

<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 (Google 分析))。

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

例如：<amp-analytics type="googleanalytics"> 會將分析資料傳送給第三方分析供應商 Google Analytics (Google 分析)。如要將資料傳送給發布商擁有的端點，只要不要加入 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 (Google 分析)) 已提供設定，您可透過 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` (必要)	要傳送的要求名稱 (如要求中所指定)。
`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，則各種變數的值如下

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