Google Analytics 4 不适用于 Nextjs 脚本标签

Question

我用 Nextjs 建立了一个网站。我尝试将 GA 集成到该站点。我尝试使用 next/script 标记来实现，但 GA 没有在仪表板上显示报告、用户、综合浏览量等。但是如果我使用普通的script 标签，那么它就可以工作。

为什么 Google Analytics 不能使用 next/script 标记。

next/script 的 GA 代码片段 [不工作]

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

笔记: 我也尝试在dangerouslySetInnerHTML 和next/script 中设置ga 代码，但它仍然不起作用。

带有常规 script 标签的 GA 代码 sn-p [工作]

<script
  async
  src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GA_MEASUREMENT_ID}`}
 />

 <script
   dangerouslySetInnerHTML={{
   __html: `
   window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
   gtag('config', '${process.env.GA_MEASUREMENT_ID}', { 'send_page_view': true });
            `,
   }}
 />

现在我的简单问题是为什么谷歌分析不能与下一个/脚本一起使用？

Answer 1

Next.js Script 标签不能在头部，它需要在头部之外。看到这个答案：https://stackoverflow.com/a/68059559/2031033

Answer 2

我遇到了同样的问题。升级到下一个 12.2.0 解决了它。

我也发现了这个问题，但是即使将脚本移出 Head 组件，它也不起作用。 Next 11 and adding Script tags not working. No scripts are rendered