ReactGA配置正确但Google Analytics无统计数据，搭配react-router如何调试

问题核心原因 #

• 当前代码仅在App组件首次挂载时一次性上报了两个固定路径的页面浏览，没有绑定react-router的路由变化监听，用户实际跳转页面时不会触发对应上报
• 硬编码的上报路径和用户实际访问路径不匹配，也无法覆盖所有路由场景

修复方案 #

调整App.js代码，新增路由监听逻辑，动态上报当前访问的页面路径：

import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Switch, Route, useLocation } from "react-router-dom";
import ReactGa from "react-ga";

//import CSS
import "./App.css";

//import components
import AboutMePage from "./components/about-me-page/AboutMePage";
import MyWorkPage from "./components/my-work-page/MyWorkPage";

// 路由监听上报组件
const AnalyticsTracker = () => {
  const location = useLocation();
  useEffect(() => {
    // 路由变化时自动上报当前页面路径+查询参数
    ReactGa.pageview(location.pathname + location.search);
  }, [location]);
  return null;
};

function App() {
  // Google analytics 初始化仅执行一次
  useEffect(() => {
    // 新增debug参数即可开启控制台日志，方便排查问题
    ReactGa.initialize("**你的GA ID**", {
      debug: true
    });
  }, []);

  //states
  const [currentTags, setCurrentTags] = useState([]);
  const [videoPanelObject, setVideoPanelObject] = useState({
    hidden: true,
    videos: [],
    videoNumber: 0,
  });

  return (
    <Router>
      {/* 放在Router内部才能正常监听路由变化 */}
      <AnalyticsTracker />
      <Switch>
        <Route path="/" exact render={(props) => <AboutMePage {...props} />} />

        <Route
          path="/my-work"
          render={(props) => (
            <MyWorkPage
              {...props}
              currentTags={currentTags}
              setCurrentTags={setCurrentTags}
              videoPanelObject={videoPanelObject}
              setVideoPanelObject={setVideoPanelObject}
            />
          )}
        />
      </Switch>
    </Router>
  );
}

export default App;

调试说明 #

• 初始化时开启debug: true后，打开浏览器控制台即可看到ReactGA的上报日志，可直接确认上报是否触发、上报路径是否正确
• 打开浏览器网络面板，过滤collect关键词，可查看是否有发往GA服务器的上报请求，校验请求参数是否正常
• 注意版本匹配：react-ga仅支持Universal Analytics（UA版），如果你当前使用的是GA4统计，需要替换为react-ga4依赖包，调用逻辑对应调整即可
• 如果你使用的是react-router v6版本，将代码中的Switch替换为Routes，并调整Route的语法即可，路由监听逻辑不需要改动

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