NextJS网站添加Google Tag Manager脚本不显示问题求助

问题背景 #

• 参考教程在components/layout.tsx中通过Next.js <Script>组件添加Google Tag Manager代码，但脚本未在前端显示
• components/layout.tsx是项目唯一包含<Head>的文件，app/layout.tsx中的GTM <noscript>标签可正常显示，确认修改已保存
• 本地及Vercel预发布站点运行正常，仅绑定自定义域名后出现GTM脚本加载失败问题
• 项目基于Next.js/Sanity模板，采用App Router（无_app.js），存在app/(website)/layout.tsx定义RootLayout，但未找到手动调用逻辑

排查与解决步骤 #

1. 明确RootLayout的作用逻辑 #

Next.js 13+ App Router中，app/(website)/layout.tsx作为路由组内的嵌套布局，会自动作用于该路由组下的所有页面，无需手动调用。需确认：

• 所有业务页面是否都在app/(website)路由组目录下，若存在外部页面，不会加载该布局内容
• 检查app/layout.tsx是否存在，若存在则为最顶层根布局，(website)的布局会嵌套在其内部

2. 适配App Router的GTM脚本加载方式 #

App Router推荐直接在根布局（app/(website)/layout.tsx或app/layout.tsx）中添加GTM脚本，避免组件层级导致的渲染优先级问题，示例代码：

// app/(website)/layout.tsx
import Script from 'next/script';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        {/* 保留已正常工作的GTM noscript标签 */}
        <noscript>
          <iframe
            src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
            height="0"
            width="0"
            style={{ display: 'none', visibility: 'hidden' }}
          ></iframe>
        </noscript>
        {/* GTM核心脚本，根据需求选择strategy */}
        <Script
          id="gtm-script"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: `
              (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
              new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
              j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
              'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
              })(window,document,'script','dataLayer','GTM-XXXXXXX');
            `,
          }}
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

3. 清除自定义域名的CDN缓存 #

绑定自定义域名后，Vercel的CDN可能缓存旧资源，导致脚本未更新：

• 浏览器强制刷新（Ctrl+Shift+R/Cmd+Shift+R）清除本地缓存
• 登录Vercel控制台，在项目的Deployments或Settings > Domains页面手动清除CDN缓存

4. 调整脚本加载策略 #

Next.js <Script>组件的strategy属性决定加载时机，可临时调整测试：

• beforeInteractive：页面交互前加载，适合关键脚本
• afterInteractive：页面可交互后加载，适合分析类脚本
• lazyOnload：浏览器空闲时加载，若之前使用该策略，可能因页面未进入空闲状态导致脚本未渲染

5. 确认组件渲染链路 #

若坚持在components/layout.tsx中加载脚本，需确保该组件被正确嵌套在RootLayout中，且无条件渲染逻辑阻止加载：

// app/(website)/layout.tsx
import SiteLayout from '@/components/layout';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>...</head>
      <body>
        <SiteLayout>{children}</SiteLayout>
      </body>
    </html>
  );
}

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