跳到内容
文档错误将 Google Analytics 与 Next.js 结合使用（通过 `next/script`）

将 Google Analytics 与 Next.js 结合使用（通过 `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 包含到您的页面中。 默认情况下，它会在页面上发生 hydration 后获取原始脚本。

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

要为所有路由加载 Google Analytics，请将该组件直接包含在您的根布局中，并传入您的 Measurement 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 Router，请参阅 pages/ 文档。
  • @next/third-parties 也支持 Google Tag Manager 和其他第三方。
  • 不强制使用 @next/third-parties。 您也可以直接使用 next/script 组件。 请参阅 next/script 文档以了解更多信息。