Next.js 13集成Google Analytics时出现‘G未定义’错误求助

问题重现 #

尝试在Next.js 13中集成Google Analytics，使用以下组件代码：

//GoogleAnalytics.tsx
"use client";
import Script from "next/script";

const GoogleAnalytics = ({ GA_TRACKING_ID }: { GA_TRACKING_ID: string }) => {
  return (
    <>
      <Script
        src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
        strategy="afterInteractive"
      />
      <Script id="google-analytics" strategy="afterInteractive">
        {
        `
        window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());

          gtag('config', ${GA_TRACKING_ID});
        `
        }
      </Script>
    </>
  );
};

export default GoogleAnalytics;

在根布局中引入该组件：

//layout.tsx

import GoogleAnalytics from "@/components/molecules/GoogleAnalytics";
import { ReactNode } from "react";

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <GoogleAnalytics GA_TRACKING_ID={process.env.GA_TRACKING_ID} />
      <body>      
        {children}
      </body>
    </html>
  );
}

脚本已正确填充跟踪ID（如G-XXXXXXX），但页面加载时浏览器控制台出现错误：

VM689:6 Uncaught ReferenceError: G is not defined
    at <anonymous>:6:26
    at loadScript (webpack-internal:///(:3000/app-client)/./node_modules/.pnpm/next@13.2.4_dpxg4zawgzznnxdt7it3f5d76m/node_modules/next/dist/client/script.js:91:19)
    at eval (webpack-internal:///(:3000/app-client)/./node_modules/.pnpm/next@13.2.4_dpxg4zawgzznnxdt7it3f5d76m/node_modules/next/dist/client/script.js:182:17)
    at commitHookEffectListMount (webpack-internal:///(:3000/app-client)/./node_modules/.pnpm/next@13.2.4_dpxg4zawgzznnxdt7it3f5d76m/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:26416:26)

调整组件放置位置（body或head.tsx）后错误仍存在。

错误原因 #

问题出在模板字符串中的gtag('config', ${GA_TRACKING_ID});这一行：

• GA_TRACKING_ID是字符串类型（如G-XXXXXXX），直接插入模板字符串后会变成gtag('config', G-XXXXXXX);
• 这里的G-XXXXXXX没有被引号包裹，浏览器会将其当作变量解析，导致认为G是未定义的变量，从而抛出错误。

修复方案 #

给模板字符串中的${GA_TRACKING_ID}添加单引号，确保跟踪ID以字符串形式传递给gtag函数。修复后的GoogleAnalytics.tsx代码如下：

//GoogleAnalytics.tsx
"use client";
import Script from "next/script";

const GoogleAnalytics = ({ GA_TRACKING_ID }: { GA_TRACKING_ID: string }) => {
  return (
    <>
      <Script
        src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
        strategy="afterInteractive"
      />
      <Script id="google-analytics" strategy="afterInteractive">
        {
        `
        window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());

          gtag('config', '${GA_TRACKING_ID}');
        `
        }
      </Script>
    </>
  );
};

export default GoogleAnalytics;

额外注意事项 #

• 若使用客户端组件访问环境变量，需确保环境变量以NEXT_PUBLIC_为前缀（如NEXT_PUBLIC_GA_TRACKING_ID），否则客户端无法读取该变量。
• 确认.env文件中已正确配置跟踪ID，且重启开发服务器使环境变量生效。

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