深入探討 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 屬性，並將其值設定為 Analytics Vendors 清單中定義的適當供應商。

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

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

如果您是分析供應商，請進一步瞭解如何將您自己的分析設定整合至 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` 事件觸發時，至少需要其中一個屬性。這兩個屬性的值都應為數字陣列，其中包含產生 `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 在多個位置定義時，變數優先順序順序會設定其值一次。因此，如果遠端設定在上述範例中將帳戶定義為 UA-XXXXX-Y，則各種 vars 的值將如下所示

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