如何在Next.js中正确使用Google Tag脚本及解决加载异常问题

核心问题原因 #

你将next/script封装的组件放在了next/head组件内部，这是错误用法：next/head仅会处理标准HTML头部元素（如title、meta、原生script标签等），不会触发next/script封装的特殊加载逻辑，导致脚本不会被加载。

解决步骤 #

1. 修正_app.js中组件的放置位置，将GoogleTag组件从Head标签内移出，放在和Head同级的位置即可，修正后代码如下：

import Head from 'next/head';
import GoogleTag from '../Base/GoogleTag';

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        {/* 仅在这里放置title、meta等原生头部标签内容 */}
      </Head>
      <GoogleTag identifier='G-9XLT855ZE0' />
      <div>
        应用代码在此处
      </div>
    </>
  )
}

2. 其他可能的问题排查

• 确认当前使用的Next.js版本≥11，next/script组件是v11版本才新增的能力，低版本不支持
• 检查浏览器是否安装了广告拦截、隐私防护类插件，这类插件普遍会拦截谷歌分析相关请求，可尝试用无痕模式打开页面测试
• 你当前使用的afterInteractive加载策略会在页面可交互后才加载脚本，可等页面完全加载完成后再查看Network请求，也可根据需求调整为lazyOnload策略
• 检查传入的identifier参数是否拼写正确，确保是合法的GA4跟踪ID

3. 验证方式
   修改完成后重启开发服务器，页面完全加载后可在控制台输入window.gtag，如果返回函数定义则说明脚本加载成功。

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