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

Question

I have built a site with Nextjs. I tried integrating GA to the site. I tried to implement with next/script tag but GA does not show reports, users, pageviews, etc. on the dash board. But if I use normal script tag then it works.

Why Google Analytics is not working with next/script tag.

GA Code Snippet with next/script [not working]

<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> 

Note : I have also tried setting ga code inside dangerouslySetInnerHTML with next/script but it still does not work.

GA code snippet with regular script tag [working]

<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 });
            `,
   }}
 />

Now my simple question is that why google analytics is not working with next/script?

Answer 1

I faced the same problem. Upgrade to next 12.2.0 solved it.

I also found this question, but it doesn't work even when the script was moved out of Head component. Next 11 and adding Script tags not working. No scripts are rendered

Answer 2

The Next.js Script tag cannot be in the head, it needs to be outside it. See this answer: https://stackoverflow.com/a/68059559/2031033