接入next-intl后Google Analytics数据异常，Cookie Banner自动拒授权

1. 修复Cookie Banner自动拒绝逻辑 #

确保Cookie Banner作为Client Component实现，强制初始化状态为拒绝，避免依赖默认值被国际化逻辑干扰：

// app/components/CookieBanner.tsx
'use client';
import { useEffect, useState } from 'react';

export default function CookieBanner() {
  const [consent, setConsent] = useState<'allowed' | 'denied' | null>(null);

  useEffect(() => {
    const savedConsent = localStorage.getItem('ga_consent');
    // 无存储记录时强制设为拒绝
    if (!savedConsent) {
      setConsent('denied');
      localStorage.setItem('ga_consent', 'denied');
      window.gtag?.('consent', 'update', {
        ad_storage: 'denied',
        analytics_storage: 'denied'
      });
    } else {
      setConsent(savedConsent as 'allowed' | 'denied');
    }
  }, []);

  const handleAllow = () => {
    setConsent('allowed');
    localStorage.setItem('ga_consent', 'allowed');
    window.gtag?.('consent', 'update', {
      ad_storage: 'granted',
      analytics_storage: 'granted'
    });
    // 同意后才初始化GA
    if (!window.dataLayer) {
      window.dataLayer = [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', process.env.NEXT_PUBLIC_GA_ID, { send_page_view: false });
      
      // 注入GA脚本
      const script = document.createElement('script');
      script.src = `https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_ID}`;
      script.async = true;
      document.body.appendChild(script);
    }
  };

  const handleDeny = () => {
    setConsent('denied');
    localStorage.setItem('ga_consent', 'denied');
    window.gtag?.('consent', 'update', {
      ad_storage: 'denied',
      analytics_storage: 'denied'
    });
  };

  if (consent === null) return null;
  return (
    <div className="fixed bottom-0 w-full p-4 bg-gray-800 text-white">
      <p>我们使用Cookie优化网站体验</p>
      <div className="flex gap-2 mt-2">
        <button onClick={handleAllow} className="px-4 py-2 bg-green-600">允许</button>
        <button onClick={handleDeny} className="px-4 py-2 bg-gray-600">拒绝</button>
      </div>
    </div>
  );
}

2. 解决next-intl引入后consent自动置为false的问题 #

调整Layout组件顺序，确保Cookie Banner在NextIntlClientProvider内部加载，同时避免国际化逻辑干扰Cookie状态：

// app/[locale]/layout.tsx
import { NextIntlClientProvider } from 'next-intl';
import { getMessages } from 'next-intl/server';
import CookieBanner from '@/app/components/CookieBanner';
import GAInitializer from '@/app/components/GAInitializer';

export default async function LocaleLayout({
  children,
  params: { locale }
}) {
  const messages = await getMessages({ locale });

  return (
    <html lang={locale}>
      <body>
        <NextIntlClientProvider locale={locale} messages={messages}>
          {children}
          <CookieBanner />
          <GAInitializer />
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

• 排查next-intl中间件/路由逻辑，确保NEXT_LOCALE等国际化Cookie与GA的Cookie无命名冲突。

3. 修复Google Analytics实时无数据问题 #

手动处理页面视图（适配App Router客户端导航） #

创建Client Component监听路由变化，手动发送页面视图：

// app/components/GAInitializer.tsx
'use client';
import { useEffect } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';

export default function GAInitializer() {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    const consent = localStorage.getItem('ga_consent');
    if (consent === 'allowed' && window.gtag) {
      const fullPath = `${pathname}${searchParams.toString() ? `?${searchParams.toString()}` : ''}`;
      window.gtag('event', 'page_view', { page_path: fullPath });
    }
  }, [pathname, searchParams]);

  return null;
}

关键检查点 #

• 确认GA Measurement ID配置正确，后台数据流与当前域名匹配；
• 打开浏览器Network面板，检查是否有collect请求发送到Google Analytics；
• 清除浏览器缓存与Cookie后重新测试，避免旧状态干扰。

额外排查项 #

• 升级next-intl到最新版本，规避已知的 hydration 时序问题；
• 所有涉及window、localStorage的操作必须放在Client Component中，且通过useEffect确保在客户端挂载后执行。

内容的提问来源于stack exchange，提问作者Paul S.