跟踪核心网页指标
简介
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 主机的自定义维度后，请务必记下分析页面上列出的 索引。此数字用于我们的配置对象中，将 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.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 上编辑示例-