如何使用NextJS Script组件加载GTM（谷歌标签管理器）？

当然可以，Next.js的Script组件专门用于优化第三方脚本的加载逻辑，完全支持加载Google Tag Manager（GTM），还能通过不同的加载策略控制脚本时机，平衡功能需求和页面性能。

具体实现方式 #

1. 选择适配的加载策略
   根据GTM的业务作用和性能要求选对应的策略：

   • beforeInteractive：适合需要追踪首屏事件、必须在页面交互前加载的GTM，脚本会在Next.js服务端注入或客户端 hydration 前加载。
   • lazyOnload：适合非核心的GTM脚本，会在浏览器空闲时段加载，不抢占首屏资源。

2. 在_app.js/_app.tsx中集成Script组件
   将GTM的初始化代码用Script组件包裹，替换代码中的GTM-XXXXXXX为你的实际容器ID：

   示例（使用beforeInteractive策略）：

   import Script from 'next/script'
   
   export default function App({ Component, pageProps }) {
     return (
       <>
         {/* Google Tag Manager 核心脚本 */}
         <Script
           id="gtm-main"
           strategy="beforeInteractive"
           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');
             `,
           }}
         />
         {/* 禁用JS场景的备用方案 */}
         <noscript>
           <iframe
             src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
             height="0"
             width="0"
             style={{ display: 'none', visibility: 'hidden' }}
           />
         </noscript>
         <Component {...pageProps} />
       </>
     )
   }
   

   若使用lazyOnload策略，仅需将strategy的值改为lazyOnload即可。

注意事项 #

• 务必替换代码中的GTM-XXXXXXX为你实际的GTM容器ID。
• noscript标签为可选，但建议添加以覆盖禁用JavaScript的访问场景。
• 不要同时混用传统手动注入和Script组件加载GTM，避免重复加载引发异常。

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