Next.js应用集成Google Analytics无数据接收，求问题排查

以下是排查和修复的具体步骤：

1. 验证环境变量配置 #

• 确认项目根目录下的.env.local文件中已正确设置GA ID，格式必须是：

  NEXT_PUBLIC_GOOGLE_ANALYTICS=G-XXXXXXXXX
  

• 修改环境变量后必须重启Next.js开发服务器，否则新变量不会生效。
• 可在GA组件中临时添加日志验证变量是否加载：

  console.log('GA ID:', process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS);
  

  如果输出undefined，说明环境变量未正确加载。

2. 调整Script组件的加载策略 #

lazyOnload策略会在页面完全加载后才执行脚本，可能导致快速跳转页面时脚本未触发。建议改为afterInteractive，确保脚本在页面交互就绪后立即加载：

<Script
  id="google-analytics-script"
  strategy="afterInteractive"
  src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}
/>
<Script
  id="google-analytics-config"
  strategy="afterInteractive"
  dangerouslySetInnerHTML={{
    __html: `
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
        page_path: window.location.pathname,
      });
    `,
  }}
/>

3. 处理客户端路由的页面切换 #

Next.js的客户端路由（如next/link跳转）不会触发页面刷新，GA无法自动记录页面浏览事件。需在_app.tsx中添加路由监听：

import { AppProps } from 'next/app';
import { useRouter } from 'next/router';
import { useEffect } from 'react';
// 其他导入...

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url: string) => {
      if (window.gtag) {
        window.gtag('config', process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS as string, {
          page_path: url,
        });
      }
    };

    router.events.on('routeChangeComplete', handleRouteChange);
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, []);

  // 原有渲染代码...
}

4. 检查GA后台配置 #

• 确认GA后台中创建的数据流类型为「网站」，且测量ID与你使用的G-XXXXXXXXX完全一致。
• 测试时需在非隐身模式下访问页面，隐身模式会阻止部分跟踪脚本，同时查看GA后台的「实时」报告确认数据是否接收。

5. 开发环境的特殊处理 #

Next.js在开发模式下会自动屏蔽部分跟踪脚本，若需在开发环境测试GA，可在配置中添加send_page_view: true强制发送：

gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
  page_path: window.location.pathname,
  send_page_view: true,
});

注意：上线前建议移除该配置，避免测试数据污染正式报表。

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