跟踪核心网页指标
简介
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.org.cn/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 中跟踪核心网页指标
必须在正文中配置分析。在这里，我们使用 type=gtag 属性和值来启用 Google Analytics 以跟踪页面浏览量，并使用 extraUrlParams 功能将核心网页指标附加到请求 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.org.cn/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 - 这让我们跟踪用户访问的页面的 URL。我们使用 extraUrlParams 扩展我们之前的配置。这使我们可以为我们的分析事件定义自定义键和值。我们需要设置一个新的自定义维度，该维度将用作键。
创建用于跟踪 AMP 主机的自定义维度后，请确保记下分析页面上列出的 Index。此数字用于我们的配置对象中，以将 ampdocHost 连接到您刚创建的维度。在下面，我们假设您的索引是“1”（即 cd1）。如果您的 Index 为 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.org.cn/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 上编辑示例-