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 许可协议,转载请注明出处。
相关文章