首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在google tag manager调试器中跟踪redux事件?

在Google Tag Manager调试器中跟踪Redux事件,可以按照以下步骤进行操作:

  1. 打开Google Tag Manager,并进入您的工作空间。
  2. 在左侧导航栏中选择“变量”。
  3. 点击“新建”以创建一个新的变量。
  4. 在变量配置页面,选择“自定义JavaScript”变量类型。
  5. 在“JavaScript代码”框中,输入以下代码来捕获Redux事件:
代码语言:javascript
复制
function() {
  // 检查Redux是否已定义
  if (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__) {
    // 获取Redux DevTools扩展
    const devTools = window.__REDUX_DEVTOOLS_EXTENSION__.connect();

    // 监听Redux事件
    devTools.subscribe(function(message) {
      // 检查事件类型是否为'action',可以根据需要修改
      if (message.type === 'ACTION') {
        // 将事件发送到Google Tag Manager的数据层
        dataLayer.push({
          event: 'reduxEvent',
          reduxAction: message.payload
        });
      }
    });
  }
}
  1. 点击“保存”以保存变量配置。
  2. 返回到工作空间概览页面,并点击“触发器”。
  3. 点击“新建”以创建一个新的触发器。
  4. 在触发器配置页面,选择适当的触发器类型,以触发Redux事件跟踪。
  5. 点击“保存”以保存触发器配置。
  6. 返回到工作空间概览页面,并点击“标签”。
  7. 点击“新建”以创建一个新的标签。
  8. 在标签配置页面,选择适当的标签类型,并配置您的标签,以根据需要跟踪Redux事件。
  9. 在“触发器”部分,选择之前创建的触发器。
  10. 点击“保存”以保存标签配置。
  11. 点击“提交”以应用您的更改。

通过以上步骤,您就可以在Google Tag Manager调试器中跟踪Redux事件。当Redux事件发生时,它们将被捕获并发送到Google Tag Manager的数据层,您可以在标签配置中进一步处理这些事件。请注意,这只是一种示例方法,您可以根据自己的需求进行修改和扩展。

相关搜索:分析中的Google Tag Manager事件作为目标当Google Analytics由Google Tag Manager管理时,如何跟踪自定义事件?使用Google Tag Manager跟踪父DIV和子DIV上的点击事件通过Google Tag Manager在网站上作为Google Analytics事件的语言选择跟踪Google Tag Manager中的自动事件跟踪单击事件/Listerner未在Magento 2网站上触发Google Tag Manager单击事件跟踪工作,但不在任何地方显示Google Tag Manager事件可以在PDF文档中触发吗?如何在ios中获取Google Tag Manager的回调?为什么google tag manager事件没有反映在GA 4报告中?在Google Tag Manager中遇到按钮事件(点击触发器)问题Google Tag Manager -在同一会话中第二次触发事件后重新启动跟踪如何在Google Tag Manager中自定义Google Analytics的增强链接属性如何在Google Tag Manager中的不同HTML位置添加标签?如何将页面视图事件发送到Angular中的Google Tag Manager在Google Tag Manager的事务性事件中推送额外的自定义变量如何在Google Tag Manager中使用MutationObserver来检测DOM中的新元素?Google Analytics事件值在Google Tag Manager预览中显示,但在发布后不会在生产中发送如何在Google Tag Manager中设置javascript以捕获订单中多个产品的订单详细信息如何在Google Tag Manager中为JSON LD脚本触发基于div id的触发器?Google Tag Manager中的页面视图和事件类型有什么不同? Google Analytics中的“一些页面视图”存储在哪里?
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Google代码管理工具101 部分5-表单

本系列以Google Tag Manager(GTM)为例,介绍如何实现集约化的Tag Management,从而实现更优化的监测代码配置。 这是这个系列的第五篇文章。...建议你从第1部分开始看这个系列文章,按照文章内容,创建属于你的Google Tag Manager容器。...本文提供了一种更为简单的方法来跟踪提交后并不会跳转到新页面的表单提交动作。之前,在GoogleAnalytics很容易对表单提交动作进行追踪。...现在,大多数表单都在成功提交后并不会发生页面的跳转,会继续留在当前页面,这就会导致GA没有记录任何网页浏览量 - 并且无法跟踪表单是否已经被正常提交。...追踪代码——虚拟页面 我们使用网页路径字段名设置为“page”,我们在“评论”字词添加了一个独立的页面 - 此网页会显示在“所有网页”报告,例如/blog/2015/july/20/google-tag-manager

2.4K50

调研技巧(上):以『时间旅行调试』为例

其次是 Google 索引,就是通过 Google 来找到热门的、大部分情况下可信的介绍网站。...而交互(Interactive)式调试器呢,则包括修改代码并根据更新的信息前进的功能。反向(Reverse)调试工具,使用户可以在时间上向后退,以逐步达到程序的特定点。...记录快照之间发生的所有不确定的环境交互,例如控制台 I/O 或计时器事件。...iDNA 由两个主要组件组成:iDNA Trace Writer 在跟踪记录期间(trace recording)使用,iDNA Trace Reader ,在从记录的跟踪重新模拟期间使用。...代码与场景示例 『Framework for Instruction-level Tracing and Analysis of Program Executions』的示例 Original (guest

82030
  • 谷歌跟踪代码管理器(GTM) 入门指南 第3部分 - 创建链接追踪代码

    本系列以Google Tag Manager(GTM)为例,介绍如何实现集约化的Tag Management,从而实现更优化的监测代码配置。 这是这个系列的第三篇文章。...在Part1我们介绍了如何替换标准的Google Analytics跟踪代码,并在Part2,我们创建了第一个关于跟踪文档(PDF文件,DOCX等)点击的标签,Part4的内容涵盖社交媒体标签,Part5...建议你从第1部分开始看这个系列文章,按照文章内容,创建属于你的Google Tag Manager容器。 首先,需要高清楚“为什么要为mailtos和外部链接创建标签?”...那么,如果你在Google Tag Manager建立了一个外部链接,如果他们在你网站上点击了链接之后,你就可以知道他们去向何处。...3.你实际销售过程的一个重要部分,是促使用户到第三方系统完成销售(他们不会再回来)。创建外部链接作为虚拟页面视图,然后将其设置为目标 - 将销售过程的其余部分添加为漏斗的步骤。

    2.1K50

    GOOGLE 跟踪代码管理器(GTM)101 PART 1 – 基础篇

    本系列以Google Tag Manager(GTM)为例,介绍如何实现集约化的Tag Management,从而实现更优化的监测代码配置。 这是这个系列的第一篇文章。...Google跟踪代码管理器(GTM)是方便非开发人员进行复杂分析的一项重要工具,其功能在Google Analytics(GA)是找不到的。...关键是,你不再需要开发通过修改网站来配置事件跟踪,因为之前实现事件追踪通常需要花时间修改代码、测试以及发布新代码。...2.将Google Analytics跟踪代码添加为变量 你创建的每个代码(tag在GTM中文版本翻译成“代码”)都需要发送到你的Google Analytics跟踪代码。...要测试是否安装了GTM代码,请使用Chrome Tag Assistant检查网站的主页。你会看到,GTM容器ID和GA跟踪代码会展示出来。出现任何警告或错误,请咨询开发人员。 ?

    4.2K50

    安装Google Analytics 4 后的十大必要设置

    增强型衡量功能 增强型衡量里有一些事件,是需要勾选就可以开启这个事件跟踪: 页面浏览量:页面流量,这个是跟踪的基础,必选 滚动次数:下拉,用事件监测页面的浏览深度的,可选 出站点击次数:出站链接点击,...,: 根据需要去做勾选。...启用Google Signal 如果你没有开启Google Signal,那么受众特征和兴趣报告会是没有数据的,详细请看Google Analytics 4 的受众特征和兴趣没数据?...Google Signal 数据过滤 其实这个就是过滤器了,是将自己内部流量过滤,目前只能过滤开发流量和通过IP维度的数据,详细的可以看GA4过滤内部流量(过滤器) 隐去数据 隐去数据是将...url里的PII信息抹除,邮箱,名字,设置的位置在数据流详情里: 用户意见征求设置 各国都要用户隐私保护要求,基本都是必要设置,延伸阅读:通过Google Tag Manager的Consent

    19910

    28 个提升开发幸福度的 VsCode 插件

    它还适用于JSX和许多其他语言,XML,PHP,Vue,JavaScript,TypeScript,TSX。...在这里获取这两个扩展 – 自动闭合标记(Auto Close Tag) 和 自动重命名标记(Auto Rename Tag)。...GitLens 正如其作者所说,GitLens 增强了 Visual Studio Code 内置的 Git 功能,它包含了许多强大的功能,例如通过跟踪代码显示的代码作者,提交搜索,历史记录和GitLens...Git项目管理器(Git Project Manager,GPM) Git项目管理器(Git Project Manager,GPM)允许你直接从 VSCode 窗口打开一个针对Git存储库的新窗口。...在你输入代码时,它将立即运行你的代码,并在代码编辑器显示各种执行结果。 image.png Quokka 的一个很棒的扩展插件,当你准备技术面试时,你可以输出每个步骤,而不必在调试器设置断点。

    8.8K30

    Top JavaScript Frameworks & Topics to Learn in 2017

    工具 Chrome Dev Tools: DOM 检测和 JS 调试器:在我看来它是最好的调试器,虽然Firefox也有一些非常酷的你想要体验的工具。...事件处理阶段 - 在渲染 DOM 之后,React 侦听和事件,将事件委托给其 DOM 树根(为了更好的性能)的单个事件侦听器。 你可以监听这些事件并更新响应的数据。...Redux Redux 为您的应用程序提供事务性,确定性状态管理。在 Redux ,我们遍历操作对象流以减少到当前应用程序状态。...首先,Google趋势。 如果您想重现此Google趋势图,请记住按主题而不是关键字进行选择,因为其中几个字词会带来大量的假阴性。...正如你可以清楚地看到: Angular 和 React: 遥遥领先 (除了jQuery,它用于所有网站 - 包括非应用程序的巨大份额 - 因为它被几乎所有的遗留系统使用,包括流行的 CMS 系统, WordPress

    2.3K00

    【译】如何在生产环境跟踪 GO 函数的参数

    原文地址:https://blog.px.dev/ebpf-function-tracing/ 前言 这是一系列文章的第一篇,这个系列的文字是分析记录我们如何在生产环境中使用 eBPF 调试应用程序,...这篇文章描述了如何使用 gobpf 和 uprobes 为 Go 应用程序构建函数参数跟踪器。该技术也可扩展到其他编译语言, C++、Rust 等。...这些保证使 eBPF 能够用于性能关键的工作负载,包过滤、网络监视等。 从功能上讲,eBPF 允许你在某些事件触发下运行受限制的C代码(比如:定时器、网络事件或函数调用)。...此信息是可以用的,即使在优化的二进制文件也是可以读取使用,除非已经剥离了调试数据(使用 strip 命令)。...使用 uprobe 跟踪 BPF 有它自己的优点和缺点。当我们要对二进制状态进行可观察时,BPF 是不错的选择,即使是在附加调试器会有问题或有害的环境运行(例如生产二进制)。

    85421

    总结了 9 个绝佳的 Python Debug 工具

    此外,它支持slack跟踪功能,使客户更容易发现代码的bug并刺激开发环境。 主要特点 堆栈追踪 事件日志阅读器 检测bug 识别再现bug的领域 因其优秀功能,公司可以更快地分解报告的问题。...网站链接:https://github.com/google/pyringe 4.PDB PDB[4]是Python标准库的一部分,支持面向行的命令解释器和基本调试器功能模块。...优点 PyScripter是一个开源的调试器,易于配置。 支持不同的格式,HTML、XML和CSS的语法文件。 免费且能快速检测Python开发项目中的 bug。...该工具提供的高级套餐有各种选项,涵盖10万个事件的小型套餐,涵盖多达50万个事件的中型套餐,以及支持约300万个事件的大型套餐。...缺点 在Icecream调试器工具还没有发现缺点。 定价:它是一个免费的工具。

    1.8K50

    GOOGLE 跟踪代码管理器101 PART 6 – 真实的跳出率

    本系列以Google Tag Manager(GTM)为例,介绍如何实现集约化的Tag Management,从而实现更优化的监测代码配置。 这是这个系列的最后一篇。...不过,这篇是Google Tag Manager 101系列文章的最后一篇(当然,我会保留在之后将这个系列继续扩展的权利~),本文会介绍如何使用GTM的计时器,同时如何使用该功能来计算页面真正的跳出率...今天为大家介绍另一个Google Tag Manager的简单应用。它可以用来监测网站内容是否足够有吸引力以至于让访客留在当前页面阅读。 下面是一个虚构的场景: 1....通过在Google Tag Manager设置相应的触发器可以监测用户浏览当前页面向下滚动的情况,但是用户通常只对页面内容的某一部分感兴趣,并不一定会浏览到页面的底部。...使用Google Tag Manager的预览功能来对设置的监测代码进行检测,一分钟后你就可以看到这条代码发送的事件。 目标 你可以按照如下步骤在Google Analytics创建事件: ?

    1.4K40

    谷歌跟踪代码管理器(GTM) 入门指南 第4部分——社交媒体

    主编前言: 很多朋友都听说过Tag Management(监测代码管理),但其强大的功能和实现方式,了解的朋友不多。...本系列以Google Tag Manager(GTM)为例,介绍如何实现集约化的Tag Management,从而实现更优化的监测代码配置。 这是这个系列的第四篇文章。...在“社交”部分还有一个名为“插件”的报告,这张报告的内容可以通过GTM来部署实施。社交插件(我也不清楚为什么这个报告会被叫做“插件”,我想有天这张报告会改个名字。)记录了在您网站发生的社交动作。...从你的网站点击跳转至社交网站 如果您已经将外部链接发送到Google Analytics(请参阅第3部分),那么你的社交链接点击次数就将被记录为“事件”。...那么现在你就可以去看看我们第五部分GTM的简介了,是关于表单提交跟踪相关的内容。

    2.5K60

    用GTM就能3分钟内把网站变成灰色,这事还要什么网站开发

    每逢重大灾难事件,国内很多网站将设计变成灰色,以示哀悼之情。整个网站变灰色是怎么实现的?如果网站已经安装了GTM代码管理器,你自己3分钟内就能把网站变成灰色。...利用GTM代码管理器把网站变成灰色GTM代码管理器(Google Tag Manager)是一个 Google 官方工具,安装到网站后,可以用来添加和管理第三方代码段。...所以只安装GTM没有任何作用,需要在GTM配置第三方代码后才能发挥作用。在 Google 官方的GTM代码管理器帮助中心有更多介绍,例如:设置和安装跟踪代码管理器。...,这段 style 将添加 CSS 样式点击右上角 Submit 发布修改后的 GTM,刷新网站就可以看到效果了复制以下代码到新建的Tag:html {filter...也有一些网站提供更完善的第三方代码管理功能,例如可以选择把代码安装在 、 或 。如果你遇到,请选择安装在 。为什么我的网站没有变成灰色?

    49750

    超硬核 Web 前端学霸笔记,学完就去找工作!

    Chrome 调试器 - 此扩展程序可让您从 VS Code 内部调试在 Chrome 浏览器运行的 JavaScript 代码。...Microsoft Edge 调试器 - 在 Microsoft Edge 浏览器调试 JavaScript 代码 Firefox 调试器 - 在 Firefox 调试 Web 应用程序或浏览器扩展...FontPair - 字体对可帮助设计师将 Google 字体配对在一起。漂亮的 Google 字体组合和配对。 Fontjoy - Fontjoy 帮助设计师选择最佳的字体组合。...DOM 操作参考 JavaScript 的工作方式 JavaScript 事件参考 最充分的函数式编程指南 - 使用 JavaScript 进行函数式编程的出色入门。...项目 建立天气应用 React + Redux 的 SoundCloud 客户端 - 关于 React 生态系统的入门知识:1,2 和 3。

    1.4K20

    如何使用谷歌浏览器 Chrome 更好地调试

    Google Chrome 为开发人员提供了使用浏览器的内置开发人员工具(又名 DevTools)调试大多数 Web 应用程序的能力,而无需第三方调试工具。...Google Chrome 的开发人员工具中有多种功能和工具可供开发人员直接在浏览器编辑代码、测试和添加断点以检测问题,并更有效地调试代码。...Memory:通过跟踪内存使用情况来修复与内存相关的问题。...返回的值是一个对象,其中包含每个注册的事件类型(点击、按键等)的数组。每个成员数组都包含该事件类型的所有事件,并且可以扩展以探索它们各自的属性,例如它们触发的关联函数。...只需在控制台中调用它并将函数的名称传递给它,它就会自动将调试器注入到函数,让你可以单步调试代码。

    3.6K30

    如何让GA符合GDPR合规要求?5个步骤快速入门

    即使IP地址(默认情况下)从未在报告公开过,Google也使用它来提供地址位置数据。 为安全起见,我们建议您启用Google Analytics的IP匿名功能。...如果您使用Google Tag Manager,通过点击更多设置调整您的标签或Google Analytics设置变量->字段设置,然后添加一个名为' anonymizeIp '的新字段并且设置为' true...如果您不使用Google Tag Manager(GTM),您的标记管理系统可能会将此设置作为选项公开,或者您可能需要直接编辑代码。...但我们已阅读了其他资料,表明如果您未在Google Analytics收集用户ID或任何其他匿名数据,则无需提供同意。 作为GDPR的一部分,有一些要求证明已经给予了同意(审计跟踪)。...作为肯定同意的明确行为的一部分,我们建议您在Google Analytics中将此作为事件跟踪/日志记录。

    1.8K20

    利用“Google Tag Manager V2”实现滚动追踪

    滚动追踪的概念 如果你想收集更多有关访客行为的信息,可以使用“谷歌标签管家第二版”(Google Tag Manager V2)设置的“滚动追踪”功能,滚动追踪功能是衡量受众如何浏览你所发布的内容以及阅读量的功能...你需要做的第二步是通过Google Analytics在网站网页安装Google Tag Manager container(谷歌标签管理容器)。...滚动追踪实施:设置变量 在Google Tag Manager,需要遵循一项规则:每个“标签”都需要对应“触发器”。每个触发器都需要“变量”来触发。 要设置滚动追踪的变量,你需要创建三个数据变量层。...滚动追踪测试 通过Google Tag Manager进行调试和检查更加简单便捷,请右键单击预览并调试。 ? 这是在发布之前验证你的滚动追踪配置。 在新标签页打开你的网站。...完成调试后,请不要忘记创建一个版本,然后在Google Tag Manager上启动“滚动追踪”功能。 总结 Google Tag Manager版本2与GTM 版本1相比更加简单便捷。

    1.8K70

    如何调试Android Framework?

    何在正确的地方下断点 「正确的地方」包含两个含义:首先,调试是以进程为单位进行的,如果你需要调试运行在进程A 的代码,却把debugger attach到了B进程,那么这个断点压根儿就是牛头不对马嘴...如何在合适的进程下断点?...学习指南 如何在对应的代码处下断点?...OK,到这里;应该学会如何在正确的位置打断点了:正确的进程,正确的位置。接下来,要完成调试,还需要一些技巧。 如何跟踪代码?...如果你在正确位置下了断点,但是跟踪的时候,单步调试,发现运行的代码和Android Studio里面的代码对不上号,那么就很蛋疼;要使得调试器的行号能够对应,必须保证设备上的代码和调试器的代码是同一份;

    2.7K22

    「首席架构师推荐」React生态系统大集合

    compose-state - 在React编写多个setState或getDerivedStateFromProps更新程序 react-with-analytics - 轻松实现Google Analytics...react-mixin-manager - React mixin注册管理器 gsap-react-plugin - 用于补间React.js组件状态的GSAP插件 @plaxdan的react-topcoat...Datalog查询引擎 immstruct - 不可变数据结构,具有基于组件的库(React)从上到下属性的历史记录 seamless-immutable - JavaScript的不可变数据结构,...Flux React:Flux Architecture 了解Flux 在Flux哟 React.js架构 - Flux VS Reflux 避免单页应用程序事件链 ReactJS和Flux 解构...构建的简单电子商务购物车应用程序 hackernews-react-graphql - 使用React和GraphQL用通用JavaScript重写的黑客新闻克隆 真正的应用 Firefox调试器 远程复古

    12.4K30

    使用 eBPF 在生产环境调试 Go 应用

    本文是描述我们如何在生产中使用 eBPF 调试应用程序的系列文章的第一篇,无需重新编译/重新部署,这篇文章介绍了如何使用 gobpf[1] 和uprobes 为 Go 应用程序建立一个函数参数跟踪器,...Delve 和 gdb 在开发环境调试效果很好,但在生产中并不经常使用,调试器会对程序造成很大的干扰,甚至允许状态变化,这可能就会导致生产环境的应用出现一些意外的故障。...在功能上,eBPF 允许你在一些事件定时器、网络事件或函数调用)发生时运行受限的 C 代码,当触发一个函数调用时,我们把这些函数称为 probe,它们可以用来运行在内核内的函数调用上(kprobes...Go 的许多特性,嵌套指针、接口、通道等,使得这个过程具有挑战性,但是解决这些问题可实现现有系统不存在的另一种检测模式。...总结 使用 uprobes 的 BPF 跟踪有它自己的优点和缺点,当我们需要对二进制状态进行观察时,使用 BPF 是有好处的,即使是在附加调试器会有问题或有害的环境运行时也是如此(例如生产二进制文件)

    1.8K20
    领券