Next.js 14配置GoogleAnalytics时如何启用DebugView

由于@next/third-parties/google提供的<GoogleAnalytics>组件暂不支持直接传入debug_mode参数，你可以通过以下方式启用DebugView：

方法一：客户端手动设置debug_mode #

利用React的useEffect钩子，在客户端环境下调用gtag的set方法开启调试模式：

'use client'
import { GoogleAnalytics } from '@next/third-parties/google'
import { useEffect } from 'react'

export default function RootLayout({ children }) {
  useEffect(() => {
    // 确保gtag已加载且在客户端环境执行
    if (typeof window !== 'undefined' && window.gtag) {
      window.gtag('set', { debug_mode: true })
    }
  }, [])

  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleAnalytics gaId="G-XYZ" />
    </html>
  )
}

方法二：通过环境变量控制调试模式（推荐） #

在项目根目录的.env.local文件中添加环境变量：

NEXT_PUBLIC_GA_DEBUG=true

然后在代码中根据环境变量动态开启调试，避免生产环境误开启：

'use client'
import { GoogleAnalytics } from '@next/third-parties/google'
import { useEffect } from 'react'

export default function RootLayout({ children }) {
  useEffect(() => {
    if (typeof window !== 'undefined' && window.gtag && process.env.NEXT_PUBLIC_GA_DEBUG === 'true') {
      window.gtag('set', { debug_mode: true })
    }
  }, [])

  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleAnalytics gaId="G-XYZ" />
    </html>
  )
}

方法三：使用浏览器扩展快速调试 #

安装Chrome浏览器的Google Analytics Debugger扩展，启用后会自动给所有GA请求添加debug_mode=true参数，无需修改代码即可开启DebugView。

内容的提问来源于stack exchange，提问作者smaica