追蹤 Core Web Vitals
簡介
AMP 開發人員可以透過 amp-analytics 元件測量 Core Web Vitals 指標。使用變數替換將這些指標新增至 amp-analytics 發出的任何外寄要求。
在我們的指南 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 追蹤 Core Web Vitals
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>
在 AMP 中使用 Google Analytics 追蹤 Core Web Vitals
必須在 body 中設定 Analytics。在這裡，我們使用 type=gtag 屬性和值來啟用 Google Analytics 以追蹤網頁瀏覽量，並使用 extraUrlParams 功能將 Core Web Vitals 附加到請求 URL。
我們也將 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 快取提供時效能非常好，但在原始來源上效能較差，則您的 Core Web Vitals 可能會受到負面影響。確保為所有使用者提供出色體驗的一個好方法是追蹤您的頁面在 AMP 快取內外的 Core Web Vitals 效能。
我們可以基於我們的 Google Analytics 來做到這一點。amp-analytics 提供的一種替換是 ampdocHost - 這讓我們可以追蹤使用者造訪的頁面 URL。我們使用 extraUrlParams 擴展了我們之前的設定。這讓我們可以為我們的 Analytics 事件定義自訂的鍵和值。我們需要設定一個新的自訂維度，它將用作鍵。
建立用於追蹤 AMP Host 的自訂維度後，請務必記下 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 上編輯範例-