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

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

[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

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