React+react-router-dom环境下Google Analytics页面浏览量异常统计问题

核心原因 #

当调用gtag('config', '${gaTrackingCode}')初始化Google Analytics时，GA默认会自动监听浏览器的History API变化（比如pushState/replaceState）。而react-router-dom正是基于History API实现单页路由跳转的，所以即使你注释掉手动更新GA的代码，GA依然会捕获到路由变化并自动发送页面浏览事件。

但此时GA无法获取到更新后的页面标题——单页应用跳转不会触发页面刷新，GA只会在初始化时抓取一次document.title，后续路由变化时不会自动重新获取，所以所有自动记录的页面浏览都会显示相同的初始标题。

另外你注释的代码里存在参数错误：page_page是无效参数，正确的路径参数应该是page_path，这也是之前启用该代码后标题恢复正常的原因之一。

修复步骤 #

1. 禁用GA自动页面跟踪 #

在初始化GA的gtag('config')中添加send_page_view: false，阻止GA自动监听History变化发送页面浏览：

gtag('config', '${gaTrackingCode}', {
  cookie_flags: 'SameSite=None;Secure',
  send_page_view: false // 新增：禁用自动页面跟踪
});

2. 修正并启用手动页面跟踪代码 #

取消注释路由监听的useEffect，修正参数错误（page_page改为page_path），并使用当前页面的实际标题：

useEffect(() => {
  if (gaInitialized) {
    window.gtag('config', gaTrackingCode, {
      page_title: document.title, // 使用当前页面的真实标题
      page_path: location.pathname + location.search // 正确的路径参数名
    })
  }
}, [gaInitialized, location])

3. 完整修改后的代码 #

import { useLocation } from "react-router-dom";
import { useEffect, useState, createContext } from "react";

export const GoogleAnalyticsContext = createContext(null);

function GoogleAnalyticsProvider({children}) {
  const [gaInitialized, setGaInitialized] = useState(false);
  const [gaTrackingCode, setGaTrackingCode] = useState();
  const location = useLocation();

  useEffect(() => {
    //Fetch tracking code
    setGaTrackingCode('[my tracking code]')
  }, [])


  useEffect(() => {
    if (gaTrackingCode) {
      console.log("Updating script");
      const script1 = document.createElement('script');
      script1.async = true;
      script1.src = `https://www.googletagmanager.com/gtag/js?id=${gaTrackingCode}`
      document.body.appendChild(script1);

      const script2 = document.createElement('script');
      script2.async = true;
      script2.text = `
        window.dataLayer = window.dataLayer || [];
        function gtag(){window.dataLayer.push(arguments);}
        window.gtag = gtag;
        gtag('js', new Date());
      
        gtag('config', '${gaTrackingCode}', {
          cookie_flags: 'SameSite=None;Secure',
          send_page_view: false // 禁用自动页面跟踪
        });  
      `
      document.body.appendChild(script2);
      setGaInitialized(true);
    }
  }, [gaTrackingCode])

  // 启用并修正手动页面跟踪
  useEffect(() => {
    if (gaInitialized) {
      window.gtag('config', gaTrackingCode, {
        page_title: document.title,
        page_path: location.pathname + location.search
      })
    }
  }, [gaInitialized, location])

  const store = {
    gaInitialized
  }

  return <GoogleAnalyticsContext.Provider value={store}>{children}</GoogleAnalyticsContext.Provider>
}

export default GoogleAnalyticsProvider

关于其他环境的差异 #

另一个环境无此问题，大概率是该环境的GA配置默认禁用了自动History跟踪，或是通过GTM等工具初始化时关闭了自动页面视图功能。

临时方案说明 #

用发送事件统计页面浏览是可行的，但GA的page_view事件有专门的统计维度和报告模块，使用标准的gtag('config')方式更符合GA统计规范，能更好地利用其页面分析功能。

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