Next.js中next/script集成Google Analytics不生效原因咨询

DevOps 小满

2026-8-29

核心原因

next/script是Next.js封装的优化型脚本组件，和原生<script>标签的加载、执行逻辑存在本质差异，失效代码存在3个关键问题：

同策略脚本无执行顺序保证：两个脚本都设置了afterInteractive策略时，Next.js不会保证外链gtag脚本和内联初始化脚本的执行先后。绝大多数场景下内联初始化代码会先于远程gtag.js执行：此时定义的gtag只是往dataLayer推参数的临时函数，等gtag.js真正加载完成时，初始化指令已经推入队列但错过了gtag的初始化触发节点，整个上报逻辑不会启动。
脚本作用域隔离问题：直接在next/script标签内写模板字符串传代码、甚至部分版本下用dangerouslySetInnerHTML传代码时，Next.js会把内联代码包裹在闭包中执行，定义的dataLayer、gtag函数不会挂载到全局window对象上，gtag.js加载后找不到全局队列，无法读取提前推入的初始化参数。
单页路由上报缺失：afterInteractive策略的脚本会在页面水合完成、可交互后才执行，首次页面浏览的上报时机已经错过；加上Next.js采用客户端路由跳转，默认GA的自动page_view上报只会触发一次，后续路由切换不会自动上报，也会导致数据严重缺失。

原生<script>能正常生效的逻辑很简单：浏览器解析到原生内联script时会同步执行，先完成全局dataLayer和gtag空函数的定义，等异步加载的gtag.js下载完成后，会自动遍历dataLayer中已存储的所有指令依次执行，时序完全匹配GA的初始化要求，因此可以正常上报。

修复方案

强绑定两个脚本的执行顺序：给外链gtag脚本设置唯一id，内联初始化脚本通过after属性指定依赖该外链脚本，保证初始化逻辑一定在gtag.js加载完成后执行。
所有GA相关全局变量显式挂载到window对象，避免闭包作用域导致的全局变量丢失。
关闭GA默认的自动page_view上报，手动监听Next.js路由变化，在每次路由切换时主动上报页面浏览数据，避免漏报、重复上报。

可直接复用的代码示例：
首先在根布局中引入GA基础脚本：

<Script
  id="gtag-base"
  strategy="afterInteractive"
  src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GA_MEASUREMENT_ID}`}
/>
<Script
  id="gtag-init"
  strategy="afterInteractive"
  after="gtag-base"
  dangerouslySetInnerHTML={{
    __html: `
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      window.gtag = gtag;
      gtag('js', new Date());
      gtag('config', '${process.env.GA_MEASUREMENT_ID}', {
        send_page_view: false
      });
    `,
  }}
/>

然后新建客户端组件做路由级别的page_view上报：

'use client'
import { usePathname, useSearchParams } from 'next/navigation'
import { useEffect } from 'react'

export default function GAPageViewTracker() {
  const pathname = usePathname()
  const searchParams = useSearchParams()

  useEffect(() => {
    if (typeof window.gtag !== 'undefined') {
      window.gtag('event', 'page_view', {
        page_path: pathname + searchParams.toString(),
      })
    }
  }, [pathname, searchParams])

  return null
}

最后把该组件引入根布局即可。

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