如何在 Next.js 中集成 Google Analytics 代码？[Easy]

前言

Next.js 中集成 GA 代码，看起来是一件很容易的事情，但是看了很多其他项目的集成，很多都需要自己写一个组件使用 Script 标签，甚至有的还需有使用 dangerouslySetInnerHTML，都 4202 年了，难道 Next.js 中没有一个简单点的方式么?

上代码

经过搜索发现 Next.js 官方最新支持了 GA，直接上代码:

首先安装 @next/third-parties:

npm install @next/third-parties

然后把 GoogleAnalytics 放到 layout.tsx 组件中即可。
注意别引用错了，一般情况下用的是 GoogleAnalytics 而不是 GoogleTagManager。

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>
  )
}

使用环境变量

如果不想在代码里 hardcode GA-ID，可以放在 .env 中，如：

NEXT_PUBLIC_GA_ID=G-XYZ

然后替换上面的：

import { GoogleAnalytics } from '@next/third-parties/google'
 
const gaId = process.env.NEXT_PUBLIC_GA_ID || '';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleAnalytics gaId={gaId} />
    </html>
  )
}

注意事项

需要注意的这个 third-parties 包比较新，是 Next.js 需要在 14 以上，而且 third-parties 包要跟 Next.js 的版本一致。

参考链接

https://nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries#google-analytics

本文由 savokiss 创作，采用知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Apr 25, 2024 at 01:27 am