react-ga集成后Google Analytics收不到React应用数据

你的配置无法生效的核心原因是库和GA版本不匹配，附带一个逻辑疏漏：

• 你当前引入的react-ga库仅适配旧版Universal Analytics（即跟踪ID为UA-xxxxxx-x格式的旧版GA），你使用的G-开头ID是GA4版本的衡量ID，二者上报协议完全不兼容，请求发出去也会被GA后端拒收。
• 原代码中页面路径上报只传了pathname，漏了search参数，如果你的路由带查询参数，这部分数据会丢失。

修复步骤 #

完全不需要手动往index.html插入代码，直接替换适配GA4的React上报库即可，符合你的使用需求：

1. 替换依赖

   npm uninstall react-ga
   npm install react-ga4
   

2. 修改业务代码，修正后的完整代码如下：

   import React, { useEffect } from "react";
   import ReactDOM from "react-dom";
   import {
       BrowserRouter as Router,
       Switch,
       Route,
       useLocation,
   } from "react-router-dom";
   
   import AdminPage from "./admin/adminPage";
   
   import ReactGA from "react-ga4";
   const TRACKING_ID = "G-XXXXXXX"; // 替换为你真实的GA4衡量ID
   ReactGA.initialize(TRACKING_ID);
   
   const App = () => {
       const location = useLocation();
   
       useEffect(() => {
           ReactGA.send({
               hitType: "pageview",
               page: location.pathname + location.search
           });
       }, [location]);
   
       return (
           <Switch>
               <Route exact path='/admin'>
                   <AdminPage />
               </Route>
           </Switch>
       );
   };
   
   ReactDOM.render(
       <React.StrictMode>
           <Router>
               <App />
           </Router>
       </React.StrictMode>,
       document.getElementById("root")
   );
   

调试注意事项 #

• 本地调试时先关闭浏览器的广告拦截插件（AdBlock、uBlock Origin等），这类插件默认会屏蔽GA的上报请求，建议开无插件的隐私窗口测试。
• 验证上报是否成功可以直接打开浏览器控制台的「网络」面板，过滤collect请求，能看到带v=2参数的GA上报请求就说明配置正常。
• GA后台的普通报表有1-2小时的处理延迟，要看实时数据直接进后台的「实时」板块查看即可。
• 不建议继续使用旧版react-ga对接UA资源，UA已经在2023年停止数据处理，上报的数据不会被留存。

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