Next.js特定布局加载Google Analytics标签后切换布局未移除问题

我需要仅在PublicLayout中加载Google Analytics（GA）标签，其他布局不加载。已经在PublicLayout.js中添加了以下next/script组件代码：

<Script src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}/>
<Script>
  {`window.dataLayer = window.dataLayer || [];
    function gtag() {
      dataLayer.push(arguments);
    }
    gtag('js', new Date());

    gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}');`}
</Script>

但遇到的问题是：当使用next/link切换到PrivateLayout对应的页面时，这些GA标签不会自动从HTML的body中移除。

项目文件夹结构如下：

node_modules
public
src
-- components
---- Layouts
------ PublicLayout.js
------ PrivateLayout.js
-- pages
---- admin
------ products
---- _app.js
---- _document.js
---- index.js

Next.js的Script组件默认会在客户端持久化加载的脚本，路由切换不会自动移除。要实现仅在PublicLayout页面启用GA，可选择以下几种方案：

方案1：在PublicLayout卸载时手动清理GA资源 #

利用React的卸载生命周期，在离开PublicLayout页面时清除GA的脚本标签、全局函数和数据层：

import { useEffect } from 'react';
import Script from 'next/script';

const PublicLayout = ({ children }) => {
  useEffect(() => {
    // 页面卸载时执行清理
    return () => {
      // 移除gtag的外部脚本
      const gtagScript = document.querySelector(`script[src*="googletagmanager.com/gtag/js"]`);
      if (gtagScript) gtagScript.remove();

      // 清除全局变量
      if (window.gtag) delete window.gtag;
      if (window.dataLayer) delete window.dataLayer;

      // 移除内联的GA初始化脚本
      document.querySelectorAll('script').forEach(script => {
        if (script.textContent.includes('window.dataLayer') && script.textContent.includes('gtag')) {
          script.remove();
        }
      });
    };
  }, []);

  return (
    <>
      <Script src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}/>
      <Script>
        {`window.dataLayer = window.dataLayer || [];
          function gtag() {
            dataLayer.push(arguments);
          }
          gtag('js', new Date());

          gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}');`}
      </Script>
      {children}
    </>
  );
};

export default PublicLayout;

方案2：在_app.js中根据路由动态控制GA加载 #

直接在根_app.js中判断当前页面是否属于PublicLayout的范围，动态决定是否加载GA脚本，这样路由切换时会自动处理加载/卸载：

// src/pages/_app.js
import { useEffect, useState } from 'react';
import Script from 'next/script';
import { useRouter } from 'next/router';

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  const [isPublicPage, setIsPublicPage] = useState(false);

  useEffect(() => {
    // 定义使用PublicLayout的页面路径，比如首页、公开文章页等
    const publicPaths = ['/', '/contact']; // 替换成你的实际公开页面路径
    setIsPublicPage(publicPaths.includes(router.pathname));
  }, [router.pathname]);

  return (
    <>
      {isPublicPage && (
        <>
          <Script src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}/>
          <Script>
            {`window.dataLayer = window.dataLayer || [];
              function gtag() {
                dataLayer.push(arguments);
              }
              gtag('js', new Date());

              gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}');`}
          </Script>
        </>
      )}
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

方案3：临时禁用GA数据收集（无需移除脚本） #

如果不需要完全删除脚本，只是禁止GA在私有页面收集数据，可以在PrivateLayout中添加权限控制：

import { useEffect } from 'react';

const PrivateLayout = ({ children }) => {
  useEffect(() => {
    if (window.gtag) {
      // 禁用GA的分析存储权限
      gtag('consent', 'update', {
        'analytics_storage': 'denied'
      });
    }

    return () => {
      // 离开私有页面时恢复权限（回到公开页面时生效）
      if (window.gtag) {
        gtag('consent', 'update', {
          'analytics_storage': 'granted'
        });
      }
    };
  }, []);

  return <>{children}</>;
};

export default PrivateLayout;

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