reactjs - TypeError : window. gtag 不是函数-6ren

reactjs - TypeError : window. gtag 不是函数

转载作者：行者123 更新时间：2023-12-03 23:05:51

35

4

我完全对 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/

35

4

0

文章推荐： objective-c - 艺术家如何创建非线性抽象插值渐变图像

文章推荐： resteasy - Quarkus 多文件上传

文章推荐： c# - HttpClient Polly WaitAndRetry 策略

javascript - native 基础 toast - TypeError : TypeError: TypeError: null is not an object (evaluating 'this.toastInstance._root.getModalState' )
我正在使用 React Native 构建移动应用程序。我面临 Nativ Base Toast 问题。当我第一次加载应用程序然后导航到工单状态时，如果我返回带有 android 后退按钮的主页，则会
TypeError: $(...).perfectScrollbar is not a function(TypeError：$(...).Perfect滚动条不是函数)
我正在尝试创建一个“完美的滚动条”，它是这样的：。Https://github.com/noraesae/perfect-scrollbar-bower。使用尽可能简单的代码：。我犯了以下错误：。当然
javascript - Draftjs: TypeError: TypeError: this.getImmutable(...) 未定义
我正在尝试在简单的 Draftjs 编辑器上应用自定义装饰器: import React from 'react'; import {Editor, EditorState, RichUtils} f
TypeError - read csv functionality(TypeError-读取CSV功能)
读取以钟形字符作为分隔符的CSV文件时，出现类型错误。我不想使用熊猫，我需要使用CSV库来解决这个问题。。示例标题：。数据类型。样本数据：。示例代码。我明白这个错误-。铃声字符参考-https://w
reactjs - TypeError : TypeError: (0, _reactRedux.useSelector) 不是函数
我正在处理 useSelector的 react-redux在我的 React Native 应用程序中，我收到以下错误: TypeError: TypeError: (0, _reactRedux.
javascript - Node 子进程生成 "TypeError: Bad argument TypeError"？
当我用 Node 运行以下代码时: var command = "/home/myScript.sh"; fs.exists(command, function(exists){ if(exi
reactjs - TypeError : wrapper. 存在不是函数 && TypeError : wrapper. find 不是函数
我正在为我的一个组件编写测试用例，该组件具有路由器(使用 withrouter)。我收到错误 wrapper.find is not a function。基本要求是需要检查我的渲染中是否存在标签，还
javascript - jquery TypeError : $(. ..).validate 和 TypeError : $(. ..).modal 不是函数
我一直在研究一个简单的表单提交。首先，我想在提交表单之前创建一个模式警报。于是，我使用了bootstrap的modal函数，反复得到 TypeError: $(...).modal is not a
python - is_authenticated() 引发 TypeError TypeError : 'bool' object is not callable
这个问题在这里已经有了答案: Flask-Login raises TypeError: 'bool' object is not callable when trying to override
TypeError: 'ListNode' object has no attribute '__getitem__'(TypeError：‘ListNode’对象没有属性‘__getitem__’)
这是我在leetcode中遇到的问题。您将看到两个非空链接表，表示两个非负整数。数字以相反的顺序存储，并且它们的每个节点都包含一个数字。将这两个数字相加，然后以链表的形式返回总和。。你可以假设这两个数
Why am I seeing "TypeError: string indices must be integers"?(为什么我看到“TypeError：字符串索引必须是整数”？)
我正在尝试学习Python，并试图将GitHub问题变成一种可读的形式。根据关于如何将JSON转换为CSV的建议，我得出了以下结论：。其中“Issues.json”是包含GitHub问题的JSON文件
javascript - 代理类的 TypeError - TypeError : 'set' on proxy: trap returned truish for property
我在使用 Proxy 类时遇到了这个有趣的错误: TypeError: 'set' on proxy: trap returned truish for property 'users' which
TypeError:unsupported format string passed to function .__format__(TypeError：传递给函数的格式字符串不受支持。__FORMAT__)
在研究Jupyter笔记本电脑时，我遇到了这个问题：。这是代码开始的地方：。下面的代码是在jupyter笔记本的另一个单元上运行的。我怎么才能解决它呢？。尝试更改参数和一系列其他内容，但所有这些都弹出
TypeError:unsupported format string passed to function .__format__(TypeError：传递给函数的格式字符串不受支持。__FORMAT__)
Working on jupyter notebooks, I came across this problem:在研究Jupyter笔记本电脑时，我遇到了这个问题： TypeError:un
javascript - TypeError : object is not a function - Javascript, ExtJS、Jasmine 和 TypeError:将循环结构转换为 JSON
我对此很陌生(对于 Jasmine 测试、ExtJs 和 JS 来说确实很陌生)，我必须修复这个错误/错误。我正在运行一些单元测试，但不断收到以下错误: TypeError: object is no
TypeError: run_simple() got an unexpected keyword argument 'jupyter_mode'(TypeError：Run_Simple()获得意外的关键字参数‘jupyter_mode’)
在下面的文档中，我们可以不使用JupyterDash在笔记本中运行应用程序，而只需运行app.run(jupyter_mode=“外部”)。。Https://dash.plotly.com/dash-
angular - ionic 错误地理定位 ionic 未捕获( promise ): TypeError: Object(…) is not a function TypeError: Object(…) is not a function
导入地理位置时: import { Geolocation } from '@ionic-native/geolocation/ngx'; 获取错误: ionic Geolocation :Ionic
python - TypeError: __getitem__() takes exactly 2 arguments (2 given) TypeError? ( python 3)
我定义了以下函数: def eigval(matrix): a = matrix[0, 0] b = matrix[0, 1] c = matrix[1, 0] d =
Diffusers SDXL "TypeError: argument of type 'NoneType' is not iterable"(Differs SDXL“TypeError：‘NoneType’类型的参数不可迭代”)
刚刚获得了SDXL模型的访问权限，希望为即将发布的版本进行测试...不幸的是，我们当前用于我们服务的代码似乎不能与稳定ai/稳定-扩散-xl-base-0.9一起工作，我不完全确定SDXL有什么不同，
ERROR: TypeError: Cannot read properties of undefined (reading 'username')(错误：TypeError：无法读取未定义的属性(正在读取‘UserName’))
这是我的全部代码。我试图通过/insta/：id在我的page.ejs页面上查找，但它显示错误：。无法读取未定义的属性(正在读取‘UserName’)。。我希望获得uuidv4()将提供的id，但它返

首页

博学

6Ren·AI

商城

reactjs - TypeError : window. gtag 不是函数