Next.js项目中window.gtag初始加载后路由切换时不触发GA调用问题排查

从你的代码和描述来看，虽然路由切换时window.gtag被调用，但GA没有触发请求，主要有几个关键问题需要修复：

1. 硬编码的page_path导致上报异常 #

你在handleRouteChange里把page_path写死成了固定值https://preprod.yemek.com/tarif/kiraz-receli，这会导致所有路由切换都上报同一个页面路径，GA可能会因为重复或无效的路径信息忽略这个请求。正确的做法是使用当前路由的实际URL：

const handleRouteChange = (url) => {
  console.log(url)
  if (typeof window !== 'undefined') {
    // 使用当前切换后的路由url作为page_path
    window.gtag('config', 'TRACKID', {
      page_path: url,
      page_location: window.location.href // 可选：补充完整页面地址，提升数据准确性
    })
  }
}

2. GTM环境下的SPA路由监听配置缺失 #

你通过GTM加载GA，但GTM默认不会自动监听Next.js的客户端路由切换（SPA路由）。需要在GTM里补充对应的触发规则：

• 在GTM中创建一个自定义事件触发器，事件名称设为routeChangeComplete（和你代码中监听的Next.js路由事件名一致）
• 或者直接配置GTM监听history change事件——这是SPA路由切换时浏览器会触发的原生事件
• 把GA的pageview标签绑定到这个新触发器上，这样路由切换时GTM会自动触发GA上报

3. 适配GTM的事件发送方式（避免直接调用gtag的冲突） #

如果GTM是通过dataLayer来管理GA事件，直接调用window.gtag可能不会生效，此时建议改用dataLayer.push的方式发送事件，更符合GTM的事件管理逻辑：

const handleRouteChange = (url) => {
  if (typeof window !== 'undefined') {
    window.dataLayer.push({
      event: 'pageview',
      page_path: url,
      page_location: window.location.href
    })
  }
}

4. 修正useEffect的依赖项 #

你的useEffect依赖是[router.events]，但router.events是一个稳定的引用，不会随路由变化更新，建议改为依赖router，确保组件挂载时正确绑定事件：

useEffect(() => {
  const handleRouteChange = (url) => {
    // 这里放处理逻辑
    if (typeof window !== 'undefined') {
      window.dataLayer.push({
        event: 'pageview',
        page_path: url,
        page_location: window.location.href
      })
    }
  }
  router.events.on('routeChangeComplete', handleRouteChange)
  return () => {
    router.events.off('routeChangeComplete', handleRouteChange)
  }
}, [router]) // 改为router作为依赖

额外检查点 #

• 确认GTM容器ID（代码中的TRACKID）是否正确，格式应为GTM-XXXXXX
• 在浏览器开发者工具的Network面板过滤google-analytics，查看是否有请求发送，同时检查Console是否有报错信息
• 确保GA的跟踪ID已经正确配置在GTM的GA标签中，没有拼写错误

内容的提问来源于stack exchange，提问作者Mehmet Yener Yılmaz