追蹤核心網頁指標
簡介
AMP 開發人員可以透過 amp-analytics 元件測量核心網頁指標。使用變數替換將這些指標新增至 amp-analytics 提出的任何外寄要求。
在我們的指南分析：基本知識中深入瞭解 amp-analytics。
設定
在標頭中匯入 amp-analytics 元件。
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
使用 amp-analytics 追蹤核心網頁指標
amp-analytics 元件提供下列巨集
雖然您可以將這些巨集附加到任何觸發器，但它們會個別且非同步地解析。由於觸發器在所有巨集解析完成之前不會完成，因此通常最好將每個巨集拆分為自己的個別觸發器，以防止報告不足。
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://amp.dev.org.tw/documentation/examples/advertising-analytics/tracking_core_web_vitals/ping?user=&account=ampdev&event=${eventId}",
"CWV_EVENT": "${event}&type=CWV"
},
"triggers": {
"cls": {
"on": "visible",
"request": "CWV_EVENT",
"extraUrlParams": {
"cls": "${cumulativeLayoutShift}"
}
},
"lcp": {
"on": "visible",
"request": "CWV_EVENT",
"extraUrlParams": {
"lcp": "${largestContentfulPaint}"
}
},
"fid": {
"on": "visible",
"request": "CWV_EVENT",
"extraUrlParams": {
"fid": "${firstInputDelay}"
}
},
}
}
}
</script>
</amp-analytics>
使用 Google Analytics 在 AMP 中追蹤核心網頁指標
必須在內文中設定 Analytics (分析)。在這裡，我們使用 type=gtag 屬性和值啟用 Google Analytics (分析) 以追蹤網頁瀏覽量，並使用 extraUrlParams 功能將核心網頁指標附加到要求網址。
我們也將 data-credentials 屬性設定為「include」以啟用 Cookie。
$CALC(${cumulativeLayoutShift}, 1000, multiply)
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars": {
"gtag_id": "G-XXXXXXXX",
"config": {
"G-XXXXXXXX": {
"groups": "default"
}
}
},
"requests": {
"event": "https://amp.dev.org.tw/documentation/examples/advertising-analytics/tracking_core_web_vitals/ping?user=&account=ampdev&event=${eventId}",
"CWV_EVENT": "${event}&type=CWV"
},
"triggers": {
"defaultPageview": {
"on": "visible",
"request": "pageview",
"vars": {
"title": "{{title}}"
}
},
"cls": {
"on": "visible",
"request": "CWV_EVENT",
"extraUrlParams": {
"cls": "$CALC(${cumulativeLayoutShift}, 1000, multiply)"
}
},
"lcp": {
"on": "visible",
"request": "CWV_EVENT",
"extraUrlParams": {
"lcp": "${largestContentfulPaint}"
}
},
"fid": {
"on": "visible",
"request": "CWV_EVENT",
"extraUrlParams": {
"fid": "${firstInputDelay}"
}
}
}
}
</script>
</amp-analytics>
Google Analytics 4 與 AMP
如需瞭解如何使用 amp-analytics 設定 Google Analytics 4 的詳細資訊，請參閱amp-analytics 開發人員指南和AMP 的標籤設定文件。
比較 AMP 快取與原始來源的效能
AMP 快取旨在確保您的使用者擁有盡可能優質的體驗，但務必確保頁面的原始來源版本也具有相同的效能。如果您的 AMP 頁面從 AMP 快取提供時效能非常好，但在原始來源上的效能較差，則您的核心網頁指標可能會受到負面影響。確保為所有使用者提供優質體驗的好方法是追蹤您的頁面在 AMP 快取內外運作的核心網頁指標效能。
我們可以以此 Google Analytics (分析) 為基礎進行建置。amp-analytics 提供的替換項目之一是 ampdocHost - 這可讓我們追蹤使用者造訪的頁面網址。我們使用 extraUrlParams 擴充先前的設定。這可讓我們為 Analytics (分析) 事件定義自訂的鍵和值。我們需要設定新的自訂維度，該維度將用作鍵。
建立自訂維度以追蹤 AMP 主機後，請務必記下 Analytics (分析) 頁面上列出的「索引」。此號碼用於我們的設定物件中，以將 ampdocHost 連線到您剛建立的維度。以下我們假設您的索引為「1」（即 cd1）。如果您的「索引」為 2，則使用 cd2，依此類推。
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars": {
"gtag_id": "G-XXXXXXXX",
"config": {
"G-XXXXXXXX": {
"groups": "default"
}
}
},
"requests": {
"event": "https://amp.dev.org.tw/documentation/examples/advertising-analytics/tracking_core_web_vitals/ping?user=&account=ampdev&event=${eventId}",
"CWV_EVENT": "${event}&type=CWV"
},
"triggers": {
"defaultPageview": {
"on": "visible",
"request": "pageview",
"vars": {
"title": "{{title}}"
},
"extraUrlParams": {
"cd1": "${ampdocHost}"
}
},
"cls": {
"on": "visible",
"request": "CWV_EVENT",
"extraUrlParams": {
"cls": "$CALC(${cumulativeLayoutShift}, 1000, multiply)"
}
},
"lcp": {
"on": "visible",
"request": "CWV_EVENT",
"extraUrlParams": {
"lcp": "${largestContentfulPaint}"
}
},
"fid": {
"on": "visible",
"request": "CWV_EVENT",
"extraUrlParams": {
"fid": "${firstInputDelay}"
}
}
}
}
</script>
</amp-analytics>
如果本頁面上的說明未涵蓋您的所有問題，請隨時與其他 AMP 使用者聯絡，討論您的確切使用案例。
前往 Stack Overflow 不明功能？AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，但我們也歡迎針對您特別感興趣的問題提供一次性貢獻。
在 GitHub 上編輯範例-