uncaught (in promise) undefined using next/script, google analytics.

[HT-Moh]

What version of Next.js are you using?

11.0.1

What version of Node.js are you using?

v16.5.0

What browser are you using?

Chrome, Firefox

What operating system are you using?

ubuntu

How are you deploying your application?

docker using next start using in my vm

Describe the Bug

Adding the following google analytic using the import Script from 'next/script' create an issue

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

I disable next-pwa to make sure its not the service worker , the error persists.

Expected Behavior

It should be simply work and import the js file without any errors.

To Reproduce

Add the the following script to reproduct the issue

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

[wwwdepot]

I think you need to use 2 Script tags instead of one.

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

[imaksp]

I think you should use two tags as mentioned by @wwwdepot & for analytics, tag manager you should use default script loading strategy (afterInteractive) as mentioned in official docs.

[HT-Moh]

@wwwdepot thanks, but that it was the first thing I tried, but it didn't work.

[imaksp]

@wwwdepot thanks, but that it was the first thing I tried, but it didn't work.

@HT-Moh Hi it seems you have some kind of Ad blocker installed its not next js error, try in incognito mode.

[smakosh]

Also make sure you're adding those 2 Script tags to your _app component and not _document

[HT-Moh]

@aksdevac thanks that was issue.
@smakosh I don't have the script on _document neither the _app , according to the doc it can be anywhere besides _document

[ijjk]

Hi, this has been updated in the latest version of Next.js v11.1.2 specifically #27903 please update and give it a try!

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.