Accelerated Mobile Pages (AMP) 平台可用於建構可快速轉譯的靜態內容網頁。AMP 包含可用於評估使用者互動的 <amp-analytics>
元素,且內建 Google Analytics (分析) 支援功能。
評估網頁瀏覽量的基本設定
如要在 AMP 網頁上建立 Google Analytics (分析) 基本安裝,請複製這個程式碼片段,並以 Google 代碼 ID 取代 <GA_MEASUREMENT_ID>
。找出 Google 代碼 ID。
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<GA_MEASUREMENT_ID>",
"config" : {
"<GA_MEASUREMENT_ID>": { "groups": "default" }
}
}
}
</script>
</amp-analytics>
將資料傳送至多個目的地
您可以使用相同的 <amp-analytics>
標記將資料傳送至多個目的地,只要在 config
指令中加入新的評估 ID <GA_MEASUREMENT_ID_NEW>
即可。
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"config" : {
"<GA_MEASUREMENT_ID>": { "groups": "default" },
"<GA_MEASUREMENT_ID_NEW>": { "groups": "default" }
}
}
}
</script>
</amp-analytics>
運作方式
<amp-analytics>
元素是擴充的 AMP 元件,且在指令碼標記中明確以 custom-element
的形式啟用。
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
設定 <amp-analytics>
元素區塊後,即可啟用 Google 評估產品。將 <amp-analytics>
的 type
屬性設為「gtag」(以啟用 gtag.js 支援功能),並將 data-credentials
屬性設為「include」(以啟用 Cookie)。
<amp-analytics type="gtag" data-credentials="include">
...
</amp-analytics>
AMP 不允許在其已核准的程式庫以外的任何 JavaScript,因此會改為使用 JSON 執行設定。vars
區塊會加入具有有效 <GA_MEASUREMENT_ID>
的 gtag_id
屬性,其下方會加入包含 <GA_MEASUREMENT_ID>: {}
的設定屬性做為值。
評估事件
使用 triggers
搭配已定義的值,即可評估 AMP 網頁上的事件。這些屬性用於觸發條件設定:
selector
:用於指定目標元素的 CSS 選取器。on
:指定事件類型。vars
:在event_name
中指定事件類型,並視需要新增其他參數。
本範例說明如何設定基本的 Google Analytics (分析) 事件。建立名為「按鈕」的觸發條件,以便在 ID 值為「the-button」的元素時觸發。這項觸發條件會將 event_name
值「login」以及 method
的值「Google」傳送至 Google Analytics (分析):
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars": { "gtag_id": "<GA_MEASUREMENT_ID>", "config": { "<GA_MEASUREMENT_ID>": { "groups": "default" } } }, "triggers": { "button": { "selector": "#the-button", "on": "click", "vars": { "event_name": "login", "method": "Google" } } } } </script> </amp-analytics>
Google Analytics (分析) 事件是 Google Analytics (分析) 專屬的事件類別,經常用來製作廣告活動報表。您可以使用 event_category
、event_label
和 value
參數在 vars 區塊中指定這些值:
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars": { "gtag_id": "<GA_MEASUREMENT_ID>", "config": { "<GA_MEASUREMENT_ID>": { "groups": "default" } } }, "triggers": { "button": { "selector": "#login", "on": "click", "vars": { "event_name": "login", "method": "Google" } } } } </script> </amp-analytics>
如要進一步瞭解觸發條件設定,請參閱 amp-analytics
說明文件。
修改參數
若要覆寫預設的 Google Analytics (分析) 參數或新增參數,請在 config
區塊的 parameter
區段中加入所需的值。本例會覆寫 page_title
和 page_location
的預設網頁瀏覽和事件值:
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default", "page_title": "Beethoven symphonies", "page_location": "https://www.example.com/beethoven.html" } } } } </script> </amp-analytics>
連結網域
網域連接器可讓不同網域中的兩個以上相關網站視為一個進行評估。指定要與 "linker": { "domains": [...] }
資源連結的網域:
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default", "linker": { "domains": ["example.com", "example2.com"] } } } } } </script> </amp-analytics>
在已設定 Google Analytics (分析) 的 AMP 網頁中,系統預設會啟用透過 AMP 快取連結至標準網域的功能。如要停用 Google Analytics (分析) 連結網域流量的功能,請在設定參數中加入 "linker": "false"
:
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default", "linker": "false" } } } } </script> </amp-analytics>
通用 Analytics (分析) 網站速度
Google Analytics (分析) 已設定為根據一小部分的網站流量,自動收集網站速度資料。您可以調整取樣率來收集更多或更少資料。如要將取樣率設為 100%,請在設定中新增醒目顯示的程式碼:
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default", "site_speed_sample_rate": 100 } } } } </script> </amp-analytics>
如要停止收集網站速度資料,請使用以下醒目顯示的程式碼:
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default", "site_speed_sample_rate": 0 } } } } </script> </amp-analytics>
AMP 流量與非 AMP 流量
根據預設,AMP 流量會使用不同於網路流量的用戶端 ID。AMP 網頁載入速度更快,並顯示與標準網頁不同的流量模式,這通常意味著 AMP 和非 AMP 流量的指標不同。
使用獨立資源來評估 AMP 流量後,您就能更準確地分析指標,並更準確地掌握流量資訊。如果您必須使用單一資源,如何區分 AMP 和非 AMP 流量:
- 使用資料來源維度或自訂維度 (通用 Analytics (分析)。)
- 使用自訂事件參數 (Google Analytics (分析) 4)。
對設定進行偵錯
AMP 驗證工具可用來判斷網頁是否不符合 AMP HTML 規格。在網頁網址中加入 #development=1
即可啟用驗證工具。
amp-analytics
擴充功能會提供警告和錯誤訊息,協助您偵錯及排解設定問題。將 #log=1
新增至網頁網址,即可在網路瀏覽器控制台中查看系統記錄的錯誤訊息。
完整範例
這個範例顯示完整的 AMP 網頁,其中包含一個按鈕。這項設定會將標準網頁瀏覽資料和「button-click」事件傳送至 Google Analytics (分析):
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<title>AMP gtag demo</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href="self.html" />
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<!-- Load AMP -->
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- Load amp-analytics -->
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
</head>
<body>
<!-- Configure analytics to use gtag -->
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars": {
"gtag_id": "<GA_MEASUREMENT_ID>",
"config": {
"<GA_MEASUREMENT_ID>": { "groups": "default" }
}
},
"triggers": {
"button": {
"selector": "#the-button",
"on": "click",
"vars": {
"event_name": "login",
"method": "Google"
}
}
}
}
</script>
</amp-analytics>
<h1>Make it so.</h1>
<div>
<button type="button" id="the-button">Engage!</button>
</div>
</body>
</html>
相關資源
- AMP:AMP 專案
- AMP:什麼是 AMP?
- AMP:amp-analytics
- gtag.js:使用 gtag.js 搭配 AMP
- 通用 Analytics (分析) 說明中心:Accelerated Mobile Pages (AMP)
- Google Analytics (分析) 4 說明中心:Accelerated Mobile Pages (AMP)