next.jstypeerrorgoogle-tag-managerconsole.log

Error in GoogleTagManager with NextJS - Uncaught (in promise) TypeError: Failed to execute 'getValue' on 'CookieDeprecationLabel': Illegal invocation

This is my first time integrating GoogleTagManager into my website Portfolio for Google Analytics. I'm using NextJS for this project. But when I deploy it or run it in local, I get the following error.

js?id=G-WTK6KTMQ7Z:360 Uncaught (in promise) TypeError: Failed to execute 'getValue' on 'CookieDeprecationLabel': Illegal invocation
    at nl (js?id=G-WTK6KTMQ7Z:360:331)
    at js?id=G-WTK6KTMQ7Z:758:6
    at c (js?id=G-WTK6KTMQ7Z:755:130)
    at js?id=G-WTK6KTMQ7Z:757:382
    at js?id=G-WTK6KTMQ7Z:757:387
    at js?id=G-WTK6KTMQ7Z:768:3

This seems to be an issue with GoogleTagManager Script given by Google Analytics. This is my layout.tsx file containing the script.

import Script from "next/script";
/* other imports */

const jetbrainsMono = JetBrains_Mono({/* options */});

export const metadata: Metadata = {/* metadata */};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <head>
      <Script id="google-analytics" src="https://www.googletagmanager.com/gtag/js?id=G-WTK6KTMQ7Z" strategy="beforeInteractive"></Script>
      <Script id="google-analytics" strategy="beforeInteractive">
        {`
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'G-WTK6KTMQ7Z');
      `}</Script>
      </head>
      <body className={jetbrainsMono.variable}>
        <Header/>
        <StairTransition/>
        <PageTrainsition>
          {children}
        </PageTrainsition>
        <Toaster/>
      </body>
    </html>
  );
}

The error seems to originate from here. error origin screenshot

I tried disabling the AdBlockers from chrome extensions. But it didn't help.

Solution

  • See this post: ga4 gtag.js started showing error in Chrome

    Looks like an issue on how GTM interact with chrome privacy sandbox features. I tested with your website, and I can replicate the issue when I enabled the 3P cookie phase out testing option on my chrome, but the issue didn't present when I disable the testing.

    This issue has already been reported to Google so maybe let's just wait for bit to see if the team is going to fix it.