添加Google Analytics到Astro 网站
date
Oct 23, 2024
AI 摘要
设置Google Analytics追踪代码到Astro网站，直接集成或使用Partytown库以提高性能，最后构建并部署项目以查看分析结果。
slug
astro-blog-add-google-analytics
status
Published
tags
front-end
summary
设置Google Analytics追踪代码到Astro网站，直接集成或使用Partytown库以提高性能，最后构建并部署项目以查看分析结果。
type
Post
1、设置 Google Analytics
访问Google Analytics帐户，为自己的网站创建Google Analytics追踪代码。
最终会得到类似如下的代码
注意：如果你复制上述代码，请确保将这两个MEASUREMENT_ID值替换为你的测量 ID 的实际值。
2、直接集成 GA 代码到Astro
一般将上面的代码添加到网站通用的 标签内即可。具体代码位置看下使用的 Astro 模板，比较可能的一个代码文件在 Layout.astro。
此外放入中的这段追踪代码，还需要添加。
最终的实现将如下：
3、借助 Partytown 第三方库
直接集成 GA 代码可能会遇到一些性能问题，另一个方法是借助Partytown 的库。
Partytown 允许集成第三方代码实现同样的功能，而不会降低网站的性能。可以参考在此处的文档了解更多相关信息。
3.1 步骤1 - 安装 Partytown 依赖
在 Astro 项目终端运行命令来安装 Partytown：
3.2 步骤2 - 配置Partytown
安装完成后，将Partytown集成添加到你的astro.config.mjs文件中：
在上面的代码中，我们导入了 Partytown 库：
import partytown from '@astrojs/partytown'。 然后我们将这段代码添加到integrations对象中。3.3 步骤3 - 添加 GA 代码
将 Google Analytics代码添加到页面
同样上面的代码添加到网站通用的 标签内。具体代码位置看下使用的 Astro 模板，比较可能的一个代码文件在 Layout.astro。
注意：
我们type=“text/partytown”向两个
3.4 步骤4 - 构建部署
构建并部署你的项目
比如使用npm run build其构建到dist文件夹中，然后将代码推送到 GitHub。这会自动触发 Netlify 部署。
网站部署完成后，需要等待一段时间才能在 Google Analytics 信息中心中查看分析结果。