我完全对 GTM 感到困惑，我将它实现到我的网站以触发一些事件来处理流量，等等...就像 2 天我看到以下错误:
Error from the trackerPageView => TypeError: window.gtag is not a function
at _app.js:1
at _app.js:1
at commons.c57c1be722ad069a7405.js:1
at Array.map (<anonymous>)
at Object.emit (commons.c57c1be722ad069a7405.js:1)
at commons.c57c1be722ad069a7405.js:1
我的配置是一个 webApp(nextjs、Reactjs、typeScript、redux)，希望这会有所帮助。
_document.tsx :
import Document, { Head, Main, NextScript } from "next/document";
import { GA_TRACKING_ID } from "../lib/gtag";
import { Fragment } from "react";
export default class MyDocument extends Document {
setGoogleTags() {
return {
__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','${GA_TRACKING_ID}');
`,
};
}
render() {
return (
<html lang="fr">
<Head>
<Fragment>
<script dangerouslySetInnerHTML={this.setGoogleTags()} />
</Fragment>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link
rel="shortcut icon"
href="***"
crossOrigin="anonymous"
/>
<link
rel="stylesheet"
href="***.css"
crossOrigin="anonymous"
/>
</Head>
<body>
<noscript>
<iframe
src={`https://www.googletagmanager.com/ns.html?id=${GA_TRACKING_ID}`}
height="0"
width="0"
style={{ display: "none", visibility: "hidden" }}
></iframe>
</noscript>
<Main />
<NextScript />
<script
type="text/javascript"
id="hs-script-loader"
async
defer
src="//js.hs-scripts.com/*****.js"
></script>
</body>
</html>
);
}
}
export const GA_TRACKING_ID = 'GTM-XXXX'
export default function trackPageView(url) {
try {
if (window.gtag)
window.gtag("config", GA_TRACKING_ID, {
page_location: url,
});
} catch (error) {
console.log("Error from the trackerPageView => ", error);
}
}
Solution I found temporary!
所以目前我的 gtag 实现让我可以让 GTM 检测到触发和触发器，我只是设置了一个新的触发器
History modification
现在它会在每次历史修改时触发分配有此触发器的事件。我对 gtag 不太满意，但这对我来说已经足够了(目前)，由于我所做的实现，我仍然很恼火。我想找到正确的实现来清理我的。
问题显然来自 SSR，因为窗口变量变得未定义(在 nodeJs 中不存在)出现上面的错误。仍在寻找解决方案来解决它...
https://github.com/vercel/next.js/discussions/14980
谢谢大家，祝你有美好的一天:)
最佳答案
在使用 window 之前，您需要检查窗口是否存在。
例如:
if (typeof window !== 'undefined') {
window.gtag("config", GA_TRACKING_ID, {
page_location: url,
});
}
<Fragment> 中最后，看起来
gtag 默认不是全局可用的。您必须根据此文档自行设置:https://developers.google.com/analytics/devguides/collection/gtagjs
关于reactjs - TypeError : window. gtag 不是函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62791299/