Next.js集成Google Analytics遇页面名称显示异常求解决

问题1：无文档标题时GA实时标签页不显示页面名称 #

方案1：为页面动态添加文档标题 #

在Next.js Pages Router中，可通过next/head组件为每个页面单独设置标题：

import Head from 'next/head';

export default function AboutPage() {
  return (
    <>
      <Head>
        <title>关于我们 | 我的站点</title>
      </Head>
      {/* 页面内容 */}
    </>
  );
}

若需统一管理，可在_app.tsx中基于路由映射标题：

// _app.tsx
import Head from 'next/head';
import { useRouter } from 'next/router';

const routeTitles = {
  '/': '首页',
  '/about': '关于我们',
  '/blog': '博客专栏'
};

export default function MyApp({ Component, pageProps }) {
  const router = useRouter();
  const currentTitle = routeTitles[router.pathname] || '默认标题';

  return (
    <>
      <Head>
        <title>{`${currentTitle} | 我的站点`}</title>
      </Head>
      <Component {...pageProps} />
    </>
  );
}

方案2：通过URL作为GA页面名称 #

修改lib/ga.ts中的pageview方法，当页面无标题时用URL填充：

// lib/ga.ts
export const pageview = (url: string) => {
  const pageTitle = document.title || url;
  window.gtag('config', '你的GA跟踪ID', {
    page_title: pageTitle,
    page_path: url
  });
};

问题2：实时标签页显示页面名称，但Engagement>Pages and Screens中找不到 #

• 等待数据同步延迟：GA4的非实时报告（如Engagement模块）通常需要24-48小时完成数据处理，测试后请间隔一段时间再查看。
• 检查事件参数完整性：用Chrome开发者工具（Application > Tags > GA4）查看发送的pageview事件，确认page_title和page_path参数已正确携带。
• 验证GA初始化配置：核对_document.js中的GA脚本，确保跟踪ID正确、脚本加载无报错。
• 排查数据过滤规则：登录GA后台，进入「Admin > 数据设置 > 数据过滤器」，确认未设置过滤规则导致页面数据被拦截。
• 确认pageview事件触发逻辑：在_app.tsx中添加日志验证路由变化时是否调用了pageview：

// _app.tsx
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import { pageview } from '../lib/ga';

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

  useEffect(() => {
    const trackRouteChange = (url: string) => {
      console.log('发送pageview:', url);
      pageview(url);
    };

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

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

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