You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React项目升级GA至GA4,react-ga4报pageview不是函数错误

问题

我正尝试将React项目中的谷歌分析(GA)升级至GA4,使用了npm包react-ga4,但出现错误:react_ga4__WEBPACK_IMPORTED_MODULE_0__.default.pageview is not a function。已执行npm安装该包并检查语法,相关代码如下:

//import ReactGA from 'react-ga';
import ReactGA from "react-ga4";
function init() {
  // 本地开发环境启用调试模式
  const isDev = false; // !process.env.NODE_ENV || process.env.NODE_ENV === 'development';
 // ReactGA.initialize(process.env.GOOGLE_ANALYTICS_TRACKING_ID, { debug: isDev });
  ReactGA.initialize(process.env.GOOGLE_ANALYTICS_TRACKING_ID, { debug: isDev });
}

function sendEvent(payload) {
  ReactGA.event(payload);
}

function sendPageview(path) {
  ReactGA.set({ page: path });
  ReactGA.pageview(path);
}

export default {
  init,
  sendEvent,
  sendPageview,
};

错误截图:
错误截图

解决方法
  • react-ga4的API和旧版react-ga存在差异,没有单独的pageview方法。要发送页面浏览事件,需使用ReactGA.send()方法,并指定事件类型为pageview。
  • 修改sendPageview函数如下:
function sendPageview(path) {
  ReactGA.send({ hitType: "pageview", page: path });
}
  • 同时,react-ga4中也没有set方法用于设置页面路径,直接在send方法的参数里传入page即可完成路径设置。
  • 确保安装的是最新版react-ga4,可执行命令npm install react-ga4@latest更新包。

内容的提问来源于stack exchange,提问作者Cn Hu

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.18 14:42:34