type
status
date
slug
summary
tags
category
icon
password
如何在 Next.js 中使用 Google Analytics（通过 next/script）
简介
在 Next.js 中集成 Google Analytics 时，推荐使用
next/script 组件而不是传统的内联脚本。这样做不仅能提高网页性能，还能简化集成过程。为何选择 next/script
使用内联脚本加载 Google Analytics 可能会影响网页性能。
next/script 提供了一个更优的解决方案，它通过异步加载脚本来提高页面加载速度。使用 @next/third-parties 集成 Google Analytics
@next/third-parties 是从 Next.js 14 版本开始提供的一个库。它提供了用于加载流行的第三方库的组件和工具，这些工具专为 Next.js 应用设计，旨在优化性能和开发体验。如何操作
- 在所有路由中加载 Google Analytics：在根布局中引入
GoogleAnalytics组件，并传入您的测量 ID。
- 在单个路由中加载 Google Analytics：在页面文件中引入
GoogleAnalytics组件。
注意事项
- 如果您的应用已经包含了 Google Tag Manager，可以直接通过它来配置 Google Analytics。
@next/third-parties还支持 Google Tag Manager 和其他第三方服务。
- 直接使用
next/script组件也是一个可行的选择。
在 Vercel 上安装 @next/third-parties
若您没有本地开发环境，可以直接在 Vercel 上安装
@next/third-parties。操作步骤如下：- 修改
package.json：在dependencies中添加"@next/third-parties": "^版本号"。请将版本号替换为所需的具体版本号。 例如：@next/third-parties": "^14.1.0
- 提交更改：保存并提交修改后的
package.json文件到您的代码仓库。
- Vercel 自动部署：Vercel 将自动检测代码仓库的变更，并启动新的部署过程。
- 检查部署：登录到 Vercel 控制面板，确认部署没有出现错误。
通过这些步骤，您可以轻松地在 Next.js 中集成 Google Analytics，并在 Vercel 上部署您的应用。
参考：
- 作者:Doiiars
- 链接:https://notion.doiiars.com/article/use-google-analytics-in-nextjs
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
相关文章