Внедрение Google Analytics в Next.js

Question 1

Я пытаюсь реализовать Google Analytics в Next.js. Я включил скрипты, и когда я ввожу dataLayer в консоли, я вижу следующее

(2) [Arguments(2), Arguments(3), push: Proxy(Function)]
0
: 
Arguments(2) ['js', Mon Apr 17 2023 08:05:07 GMT+0200 (Central European Summer Time), callee: ƒ, Symbol(Symbol.iterator): ƒ]
1
: 
Arguments(3) ['config', 'G-10KHN0N9HD', {…}, callee: ƒ, Symbol(Symbol.iterator): ƒ]
push
: 
Proxy(Function) {length: 1, name: 'push'}
length
: 
2
[[Prototype]]
: 
Array(0)

Таким образом, событий не зарегистрировано. Когда я перехожу в раздел “реальное время” на панели инструментов, данных не поступает. В чем может быть проблема?
Это мой файл _app

import "@/styles/globals.css";
import { appWithTranslation } from "next-i18next";
import { Raleway } from "next/font/google";
import Head from "next/head";
import Script from "next/script";
import dynamic from "next/dynamic";
import { usePathname, useSearchParams } from "next/navigation";
import { useEffect } from "react";
import { pageview } from "@/lib/gtagHelper";
import CookieConsent from "react-cookie-consent";
import { useRouter } from "next/router";
const DynamicFooter = dynamic(() => import("@/components/Links"));

const raleway = Raleway({
  subsets: ["latin"],
  variable: "--font-ral",
});
const ID = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS;
function App({ Component, pageProps }) {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const router = useRouter();
  useEffect(() => {
    console.log(window.gtag);
    const handleRouteChange = (url) => {
      window.gtag("config", "G-10KHN0N9HD", { page_path: url });
    };
    router.events.on("routeChangeComplete", handleRouteChange);
    return () => {
      router.events.off("routeChangeComplete", handleRouteChange);
    };
  }, [router.events]);
  function handleAccept() {
    window.gtag("consent", "update", {
      ad_storage: "granted",
      analytics_storage: "granted",
    });
  }
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.png" />
      </Head>
      <main className={`${raleway.variable} font-ral min-h-screen w-full`}>
        <Component {...pageProps} />
        <DynamicFooter></DynamicFooter>
        <CookieConsent
          style={{
            top: "90%",
            width: "max-content",
            height: "max-content",
            left: "32%",
            "border-radius": 20,
            background: "#92a4ba",
          }}
          buttonText="Принять"
          enableDeclineButton
          onAccept={() => {
            handleAccept();
          }}
          declineButtonText="Отказаться"
        >
          Мы используем файлы cookie, чтобы улучшить ваш опыт работы на нашем сайте.
        </CookieConsent>
        <Script id="tawk" strategy="lazyOnload">
          {`var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
         (function(){
           var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
           s1.async=true;
           s1.src="https://embed.tawk.to/64367ade4247f20fefeb2cc2/1gtqcvtgf";
           s1.charset="UTF-8";
           s1.setAttribute('crossorigin','*');
           s0.parentNode.insertBefore(s1,s0);
           })()`}
        </Script>
        <Script
          strategy="afterInteractive"
          src={`https://www.googletagmanager.com/gtag/js?id=G-10KHN0N9HD`}
        />
        <Script
          id="gtag-init"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'G-10KHN0N9HD', {
              page_path: window.location.pathname,
            });
          `,
          }}
        />
      </main>
    <>
  );
}

export default appWithTranslation(App);

Question 2

Похоже, у вас проблемы, подобные этому недавнему посту: https://stackoverflow.com/questions/76092606/google-analytics-with-next-js

gtag должен работать на фронте. Поэтому отладка также должна включать фронт. Обычно это делается с помощью выполнения вашей конфигурационной функции в консоли фронта и проверки, есть ли соответствующий вызов collect? в консоли через несколько секунд (поскольку есть задержка)

Вот так:

Я только что отправил просмотр страницы из SO в вашу аналитику, потому что вы оставили идентификатор измерения в вашем фрагменте кода. Вы сможете увидеть этот вызов, как только он будет обработан через несколько дней.

Если вы видите сетевые вызовы, но все еще не видите вызовы в вашем GA, то проблема, скорее всего, связана с вашим идентификатором измерения. Убедитесь, что он правильный.

Внедрение Google Analytics в Next.js

Вопрос или проблема

Ответ или решение