跳至内容
文档错误在 Next.js 中使用 Google Analytics（通过 `next/script`）

在 Next.js 中使用 Google Analytics（通过 `next/script`）

使用 Google Analytics 的内联脚本时，优先使用 `next/script` 组件。

错误发生的原因

Google Analytics 使用了内联脚本，这可能会影响网页的性能。我们建议改为通过 `@next/third-parties` 库使用 `next/script`。

可能的解决方法

使用 `@next/third-parties` 添加 Google Analytics

**`@next/third-parties`** 是一个库，它提供了一系列组件和实用程序，可以提高在 Next.js 应用程序中加载流行的第三方库的性能和开发人员体验。它适用于 Next.js 14（安装 `next@latest`）。

可以使用 `GoogleAnalytics` 组件通过 Google 标记 ( `gtag.js` ) 将 Google Analytics 4 包含到您的页面中。默认情况下，它在页面发生水合后获取原始脚本。

**建议**：如果您的应用程序中已包含 Google 标记管理器，则可以直接使用它配置 Google Analytics，而不是将 Google Analytics 作为单独的组件包含进来。请参阅 文档 了解有关标记管理器和 `gtag.js` 之间差异的更多信息。

要为所有路由加载 Google Analytics，请将组件直接包含在根布局中并传入您的测量 ID

app/layout.tsx
import { GoogleAnalytics } from '@next/third-parties/google'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleAnalytics gaId="G-XYZ" />
    </html>
  )
}

要为单个路由加载 Google Analytics，请将组件包含在您的页面文件中

app/page.js
import { GoogleAnalytics } from '@next/third-parties/google'
 
export default function Page() {
  return <GoogleAnalytics gaId="G-XYZ" />
}

了解一下

  • 如果您使用的是 Pages 路由器，请参阅 `pages/` 文档。
  • `@next/third-parties` 还支持 Google 标记管理器 和其他第三方。
  • 不需要使用 `@next/third-parties`。您也可以直接使用 `next/script` 组件。请参阅 `next/script` 文档 了解更多信息。