深入瞭解 AMP Analytics (分析)

重要事項：這份文件不適用於您目前選取的電子郵件格式！

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

本指南的其餘部分將使用這個設定範例，這個範例會追蹤網頁瀏覽量和使用者點擊連結的情形，並將 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>

以上範例程式碼僅供學習用途，絕非實際範例。如果您與 Analytics (分析) 供應商合作，以上範例可能不適用；供應商設定可簡化複雜度。請參閱 Analytics (分析) 供應商的文件，以瞭解範例設定。

Analytics (分析) 資料的傳送位置：type 屬性

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

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

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

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

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

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

載入遠端設定：config 屬性

您不必將 amp-analytics 的所有設定都完整納入您的 AMP 網頁中。您可以改為呼叫遠端網址，以取得全部或部分設定。

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

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

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

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

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

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

最後一步是確保遠端檔案中的內容已提取到 amp-analytics 設定中的適當位置。在此處的 pageview 和 event 要求中，帳戶變數值會自動設為遠端網址中的帳戶值 ("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 屬性描述應在何時傳送 Analytics (分析) 資料，例如在使用者瀏覽網頁或點擊連結時。

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}"
}

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

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

extraUrlParams 屬性指定要透過常見的「&foo=baz」慣例附加至要求網址查詢字串的其他參數。

amp-analytics 範例會將額外參數 cd1 新增至要求，並將參數值設為「AMP」

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

何時傳送資料：triggers 屬性

triggers 屬性描述應在何時傳送 Analytics (分析) 要求。它包含觸發條件名稱和觸發條件設定的鍵/值組合。觸發條件名稱可以是任何由英數字元 (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 廣告。由於 Analytics (分析) 的優先順序低於網頁上的內容，因此建議使用瀏覽器重新導向來追蹤點擊，以避免點擊遺失。

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`	我的使用者	觸發條件