如何為您的 AMP 頁面設定基本分析功能

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

分析平台通常透過內嵌 JavaScript 程式碼片段和函式呼叫整合到網站中，這些程式碼會觸發事件，並將事件傳回分析系統。AMP 提供彈性的 JSON 設定語法，可為多個分析合作夥伴複製此流程。

提示 – 如果您使用 Google Analytics 作為分析供應商，請參閱 amp-analytics。

Google Analytics 4 與 AMP

如需瞭解如何使用 amp-analytics 設定 Google Analytics 4，請參閱 amp-analytics 開發人員指南和 AMP 的標籤設定文件。

本文件的其餘部分主要討論 Universal Analytics，此版本已由 Google Analytics 4 取代.

背景資訊：非 AMP 頁面上的分析

以下是傳統 JavaScript 驅動的 Google Analytics 追蹤範例。我們會將其改寫為 amp-analytics JSON 格式，但首先，我們先來看看傳統方法

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//127.0.0.1/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

此 JavaScript 非常簡單；它會傳送通知以追蹤網頁瀏覽事件。

步驟 1：包含 `amp-analytics` 腳本

若要在 AMP 中複製此功能，我們必須先在文件的 <head> 中包含 amp-analytics 元件函式庫

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

步驟 2：新增設定程式碼

然後，讓我們將 amp-analytics 元件新增至文件 body 的結尾

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    }
  }
}
</script>
</amp-analytics>

如同此頁面頂端的 JavaScript 範例一樣，此 amp-analytics 程式碼片段將會向 Google Analytics 傳送通知，指出網頁已被瀏覽。

為了指定這一點，我們將 type 設定為 googleanalytics，然後在 JSON 中建立一個名為「default pageview」的觸發條件。當頁面可見時（由於 "on": "visible"），此觸發條件將會觸發，當它觸發時，我們會將 pageview 分析要求連同我們指定的 vars 一起傳送至 Google Analytics。

用來設定 amp-analytics 的 JSON 是一種非常彈性的格式，用於描述要傳送哪些分析資料以及何時傳送。 amp-analytics 具有格式的完整詳細資訊。

步驟 3：新增更多觸發條件

以上述範例為基礎，我們可以新增另一個名為 "click on #header trigger" 的觸發條件

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    },
    "click on #header trigger": {
      "on": "click",
      "selector": "#header",
      "request": "event",
      "vars": {
        "eventCategory": "examples",
        "eventAction": "clicked-header"
      }
    }
  }
}
</script>
</amp-analytics>

您可以從這個新觸發條件的名稱猜到，當點擊 ID 為 "header" 的元素時（由 "on": "click" 和 "selector": "#header" 指定），它將會觸發。當此觸發條件觸發時，我們會將 event 要求傳送至我們的分析供應商，並指定幾個要包含在要求中的變數。

如果您有想要整合的自訂追蹤平台，您仍然可以使用 amp-analytics 並定義您自己的個人化 URL 端點，以將追蹤資料傳送至該平台。在 amp-analytics 元件參考文件中瞭解更多資訊。

注意 – “UA-YYYY-Y” 是 Google Analytics 帳戶範例；如果您在您的網站上使用此範例，則應將其替換為您自己網站的 Google Analytics 追蹤程式碼。

提示 – 如果您對更簡單的追蹤系統感興趣，您可能會想看看 amp-pixel。如果您只需要追蹤網頁瀏覽量，amp-pixel 是比 amp-analytics 更輕量的解決方案，因為它僅旨在解決傳統像素追蹤的需求。在分析：基礎指南中瞭解更多資訊。