#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. Чего здесь может не хватать?