如何在react js应用程序中使用react-gtm-module?

2024-01-09

在我的反应应用程序中我使用react-gtm-module。我只有 GTM ID。

我将以下代码放入每个页面路由器组件中

import TagManager from 'react-gtm-module';

componentDidMount(){
        const tagManagerArgs = {
            dataLayer: {
                page: '/pagepath'
            },
            gtmId: 'GTM-XXXXXX',
            
        }
        TagManager.initialize(tagManagerArgs)
       
    }

我只是将上面的代码放在每个路由组件中。通过使用上面的代码,在谷歌分析中,有时路径显示,有时不显示Active Page.

这是我必须放入代码中才能实现谷歌分析跟踪页面的唯一代码还是我必须添加更多其他代码?如果是,那么我到底需要添加什么以及在哪里添加?

当然,我在代码中遗漏了一些东西。但到底是什么?


仅使用每个应用程序中的 id 进行初始化,而不是每个页面

TagManager.initialize({
  gtmId: gtm_id,
});

然后在每个页面中,

TagManager.dataLayer({
  dataLayer: {
    event: 'pageview',
    pagePath: 'page-path-here',
    pageTitle: 'page-title-here',
  },
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在react js应用程序中使用react-gtm-module? 的相关文章

  • 绑定 popstate 事件不起作用

    我尝试在浏览器的控制台中输入以下代码 window onpopstate function alert 1 然后单击后退按钮 没有显示任何警报 难道我做错了什么 或者是否不允许将 popstate 事件绑定到控制台的页面 使用 Chrome
  • querySelector 搜索直接子级[重复]

    这个问题在这里已经有答案了 我有一些类似 jquery 的函数 function elem return gt someselector elem 问题是我怎样才能做同样的事情querySelector 问题是 gt 选择器中querySe
  • 修复 Raphaël 路径节点上 Tipsy 工具提示的位置

    这是一个非常具体且有些复杂的问题 所以我设置了一个最小测试用例 http reveal dk 8080 revealit dk tipsytest 在阅读本文的其余部分之前 您可能应该先了解一下 我的页面显示悬停时突出显示区域的图像Raph
  • 如何使用 github 托管外部 CSS 文件?

    我将 css 上传到 github 然后转到网站上的文件并单击 raw 选项 我尝试将其添加到网页中 但 chrome 给出以下错误 资源解释为样式表 但使用 MIME 类型 text plain 进行传输 https raw github
  • 在给定索引上将字符串分成两部分并返回两部分

    我有一个字符串 需要在给定索引上拆分 然后返回两个部分 并用逗号分隔 例如 string 8211 8 211 98700 98 700 因此 我需要能够在任何给定索引上拆分字符串 然后返回字符串的两半 内置方法似乎执行分割 但只返回分割的
  • NodeJS - 将相对路径转换为绝对路径

    In my 文件系统我的工作目录在这里 C temp a b c d 在 b bb 下有文件 tmp txt C temp a b bb tmp txt 如果我想从工作目录转到该文件 我将使用以下路径 bb tmp txt 如果该文件不存在
  • 如何将React JS状态保存到本地存储中

    我不知道如何将 React js 状态存储到本地存储中 import React Component from react import App css import auth createUserProfileDocument from
  • 等待异步 grunt 任务完成

    我收到了 grunt 设置 其中一个新任务应该执行 grunt task run 已经存在的任务 要执行的任务是异步的 新任务应该等待异步任务完成 执行此操作的首选方法是什么 grunt 已经涵盖了这一点 你应该将你的任务声明为异步任务 并
  • 使用 eval 时不会受到 XSS 威胁

    我正在制作 不是现在 但我仍然对这个感到好奇 一款使用 HTML5 和 JS 的游戏 我想要的是人们可以插入自定义脚本 但要安全 function executeCustomJS code eval code bad 当然这段代码非常糟糕
  • 为什么浏览器允许onmousedown JS改变href?

    我很长时间以来都注意到 当您尝试复制链接位置或在 Facebook 上打开链接时 它会修改链接并将其传递给l php 例如 我可以被发送到 http www facebook com l php u http 3A 2F 2Fwww goo
  • 如何在数据表角度中基于 JSON 动态填充表值?

    我在用着Angular 数据表 https l lin github io angular datatables 我需要能够根据返回的数据动态创建表 换句话说 我不想指定列标题 Example json数据 id 2 city Baltim
  • 如何在MUI GridList中实现图块的水平滚动?

    这是我的 JS 页面 我需要在其中实现GridList组件显示多个图块 并且在列表大小超出屏幕限制后可水平滚动 import React useState from react import Header from common heade
  • 当 Chrome 中嵌套滚动中的数据更改时防止页面滚动

    我在页面中有一个固定大小的元素 带有 溢出 滚动 其内容经常更改 我预计该元素内部发生的更改会影响该元素的滚动 但不会影响页面滚动 但是当这个元素位于页面顶部时 页面本身开始滚动 我怎样才能防止这种情况发生 要重现此行为 我在 chrome
  • 有什么办法可以避免使用 React 的 SSR 中的“文本内容不匹配”警告?

    我已经用 webpack 和 HMR 设置了 SSR 环境 有一个静态呈现的标记 服务器传递给客户端和client js捆绑与ReactDOM hydrate 方法 如果我更改源代码 HMR 可以正常工作 但会在控制台中发出警告 指出客户端
  • chrome 选项卡/窗口中的 window.open 行为

    我有一小段 javascript 旨在打开两个或更多选项卡 这在 FF 和 IE 中工作正常 但 chrome 会在新窗口而不是选项卡中打开第二个窗口 它不依赖于 url 因为我已经尝试过使用两个相同的 url 第一个在选项卡中打开 第二个
  • 如何捕获文本区域上的 Enter 按键而不是 Shift+Enter? [复制]

    这个问题在这里已经有答案了 I m doing it for texarea A function should be called when the user press Enter but nothing should be done
  • Firebase 身份验证和实时应用程序数据库如何保护自身安全?

    从一般开发的角度来看 我很好奇如何保护在线资源的访问 我们使用以下 Firebase 配置参数初始化 Web 应用程序 apikey authdomain projectid databaseurl messagesenderid 服务器如
  • jQuery:向左滑动和向右滑动

    我见过slideUp and slideDown在 jQuery 中 左右滑动的功能 方式怎么样 您可以使用 jQuery UI 中的附加效果来做到这一点 详情请参阅此处 http docs jquery com UI Effects Sl
  • 测试 jQueryUI 是否已加载

    我正在尝试调试网站 并且我认为 jQueryUI 可能未正确加载 如何测试 jQueryUI 是否已加载 if jQuery ui UI loaded OR if typeof jQuery ui undefined UI loaded 应
  • 有序 JSON 对象

    我有一个 servlet 它与数据库通信 然后返回有序 按时间排序 对象的列表 在servlet部分 我有 access DB returns a list of User objects ordered ArrayList users M

随机推荐