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 应用设计,旨在优化性能和开发体验。

如何操作

  1. 在所有路由中加载 Google Analytics:在根布局中引入 GoogleAnalytics 组件,并传入您的测量 ID。
    1. 在单个路由中加载 Google Analytics:在页面文件中引入 GoogleAnalytics 组件。

      注意事项

      • 如果您的应用已经包含了 Google Tag Manager,可以直接通过它来配置 Google Analytics。
      • @next/third-parties 还支持 Google Tag Manager 和其他第三方服务。
      • 直接使用 next/script 组件也是一个可行的选择。

      在 Vercel 上安装 @next/third-parties

      若您没有本地开发环境,可以直接在 Vercel 上安装 @next/third-parties。操作步骤如下:
      1. 修改 package.json:在 dependencies 中添加 "@next/third-parties": "^版本号"。请将 版本号 替换为所需的具体版本号。 例如:@next/third-parties": "^14.1.0
      1. 提交更改:保存并提交修改后的 package.json 文件到您的代码仓库。
      1. Vercel 自动部署:Vercel 将自动检测代码仓库的变更,并启动新的部署过程。
      1. 检查部署:登录到 Vercel 控制面板,确认部署没有出现错误。
      通过这些步骤,您可以轻松地在 Next.js 中集成 Google Analytics,并在 Vercel 上部署您的应用。

      参考:

      Calibre不要翻译我的路径插件GPT4free
      • Twikoo
      • Giscus
      • Utterance