window.gtag не запускает вызов GA после начальной загрузки

#next.js

Вопрос:

Приведенный ниже код содержит, как материалы Google импортируются в приложение. Он отлично работает и вызывает GA, как вы видели на рисунке ниже. но это не работает при маршрутизации на последующие страницы.

Как показано на рисунке ниже, он вызывает API аналитики только для жесткого обновления страницы…

введите описание изображения здесь

_app.js:

 const ymkApp = ({ Component, pageProps }) => {
  const router = useRouter()

  const handleRouteChange = (url) => {
    console.log(url)
    if (typeof window !== 'undefined') {
      window.gtag('config', 'TRACKID', {
        page_path: 'https://preprod.yemek.com/tarif/kiraz-receli',
      })
    }
  }

  useEffect(() => {
    router.events.on('routeChangeComplete', handleRouteChange)
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])

  return <Component {...pageProps} />
}
 

_document.js:

 import getConfig from 'next/config';
import Document, { Head, Html, Main, NextScript } from 'next/document';

const { publicRuntimeConfig } = getConfig()

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="tr">
        <Head>
          {/* Google Tag Manager Start */}

          <link
            rel="dns-prefetch preconnect"
            href="https://www.google-analytics.com"
          />
          <link
            rel="dns-prefetch preconnect"
            href="https://www.googletagmanager.com"
          />

          <script
            async="async"
            src="https://www.googletagservices.com/tag/js/gpt.js"
          />
          <script
            type="text/javascript"
            dangerouslySetInnerHTML={{
              __html: `
                var googletag = googletag || {};
                googletag.cmd = googletag.cmd || [];
              `,
            }}
          />
          <script
            dangerouslySetInnerHTML={{
              __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
                new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
                j=d.createElement(s),dl=l!='dataLayer'?'amp;l=' l:'';j.async=true;j.src=
                'https://www.googletagmanager.com/gtm.js?id=' i dl;f.parentNode.insertBefore(j,f);
                })(window,document,'script','dataLayer', 'TRACKID');`,
            }}
          />
          <noscript
            dangerouslySetInnerHTML={{
              __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=${publicRuntimeConfig.gtm}" height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
            }}
          />
          {/* Google Tag Manager End */}
        </Head>
        <body>
          <Main />
 

Я проверил, он вызывает window.gtag при каждом изменении маршрута, но не вызывает вызов GA. Чего здесь может не хватать?