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

3.2.7 、Google Tag Manager实战指南——六种事件跟踪方法

3、页面元素定位法,量少的时候很容易操作,量多的时候会导致GTM中要维护很多的触发器和代码。 4、绑定元素方法,与前一种方法相比,这种方法大大降低了触发器和代码的数量。...图3-61 审查页面元素 还记得前面讲解到触发器里面:用户单击的时候GTM自动将最近的变量填充到Click Clases、Click Text、Click Target这些内置变量。...图3-67 设置代码 6、测试,如图3-68所示,在GTM单击预览,模拟单击,然后在GA的实时里面看是否有对应的事件触发,如果有,事件跟踪成功。 ?...4、设置触发器 设置触发条件范围,目标中使用的是所有元素,如果确定单击的是链接,可以选用链接,促发条件就是前面的数值范围,如图3-74所示: ?...详细设置过程: 1、行为触发的时候调用dataLayer 比如虚拟页面中单击某个位置,或APP中单击某个位置就调用dataLayer,格式如:dataLayer = [{‘event’: ‘click

2.5K30
您找到你想要的搜索结果了吗?
是的
没有找到

google跟踪代码管理器gtm无法给相同class元素绑定click事件埋点解决

在通过clickClasses给相同class的多个元素块绑定click事件埋点的时候,发现无法实现,通过gtm管理器调试发现,点击的时候,显示的是里层被点击的元素,而我们想要绑定整个外层的大块元素,所以这时候我们只能自己写...1、新建触发器,绑定页面加载事件,到某个页面 ?...2、绑定事件代码,这里发现,正常addEventListener默认是冒泡事件,给父元素绑定click事件,点击子元素的某个元素会冒泡的顶级元素,但是这里并不能冒泡上去,所以暂时兼容办法,采取DOM0级事件绑定...,onclick方式,但是这样有一个弊端,就是如果该元素本身原来如果有click事件,会被覆盖,所以如果是使用这种方法,一定要避开已经有绑定click事件的元素

1.1K10

3.1.5 、Google Tag Manager基础知识——GTM中的重要概念

2)单击 原则上,只要有GA基础跟踪代码的页面的单击都是可以通过GTM跟踪到的。单击分为两种,一种是有链接的单击,这种表示单击后页面会跳转走;一种是所有元素单击,包含第一种的所有单击。...图3-20 单击的配置 用户单击的时候,GTM会将单击最近的元素填充到以下变量,这也就是为什么在定位用户单击位置的时候需要查看页面的元素,需要注意,下面的这些变量要在触发器能够使用,还需要在变量中的内置变量中将其勾选...例如,如果要对站点ichdata.com的头部“GA小站”做单击事件跟踪,那么通过页面查看元素可以知道Click Clases就是g-mono了(这里的Click Text是“GA小站”),如图3-21...通常来说触发条件有时候并不是只选取一个Click Classes或Click Text就能够触发的,如果触发器没有生效,这时候一般的原则是寻找该为位置的上一级元素做跟细致的定位,如Click ID这类唯一性比较强的...内置变量中使用比较多的是网页和单击这两个模块的变量,其中单击就是前面触发器里面讲到的用户单击的时候GTM会自动填充的变量,这两类变量在部署GTM的时候将其全部勾选开启。

3.5K21

2.3.6、Google Analytics高级应用——事件跟踪

下载、移动广告单击、小工具、Flash 元素、AJAX 嵌入式元素以及视频播放都是可以作为事件进行跟踪的操作。...,默认是会纳入跳出率的计算的了,为了不让事件跟踪影响真实跳出率,通常会将事件跟踪设置为非互动匹配, 事件跟踪的限制,系统会自动发送前10个匹配给Google分析,之后是每秒1次,如果您的是一秒内有多次触发...,事件跟踪得到的数据是不准确的,对此您可以做归并,如触发2次,5次的时候发一次事件。...', 'event', 'book retailer', 'click', 'Barnes&Noble', 5, True);" 上述格式添加在您需要跟踪的位置,您单击那里希望它触发就添加在哪里,完整格式的如...最便捷的方法是通过GTM去添加,而且配置的方法多种多样,灵活多变,有兴趣的可以直接去看第三章第二节的事件跟踪。 报告的查看:事件跟踪的报告在GA中选择“行为”→“事件”里面,一般查看“热门事件”居多。

85710

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

你可以通过运行GTM预览模式来查看点击“赞”是否记录了任何点击。 如果GTM没有记录到点击,那么点赞按钮实际上是不属于该网站的。...幸运的是,这些按钮都是用类似的方式提供,所以我们只需要一个触发器和一个标签来实现它。 预览模式 到目前为止,确定如何构建触发器的最简单的方法是使用GTM的预览模式。...我可以使用图中的Click作为触发器,实际上是使用Click Classes (元素类属性中的一系列值)触发此变量。 即使每个点击的完整字符串不一致,但它们都是以相同的文本开头。...触发器 如图所示,只有当“Click Classes”以“at4-share”开头,我们才会为我们的博客启用此触发器。 ? 截止目前,这些设置看起来都是比较容易的。...要构建标签Tag,我们可以使用我们确定的其他变量Variable,名为Click Text(用户点击的元素内部的可见文本)。这是为了方便格式化我们的社交网络。

2.4K60

3.2.11、Google Tag Manager实战指南—— 对按钮颜色做测试

这一节要介绍如何在GTM对页面的按钮颜色做AB测试,同样的,这个原理在有Call To Action的地方都可以应用,比如电商的单击购物车按钮,结账,注册表单的注册,导航栏的颜色等,这是一种页面微调非常好的方法...原理:利用GTM对按钮做AB测试,原理并不难,通过在GTM中自定义html将js注入页面,然后对页面的原有代码做修改,展示成其他的颜色,并将分组的信息写入Cookie,将相关的信息抛到数据层,再用GTM...2、复制ab_testing.js,在GTM中新建html,然后选择All Pages,如图3-97所示,触发器这里可以根据您自己的需要做选择,如果您只对产品详情页面,那就在触发器里面只选择该页面就可以...4、以改变页面的颜色为例子,单击查看页面元素的,找到该出位置对应的代码,如图3-98所示: ?...图3-102 数据推送到数据层 触发器中设置自动事件变量,接收自定义事件 abTest,具体设置如图3-103所示: ?

1.3K20

3.2.14 、Google Tag Manager实战指南——监控Flash产品上的单击

实现原理:用向数据层推送事件的形式,用户在flash单击的时候触发向数据层发送事件,包含自定义事件名和数据层变变量,自定义事件通过触发器里的自定义事件接收,数据层变量里的不同数值表示不同位置的单击,通过变量里的数据层变量接收...,然后在通过对照表转义,在通过代码做触发向GA反馈数据。...图3-119 监控Flash原理图 需要注意的是左边的用户单击flash直接调用dataLayer的写法为dataLayer.push{'event':gtm_flash_event,'gtm_flash_action...3、触发器中接受自定义事件gtm_flash_event,作为促发条件,如图3-122所示: ? 图3-122 自定义事件触发器 4、设置代码,向GA发送数据,具体设置如图3-123所示: ?...图3-123 设置代码 需要注意,这里的触发器是第3步接收的自定义事件,然后预览测试没问题就可以上线。

77320

3.1.7、Google Tag Manager基础知识—— GTM Debug

GTM在配置后需要调试,看对应的代码(Tag)是否促发,数据返回正确与否,特别是有代码使用js的时候,会往网页注入代码,因为这段代码是和页面代码一样运行的,如果错误可能会导致站点崩溃。...图3-33 GTM预览 如果没有,再检查这个页面: 首先是看左侧的,数据类型是单击、还是浏览,主动push event,对应得选择该类型,如果不确定,可以重新模拟操作一次,然后观察左侧促发的类型,选择该类型...,一般来说事件监控大部分是单击类型 然后看Tags Fired On This Event中,对应的代码是否被促发,如果没有,找到该代码,看哪个条件有问题,同时看代码中的变量使用的字段是否有值,变量是GTM...可以拿到的字段,如果是undefined就是没有值的意思,就是变量没有拿到,需要对变量做修改,如果变量有值,但代码没促发,可以点开该代码,可以看到具体是触发器的哪个位置有错,对应对触发器的定位规则做调整...Tag Manager Injector的用法是将需要测试的GTM的容器ID和网站的域名分别填入下面两个位置,测试时候除了单击GTM右上角的“预览”,还需要在Tag Manager Injector中单击

78020

JavaScript小技能:事件

(Node.js 的事件模型、浏览器插件WebExtensions技术的事件模型) 1.3 事件冒泡及捕获 当一个事件发生在具有父元素元素,浏览器运行两个不同的阶段 - 捕获阶段和冒泡阶段。...然后,它移动到中单击元素的下一个祖先元素,并执行相同的操作,依此类推,直到到达实际点击的元素。...事件委托: 如果你想要在大量子元素单击任何一个都可以运行一段代码,您可以将事件监听器设置在其父节点上,并让子节点上发生的事件冒泡到父节点上,而不是每个子节点单独设置事件监听器。...例如,媒体记录器 API 有一个dataavailable事件,它会在录制一些音频或视频触发,并且可以用来做一些事情 (例如保存它,或者回放)。...通过标准事件对象的 stopPropagation()函数来修复事件冒泡问题 当在事件对象上调用该函数,它只会让当前事件处理程序运行,但事件不会在冒泡链上进一步扩大,因此将不会有更多事件处理器被运行

1.4K10

jQuery 事件(三) 事件的绑定和解绑、对象的使用、自定义事件

由于浏览器事件冒泡特性,可以在触发li把这个事件往上冒泡到ul上,因为ul上绑定事件响应,所以能触发这个动作。 事件对象 怎么才知道触发的li元素是哪个一个?...event.target target 属性可以是注册事件元素,或者它的子元素。...经常用于事件冒泡处理事件委托 event.target代表当前触发事件的元素,可以通过当前元素对象的一系列属性来判断是不是我们想要的元素 <!...event.which:获取在鼠标单击单击的是鼠标的哪个键 event.which 将 event.keyCode 和 event.charCode 标准化了。...() 会影响所有与 jQuery 对象相匹配的元素,而 .triggerHandler() 仅影响第一个匹配到的元素 使用 .triggerHandler() 触发的事件,并不会在 DOM 树中向上冒泡

4K30

如何在 Google 跟踪代码管理器 (GTM) 中安装 Matomo 跟踪?

单击左侧菜单中的“标签”。 单击标签部分右上角的“新建”按钮添加新标签。 单击“标签配置”以选择标签。 将弹出一个包含所有可用标签的窗口,在此处单击“在社区模板库中发现更多标签类型”链接。...向下滚动并单击触发”。 选择“所有页面”以在所有页面上触发 Matomo 跟踪标签。 单击“保存”。 单击“预览”按钮预览您的更改。 检查 Matomo 标签是否按预期触发。...向下滚动并单击触发”。 选择“所有页面”以在所有页面上触发“Matomo 跟踪标签”。 单击“保存”。 单击“预览”按钮预览您的更改。 检查 Matomo 标签是否按预期触发。...要了解有关将 Matomo 与 GTM 结合使用的更多信息,我们推荐这篇第 3 方文章:Google 跟踪代码管理器和 Matomo。 您知道 Matomo 也有自己的标签管理器吗?...了解有关Matomo 标签管理器的更多信息,或了解如何从 GTM 迁移到 MTM。

29230

Cypress系列(18)- 可操作类型的命令 之 点击命令

click单击 dbclick:双击 rightclick:右键 .click() 的语法和用法 单击某个元素 六种基础语法格式 // 单击某个元素 .click() // 带参数的单击 .click...当使用 force ,将执行这些操作 继续执行所有默认操作 强制在元素触发事件 当使用 force ,将不会执行这些操作 滚动到视图中 确保可见 确保未禁用 确保没有分离 确保它不是只读的 确保它没有动画...确保未覆盖 向后代触发事件 总结 总而言之, { force: true } 跳过检查,它将始终在所需元素触发事件 .click() 具体的栗子 .click() 的栗子 测试文件代码 ?...cy.get(' ul > li ') 共匹配四个 DOM 元素,他们均触发单击操作 单击组合键 .click() 命令还可以与 .type() 命令结合使用修饰符来触发组合键操作,以便在单击结合键盘操作...在命令日志中单击 click ,控制台console 将输出以下鼠标事件 ? 结尾 本文是博主基于对蔡超老师的《Cypress 从入门到精通》阅读理解完后输出的博文,并附上了自己的理解

2.1K10

Cypress系列(18)- 可操作类型的命令

单击 dbclick:双击 rightclick:右键 .click() 的语法和用法 单击某个元素 六种基础语法格式 // 单击某个元素 .click() // 带参数的单击 .click(options...,将执行这些操作 继续执行所有默认操作 强制在元素触发事件 当使用 force ,将不会执行这些操作 滚动到视图中 确保可见 确保未禁用 确保没有分离 确保它不是只读的 确保它没有动画 确保未覆盖...元素,他们均触发单击操作 单击组合键 .click() 命令还可以与 .type() 命令结合使用修饰符来触发组合键操作,以便在单击结合键盘操作,例如ALT + click 以下修饰符可以和 .click...() 会触发的鼠标事件 在命令日志中单击 click ,控制台console 将输出以下鼠标事件 接下来我们讲 type() 命令 前端 html 代码 后面栗子主要以这个页面为主哦 .type...event 当传入了特殊字符、键盘键,只触发了 keydown 事件 当传入了内容字符,每个字符都会触发一系列的事件 keydown keypress textInput input keyup

1.3K30

事件高级

DOM事件流 html中的标签都是相互嵌套的,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。 当你单击一个div,同时你也单击了div的父元素,甚至整个页面。 ​...比如:我们给页面中的一个div注册了单击事件,当你单击了div,也就单击了body,单击了html,单击了document。 ?...常情况下terget 和 this是一致的, 但有一种情况不同,那就是在事件冒泡(父子元素有相同事件,单击元素,父元素的事件处理函数也会被触发执行), 这时候this指向的是父元素,因为它是绑定事件的元素对象..., 而target指向的是子元素,因为他是触发事件的那个具体元素对象。    ...(给父元素注册事件,利用事件冒泡,当子元素的事件触发,会冒泡到父元素,然后去控制相应的子元素。)

1.3K20
领券