GA4在React HashRouter虚拟页面视图中未触发page_view事件排查

数据老陈

2026-8-22

问题

我通过index.html中的script标签在React项目中接入了Google Analytics 4（GA4），已启用增强测量，按道理虚拟页面视图应该被自动追踪。页面打开或刷新时，page_view事件能在控制台正常记录，但使用React Router的HashRouter修改location.hash实现的虚拟页面切换却未触发page_view事件。在debug模式中可以看到historyChange事件被处理，但最终没有发送事件，日志如下：

Processing commands (1)
js?id=G-*********:165 Processing data layer push: {event: "gtm.historyChange-v2", gtm.historyChangeSource: "hashchange", gtm.oldUrlFragment: "/legal", gtm.newUrlFragment: "/", gtm.oldHistoryState: null, gtm.newHistoryState: null, gtm.oldUrl: "http://localhost:3000/", gtm.newUrl: "http://localhost:3000/", gtm.triggers: "8"}

我知道可以手动发送page_view事件，但希望实现开箱即用的自动追踪，项目基于cra-typescript-starter的特定版本。

解决方案

核心原因

GA4增强测量默认只监听HTML5 History API的pushState/replaceState事件，虽然能捕获到hashchange触发的gtm.historyChange-v2事件，但由于日志里新旧URL的主路径完全一致（都是http://localhost:3000/），GA4会判定为同一页面，不会触发page_view。

开箱即用的配置步骤

开启GA4的哈希变化追踪
进入GA4后台，找到你的媒体资源，依次点击「管理」→「数据收集」→「增强测量」，展开「页面和屏幕浏览」选项，勾选「基于哈希变化的页面浏览」并保存。这一设置会让GA4把hash变化视为独立页面，自动触发page_view事件。
验证效果
重新开启GA4 debug模式，切换HashRouter的页面时，查看控制台是否有page_view事件发送，同时确认数据层日志中的gtm.newUrl是否包含完整的hash路径（比如http://localhost:3000/#/legal）。