下面的代码包含如何将谷歌内容导入应用程序。它工作正常并调用 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'?'&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。这里可能缺少什么?