个人中心
gpt4 book ai didi

reactjs - TypeError : window. gtag 不是函数

转载 作者：行者123 更新时间：2023-12-03 23:05:51 34 4
gpt4 key购买 nike

我完全对 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>
    );
  }
}
gtg/index.ts: 
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,
  });
}
此外，您不需要将您的 Google 标签管理器脚本包装在 <Fragment> 中
最后，看起来 gtag 默认不是全局可用的。您必须根据此文档自行设置: https://developers.google.com/analytics/devguides/collection/gtagjs

关于reactjs - TypeError : window. gtag 不是函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62791299/

34 4 0
文章推荐： objective-c - 艺术家如何创建非线性抽象插值渐变图像
文章推荐： python-3.x - 如何优化我的 Python 反向图像搜索以限制到特定域？
文章推荐： resteasy - Quarkus 多文件上传
文章推荐： c# - HttpClient Polly WaitAndRetry 策略
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com