跳到内容
文档错误将 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，请将该组件直接包含在您的根布局中，并传入您的衡量 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 文档以了解更多信息。