next.js - window.gtag 在初始加载后不会触发 GA 调用
问题描述
下面的代码包含如何将谷歌的东西导入到应用程序中。它工作正常并调用 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 />
我已经检查过,它会在每个 roue 更改时调用 window.gtag,但不会触发调用 GA。这里可能缺少什么?
解决方案
推荐阅读
- java - 在数组中查找以特定数字开头的数字
- java - 如何从可运行的可调用对象中获取类名
- azure-iot-edge - Azure IoT Edge - 模块下载的离线行为
- ios - 设置值 Firebase 时重复子节点
- android - 使用 Room DataSource.Factory 的 Kotlin 协程挂起错误
- android - 不同的 .tflite 文件和 .txt 文件用于在 App 中实现 tensorflow
- jquery - jquery - 如何在同一行的另一列中输入数据后将数据插入最近的 td(单击按钮动态创建表行)
- javascript - 如何从 react-date-picker 中删除此返回日期中的所有额外数字?
- java - 是否可以在处理中返回“text()”?
- xml - 如何在 XQuery 中使用 FLOWR 从这家书店返回第三本书?