Google停用UA后React应用如何接入GA4实现数据跟踪

首先明确：2023年7月1日后旧版Universal Analytics已经停止数据采集，所有新接入的统计需求直接对接GA4即可，不需要再兼容旧版UA逻辑。

前置准备 #

• 提前在GA后台创建GA4类型的媒体资源，获取格式为G-XXXXXXXXXX的衡量ID，注意不要和旧版UA-XXXXXX-X格式的ID混淆
• 确认项目使用的React Router版本，下文方案同时兼容v5、v6版本，对CRA、Vite、Next.js等常见React脚手架/框架均适用

方案一：无第三方依赖轻量接入（适合小型项目，无额外包体积开销） #

这个方案不需要安装任何第三方npm包，直接通过原生逻辑注入即可，对项目体积影响最小。

1. 在项目最外层根组件（通常是src/App.js或src/main.js）注入GA基础脚本，注意要关闭GA默认的页面自动上报，避免单页应用场景下的重复统计：

import { useEffect } from 'react'
import RouterPage from './router' // 你自己的路由配置组件

// 替换成你自己的GA4衡量ID
const GA_ID = 'G-XXXXXXXXXX'

function App() {
  useEffect(() => {
    // 注入gtag脚本
    const gaScript = document.createElement('script')
    gaScript.async = true
    gaScript.src = `https://www.googletagmanager.com/gtag/js?id=${GA_ID}`
    document.body.appendChild(gaScript)

    // 初始化gtag全局方法
    window.dataLayer = window.dataLayer || []
    function gtag(){ window.dataLayer.push(arguments) }
    window.gtag = gtag
    gtag('js', new Date())
    // 关闭默认页面上报，交给路由监听逻辑手动触发
    gtag('config', GA_ID, { send_page_view: false })
  }, [])

  return <RouterPage />
}

export default App

2. 添加路由变化监听，实现单页应用的页面浏览统计
   React是单页应用，路由切换不会触发页面刷新，GA默认无法自动捕获新页面的访问，需要手动监听路由变化上报page_view事件。
   如果使用React Router v6，新增一个路由监听组件放到Router容器内部即可：

import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'

export default function RouteTracker() {
  const location = useLocation()
  useEffect(() => {
    if (!window.gtag) return
    // 上报页面浏览事件
    window.gtag('event', 'page_view', {
      page_path: location.pathname + location.search,
      page_location: window.location.href,
      page_title: document.title
    })
  }, [location])
  return null
}

如果使用React Router v5，把监听逻辑换成基于useHistory的路由变化监听即可，上报参数完全一致。
3. 自定义事件上报
需要统计按钮点击、表单提交、转化行为等自定义事件时，直接在对应业务逻辑里调用全局gtag方法即可：

// 示例：统计登录按钮点击
const handleLogin = () => {
  window.gtag('event', 'click_login', {
    position: 'header_nav',
    user_status: 'visitor'
  })
  // 原有登录业务逻辑
}

方案二：基于封装库接入（适合中大型/TS项目，API更友好） #

如果是TypeScript项目，或者想要更语义化的调用API，可以使用社区维护的轻量封装库react-ga4，和旧版UA时代的react-ga API逻辑基本一致，迁移成本很低。

1. 安装依赖
   npm install react-ga4
2. 在根组件初始化

import { useEffect } from 'react'
import ReactGA from 'react-ga4'
const GA_ID = 'G-XXXXXXXXXX'

function App() {
  useEffect(() => {
    ReactGA.initialize(GA_ID, {
      gaOptions: { send_page_view: false }
    })
  }, [])
  // 其余组件逻辑
}

3. 路由监听上报页面浏览：和轻量方案逻辑一致，监听location变化后调用ReactGA.send({ hitType: 'pageview', page: location.pathname + location.search })即可。
4. 自定义事件上报调用示例：

ReactGA.event({
  category: 'user_behavior',
  action: 'click_login',
  label: 'header_nav'
})

常见踩坑说明 #

• 不要同时保留旧版UA的接入代码，会造成数据重复上报，导致统计结果失真
• 调试阶段可以直接打开GA后台的实时报告面板，触发上报后10秒内就能在实时列表看到数据，不需要等24小时数据加工
• 如果需要符合隐私合规要求（GDPR、个人信息保护规范等），不要在页面加载时直接初始化GA，要等用户明确同意追踪Cookie之后再执行初始化逻辑
• 如果使用Next.js、Remix等带服务端渲染的框架，所有GA相关逻辑必须放到客户端侧执行（比如useEffect、客户端组件专属生命周期），避免服务端运行时找不到window对象报错

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