为什么我的 Astro 项目未加载 Vercel Web Vitals？

Question

我使用 Astro 和 Tailwind CSS 创建了一个登陆页面。目前它托管在 Vercel 上。我想尝试 Vercel 提供的分析服务。我已经能够利用 Vercel 提供的受众分析服务。但是，我无法使用 Web Vitals 服务。启用服务并重新部署我的项目后，我陷入了这个屏幕（提供了屏幕截图）。

请注意，我确实关闭了广告拦截器，但这并没有解决问题。我还添加了以下元标记来解决任何 CSP 问题

<meta http-equiv="Content-Security-Policy"
      content="default-src 'self' vitals.vercel-insights.com"/>

但这并没有解决问题。这就是为什么我想知道 Vercel 是否支持 Astro 项目的分析，如果支持，那么我做错了什么？谢谢。

Answer 1

更新，2023 年 4 月

\n

Astro\xe2\x80\x99s Vercel 集成在 3.1.0 版中添加了对分析的内置支持。您现在只需更新 Astro 配置文件即可启用此功能。

\n

\n

1. 如果您尚未使用 Vercel 适配器，请将其安装到您的项目中：

   \n

   npm i @astrojs/vercel\n

   \n
\n

2. 更新astro.config.mjs以使用 Vercel 适配器并设置analytics: true：

   \n

   // astro.config.mjs\nimport { defineConfig } from \'astro/config\';\nimport vercel from \'@astrojs/vercel/static\';\n\nexport default defineConfig({\n  adapter: vercel({\n    analytics: true\n  }),\n});\n

   \n
\n

\n\n

原始答案，2022 年 12 月

\n

Vercel\xe2\x80\x99s Web Vitals 分析目前仅对Next、Nuxt 和 Gatsby 提供开箱即用的支持。

\n

要使用 Astro 等不同框架跟踪 Web Vitals，您需要进行一些手动设置工作，如Vercel\xe2\x80\x99s Web Vitals API 文档中所述。

\n

例如，在您的基本 Astro 布局中，您可以包含一个脚本标记，该标记将导入示例代码并运行它：

\n

---\n// src/layouts/BaseLayout.astro\n---\n\n<script>\nimport { webVitals } from \'../scripts/vitals\';\n\nconst analyticsId = import.meta.env.PUBLIC_VERCEL_ANALYTICS_ID;\n\nwebVitals({\n  path: window.location.pathname,\n  analyticsId,\n});\n</script>\n

\n

这里\xe2\x80\x99s Vercel\xe2\x80\x99s 示例vitals.js片段：

\n

---\n// src/layouts/BaseLayout.astro\n---\n\n<script>\nimport { webVitals } from \'../scripts/vitals\';\n\nconst analyticsId = import.meta.env.PUBLIC_VERCEL_ANALYTICS_ID;\n\nwebVitals({\n  path: window.location.pathname,\n  analyticsId,\n});\n</script>\n

\n

对于更实际的实现，请查看存储库中的<TrackVitals>Astro 组件astro-badge。

\n