Accelerated Mobile Pages (AMP) 專案是開放原始碼的網路平台，有助於提升網路內容的效能。AMP 內建支援 Google 代碼和 Google 代碼管理工具。本指南說明如何為 AMP 網頁設定 Google Analytics。
安裝
您可以使用 Google 代碼，在 AMP 網頁上安裝 Google Analytics、Google Ads 和其他 Google 產品。Google 代碼管理工具會設定 AMP 容器，並讓您透過代碼管理工具介面建立進階設定及部署第三方代碼。
從下列按鈕選取偏好的平台：
Google 代碼
gtag.js 的 AMP 導入作業會使用 amp-analytics 框架，讓您在 AMP 網站上導入 Analytics。資料可透過相同的 gtag.js 程式碼，從 AMP 網頁傳送至 Google Ads、Google Analytics 和其他 Google 產品。
安裝
如要在 AMP 網頁上設定 gtag.js，請先確認您已在網頁的 <head> 代碼中加入 amp-analytics 元件：
<script async custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
</script>
接著，在網頁的 <body> 代碼中，以 JSON 元件的形式將 Google 代碼新增至 AMP 網頁。請用您要傳送資料的產品 (例如 Google Ads、Google Analytics) 代碼 ID 取代 <TARGET_ID>：
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<TARGET_ID>",
"config" : {
"<TARGET_ID>": { "groups": "default" }
}
}
}
</script>
</amp-analytics>
如要在 Google 代碼中設定多個產品，不必安裝該產品的完整代碼。您只需要在個別的 config 指令中加入目的地 ID。
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<TAG_ID>",
"config" : {
"<TAG_ID>": { "groups": "default" },
<!-- Additional IDs -->
}
}
}
</script>
</amp-analytics>
詳情請參閱 amp-analytics 說明文件。
事件觸發條件
如要將特定資料傳送至產品，請根據點擊等事件設定觸發條件。AMP 中的 gtag.js 觸發條件與其他 amp-analytics 觸發條件設定採用相同的 JSON 模式。
這個範例說明如何將 click 事件傳送至 Google Analytics。selector 值是 CSS 選取器，可讓您指定要鎖定的元素。on 值會指定事件類型，在本例中為 click 事件。在 vars 區段中，於 event_name 指定事件類型，並視需要新增其他參數。
"triggers": {
"button": {
"selector": "#the-button",
"on": "click",
"vars": {
"event_name": "login",
"method": "Google"
}
}
}
除了建議事件，您也可以指定自己的自訂事件。
透過 Google Analytics 傳送自訂維度和參數
如要使用 gtag.js 從 AMP 網頁將自訂維度和指標傳送至 Google Analytics，您可以在 <amp-analytics> JSON 的觸發條件設定中運用 extraUrlParams 屬性。Google Analytics 中的自訂參數會以事件參數的形式傳送。
- 字串值事件參數請使用
ep.前置字元。 - 數值型事件參數請使用
epn.前置字元。
傳送前，請務必在 Google Analytics 資源中註冊這些自訂維度和指標。
範例：網頁瀏覽的自訂參數
這項設定會隨初始網頁瀏覽傳送自訂維度 my_custom_dimension 和自訂指標 my_page_score：
<amp-analytics type="gtag" id="gtag_amp">
<script type="application/json">
{
"vars": {
"gtag_id": "G-XXXXXX",
"config": {
"G-XXXXXX": { "groups": "default" }
}
},
"triggers": {
"pageview": {
"on": "visible",
"request": "pageview",
"extraUrlParams": {
"ep.my_custom_dimension": "value1",
"epn.my_page_score": 95
}
}
}
}
</script>
</amp-analytics>
範例：含有自訂參數的點擊事件
如果點選 ID 為 myButton 的元素，這項設定就會傳送自訂參數：
<amp-analytics type="gtag" id="gtag_amp">
<script type="application/json">
{
"vars": {
"gtag_id": "G-XXXXXX",
"config": {
"G-XXXXXX": { "groups": "default" }
}
},
"triggers": {
"pageview": {
"on": "visible",
"request": "pageview"
},
"trackButtonClick": {
"on": "click",
"selector": "#myButton",
"request": "event",
"vars": {
"event_name": "button_click",
"event_category": "Interactive"
},
"extraUrlParams": {
"ep.button_id": "myButton",
"ep.custom_info": "MoreDetails"
}
}
}
}
</script>
</amp-analytics>
連結網域
網域連接器可將不同網域上的兩個以上相關網站視為一個網站進行評估。如要指定應連結的網域，請使用 "linker": { "domains": [...] }：
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<TARGET_ID>",
"config" : {
"<TARGET_ID>": {
"groups": "default",
"linker": { "domains": ["example.com", "example2.com", "foo.example.com"] }
}
}
}
}
</script>
</amp-analytics>
根據預設，系統會啟用從 AMP 快取連結至標準網域的功能。如要關閉連結網域流量的功能，請將 "linker":
"false" 新增至 config 參數：
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<TARGET_ID>",
"config" : {
"<TARGET_ID>": {
"groups": "default",
"linker": "false"
}
}
}
}
</script>
</amp-analytics>
完整範例
這個程式碼範例完整示範 AMP 網頁的運作方式，包括建立單一 AMP 網頁，以及在點選按鈕時將 button-click 事件傳送至 Google Analytics。請將 <TAG_ID> 替換為有效的代碼 ID：
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<link rel="canonical" href="self.html" />
<title>AMP gtag demo</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<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": "<TAG_ID>",
"config": {
"<TAG_ID>": {}
}
},
"triggers": {
"button": {
"selector": "#the-button",
"on": "click",
"vars": {
"event_name": "login",
"method": "Google"
}
}
}
}
</script>
</amp-analytics>
<h1>Welcome to the mobile web</h1>
<div>
<button type="button" id="the-button">Example: Log in with Google</button>
</div>
</body>
</html>
疑難排解
使用 validator.amp.dev 驗證代碼設定，或手動確保 cid 值在各網域中保持一致，方法如下：
- 請務必清除 Cookie 或使用無痕模式。
- 如果 Google Analytics Cookie 中沒有
cid，您也可以在網頁瀏覽器的「網路」分頁中觀察到這個值。搜尋collect request，且酬載應包含cid值。 從 Google CDN 傳遞至用戶端網站後，
cid和gclid值應透過網址修飾傳遞：**_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**最終到達網頁的
cid值應與初始到達網頁相同。請謹慎處理標準網頁和非 AMP 到達網頁之間的重新導向和網域變更。