NextJS集成Google Tag Manager时遇CookieDeprecationLabel调用错误

问题详情 #

在基于Next.js的个人网站中集成Google Analytics（通过gtag.js）时，本地开发和部署后均触发以下错误：

js?id=G-WTK6KTMQ7Z:360 Uncaught (in promise) TypeError: Failed to execute 'getValue' on 'CookieDeprecationLabel': Illegal invocation
    at nl (js?id=G-WTK6KTMQ7Z:360:331)
    at js?id=G-WTK6KTMQ7Z:758:6
    at c (js?id=G-WTK6KTMQ7Z:755:130)
    at js?id=G-WTK6KTMQ7Z:757:382
    at js?id=G-WTK6KTMQ7Z:757:387
    at js?id=G-WTK6KTMQ7Z:768:3

当前layout.tsx中的集成代码：

import Script from "next/script";
/* other imports */

const jetbrainsMono = JetBrains_Mono({/* options */});

export const metadata: Metadata = {/* metadata */};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <head>
      <Script id="google-analytics" src="https://www.googletagmanager.com/gtag/js?id=G-WTK6KTMQ7Z" strategy="beforeInteractive"></Script>
      <Script id="google-analytics" strategy="beforeInteractive">
        {
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'G-WTK6KTMQ7Z');
      }</Script>
      </head>
      <body className={jetbrainsMono.variable}>
        <Header/>
        <StairTransition/>
        <PageTrainsition>
          {children}
        </PageTrainsition>
        <Toaster/>
      </body>
    </html>
  );
}

已禁用Chrome广告拦截插件，问题未解决。

解决方案 #

1. 修复Script组件ID冲突 #

两个<Script>标签使用了相同的id="google-analytics"，这会干扰Next.js的脚本加载逻辑。给每个脚本设置唯一ID：

<Script id="gtag-src" src="https://www.googletagmanager.com/gtag/js?id=G-WTK6KTMQ7Z" strategy="beforeInteractive"></Script>
<Script id="gtag-init" strategy="beforeInteractive">
  {`
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-WTK6KTMQ7Z');
  `}
</Script>

2. 调整脚本执行时机 #

beforeInteractive会在HTML解析前加载脚本，此时浏览器的Cookie相关API可能未完全就绪，导致非法调用。改用afterInteractive策略：

<Script id="gtag-src" src="https://www.googletagmanager.com/gtag/js?id=G-WTK6KTMQ7Z" strategy="afterInteractive"></Script>
<Script id="gtag-init" strategy="afterInteractive">
  {`
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-WTK6KTMQ7Z');
  `}
</Script>

3. 确保脚本内容用模板字符串包裹 #

原代码中的初始化脚本未用反引号包裹，会导致Next.js解析错误。必须将JS代码放在模板字符串中，确保内容被正确识别为可执行脚本。

4. 升级Next.js到最新稳定版 #

旧版本Next.js在处理早期加载的脚本时，可能存在浏览器API兼容性问题。执行以下命令升级：

npm install next@latest

5. 排查浏览器隐私设置 #

即使禁用广告拦截，浏览器的第三方Cookie阻止策略也可能触发该错误。在Chrome无痕模式下测试，确认是否是隐私设置导致。

原因说明 #

CookieDeprecationLabel是Google Analytics用于Cookie合规处理的内部对象，非法调用通常由脚本执行时机过早、加载逻辑冲突，或浏览器隐私限制导致。上述步骤从核心冲突点入手，可有效解决问题。

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