跟踪核心网页指标
简介
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 上编辑示例-