如何在Next.js中通过Google Analytics追踪单个用户并进行相关测试

一、关联用户唯一标识到GA（实现统一客户旅程） #

如果你的应用有登录系统，只需在用户登录成功后，将哈希处理后的用户ID/邮箱传给Google Analytics的user_id字段，就能把所有访问行为和该用户绑定：

1. 在Next.js的_app.js（Pages Router）或layout.js（App Router）中初始化GA并绑定用户标识：

// Pages Router 示例
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import md5 from 'md5'; // 需安装md5包做哈希处理

export default function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    // 初始化GA
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', '你的GA追踪ID');

    // 路由变化时发送页面浏览事件，附带用户标识
    const trackPageView = (url) => {
      const hashedUserId = pageProps.userId ? md5(pageProps.userId) : undefined;
      gtag('event', 'page_view', {
        page_path: url,
        user_id: hashedUserId
      });
    };

    router.events.on('routeChangeComplete', trackPageView);
    return () => router.events.off('routeChangeComplete', trackPageView);
  }, [router, pageProps.userId]);

  return <Component {...pageProps} />;
}

2. 用户登录后，通过页面props将用户ID传给_app组件（比如从服务端渲染的getServerSideProps或客户端登录状态中获取），务必哈希处理用户敏感信息（如邮箱），避免隐私合规风险。

二、解决react.ga路由查询参数变化的问题 #

react.ga插件对Next.js的动态路由变化（比如查询参数更新）支持不足，建议直接改用Google官方的gtag.js或Next.js 13+内置的分析组件：

• 用gtag时，监听所有路由变化（包括查询参数更新），手动触发page_view事件，确保每一次URL变更都能被GA捕获：

// 绑定路由监听，覆盖查询参数变化场景
router.events.on('routeChangeComplete', (url) => {
  gtag('event', 'page_view', {
    page_path: url,
    user_id: 你的哈希用户ID
  });
});

• 如果用Next.js App Router，直接使用官方集成的分析组件，它会自动处理所有路由变更：

// app/layout.js
import { Analytics } from '@vercel/analytics/react'; // 或GA官方gtag初始化代码

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
      <Analytics />
    </html>
  );
}

三、localhost/测试环境的GA追踪测试 #

完全可以在localhost或内部测试链接中测试GA追踪：

• localhost测试：本地运行Next.js项目即可，GA会接收数据，可在GA后台「实时」报告中查看访问记录。如果数据未显示，检查浏览器是否拦截GA脚本，或确认追踪ID配置正确。
• 测试数据隔离：建议在GA后台创建单独的测试视图/数据流，用测试追踪ID跑测试，避免污染正式统计数据。

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