reactjs next.sj中的GTM版本12.3

lymnna71 于 2023-08-04 发布在 React

关注(0)|答案(1)|浏览(104)

I已经在Next.js（12.3.0）in _app.tsx文件中使用Next js Script标签和in _document.tsx主体标签实现了GTM。

_app.tsx



         ```
    import Script from "next/script";
       <Script
    id="gtag-base"
    strategy="afterInteractive"
    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', '${process.env.NEXT_PUBLIC_GTM_KEY}');
      `,
    }}
  />
            ```



          _docement.tsx 



       ```
        <body>
       <noscript>
      <iframe
               src={`https://www.googletagmanager.com/ns.html?               id=${process.env.NEXT_PUBLIC_GTM_KEY}`}
        height="0"
        width="0"
        style={{ display: "none", visibility: "hidden" }}
      />
    </noscript>
    <Main />
    <NextScript />
  </body>

        ```

字符串
现在，这些脚本应该被预加载，并在网站的预加载一些GTM事件被调用，并生成报告。一切工作正常，根据我的要求，但由于这个网站的性能下降，并减少未使用的JS是“1.48s”
有没有什么方法可以将未使用的JS减少到零？只有GTM代码导致此问题。

reactjs

来源：https://stackoverflow.com/questions/76773658/gtm-in-next-sj-version-12-3