跟踪核心网页指标
简介
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>
在 AMP 中使用 Google Analytics 跟踪核心网页指标
必须在正文中配置 Analytics。这里我们使用 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 上编辑示例-