如何在Next JS中配置Google Analytics且不降低性能？

一、现有配置的核心问题 #

你当前的配置存在以下几个关键问题，导致Partytown无法正常工作：

• Next.js 13+ App Router环境下，不推荐使用next/head，应直接在Root Layout的<html>/<body>中配置脚本或使用next/script组件
• experimental.nextScriptWorkers是Next.js自带的脚本Worker方案，与Partytown存在兼容性冲突，需移除
• Partytown需要将其静态资源部署到项目的public目录，你当前缺少这一步骤

二、Partytown完整配置流程 #

1. 安装依赖 #

npm install @builder.io/partytown
# 或 yarn add @builder.io/partytown
# 或 pnpm add @builder.io/partytown

2. 复制Partytown静态资源到Public目录 #

在package.json中添加postinstall脚本，确保每次安装依赖后自动复制资源：

{
  "scripts": {
    "postinstall": "partytown copylib public/~partytown"
  }
}

执行一次npm run postinstall完成首次资源复制。

3. 修改next.config.js #

移除experimental.nextScriptWorkers，保留styled-components配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  compiler: {
    styledComponents: true,
  },
};

export default nextConfig;

4. 在Root Layout中正确集成 #

替换app/layout.js中的代码为以下内容（替换GA_TRACKING_ID为你的实际ID）：

import Header from "@/components/universal/Heder/Header";
import "./globals.css";
import StyledComponentsRegistry from "../lib/registry";
import Footer from "@/components/universal/Footer/Footer";
import ScrollToTopButton from "@/components/universal/ScrollButton/ScrollToTopButton";
import { Partytown } from "@builder.io/partytown";

export const metadata = {
  title: "Visit Drežnica | Rent a Room",
  description:
    "Drežnica near Mostart. Experience serene mountains, a picturesque river, and warm hospitality. Perfect for nature lovers seeking a peaceful getaway.",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning={true}>
      <Partytown 
        debug={false} // 上线前关闭debug模式
        forward={["dataLayer.push", "gtag"]} // 转发GA所需的核心方法
      />
      <StyledComponentsRegistry>
        {/* 加载GA脚本，指定由Partytown处理 */}
        <script
          src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"
          type="text/partytown"
          async
        />
        {/* GA初始化脚本 */}
        <script type="text/partytown">
          {`
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'GA_TRACKING_ID');
          `}
        </script>
        <body suppressHydrationWarning={true}>
          <header>
            <Header />
          </header>
          {children}
          <ScrollToTopButton />
          <footer>
            <Footer />
          </footer>
        </body>
      </StyledComponentsRegistry>
    </html>
  );
}

5. 验证配置 #

启动开发服务器，打开浏览器控制台的Partytown标签（开启debug时可见），确认脚本是否在Web Worker中正常运行，同时用Lighthouse重新测试性能，TBT应回归正常水平。

三、无需Partytown的GA性能优化方案 #

1. 使用Next.js Script组件延迟加载 #

用next/script的lazyOnload策略加载GA脚本，完全不阻塞主线程：

import Script from 'next/script';

// 在Root Layout的<body>内添加
<Script
  src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"
  strategy="lazyOnload"
/>
<Script id="ga-init" strategy="lazyOnload">
  {`
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'GA_TRACKING_ID');
  `}
</Script>

2. 禁用自动页面跟踪，手动触发 #

默认GA会自动跟踪页面视图，禁用后可在路由切换时手动触发，减少初始加载压力：

<Script id="ga-init" strategy="lazyOnload">
  {`
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    // 禁用自动页面跟踪
    gtag('config', 'GA_TRACKING_ID', { send_page_view: false });
  `}
</Script>

添加页面视图跟踪组件（客户端组件）：

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

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

  useEffect(() => {
    if (window.gtag) {
      window.gtag('config', 'GA_TRACKING_ID', {
        page_path: `${pathname}${searchParams.toString() ? `?${searchParams.toString()}` : ''}`,
      });
    }
  }, [pathname, searchParams]);

  return null;
}

将该组件添加到Root Layout中即可。

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