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 網頁。將 <TARGET_ID> 替換為要傳送資料的產品 (例如 Google Ads、Google Analytics) 代碼 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 網頁，並在點選按鈕時將 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值。 從 AMP 網頁轉換到網站的其他網域後，應使用網址裝飾傳遞
cid和gclid值：**_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**最終到達網頁的
cid值應與初始到達網頁相同。請謹慎處理標準網頁和非 AMP 到達網頁之間的重新導向和網域變更。