用通配符CSS选择器定位触发器

Google Analytics Haran 6年前 (2018-04-11) 4171次浏览 0个评论

当使用Google Tag Manager触发器中的“所有元素”时容易的导致所有的页面点击都会触发,这是非常不精准的,我们需要精准跟踪的是鼠标点击的位置的元素,这意味着如果你使用触发器里的“所有元素”时,你还需要继续定位你需要点击的位置的元素。

这篇短文就将介绍一个简单的例子去确保能够准确跟踪触发位置的元素,这会涉及到很多html结构方面的东西,你需要会简单的使用触发器里的CSS选择器即可。

用通配符CSS选择器定位触发器
通配符选择符字面意思是包含选择器里面的所有元素。所以如果给你一个选择器类似div#nav *,这意味会包含任何元素只要有<div id=”nav”>,但并不是<div>这个元素自身。

下面看一个实际的例子:

 

 

在这段代码中,如果我们想要跟踪在<div id=”logo”>的点击,不管点击是在image元素还是span上,如果你用触发器里面的“所有元素”,然后做如下的设置,它并不会触发:
1、Click ID equals logo
2、Click Element matches CSS selector div#logo

为什么不会触发呢?因为点击并没有落在<div>上,相反,它落在一个签到元素上面,因为它们是块级元素,它们实际上完全填充了包装<div>。 因此,<div>本身没有可以点击的区域!

因此,您需要指示触发器跟踪定位在<div>本身(这是一个很好的预防措施,以防有额外的填充将表面区域引入到<div>)以及它的任何嵌套元素。 这是通配符选择器派上用场的地方。

选择器的设置你需要像这样用
Click Element matches CSS selector div#logo, div#logo *
这样的用法意思是:跟踪点击落在<div id=”logo”>或任何签到在这个div的点击。

我可以说触发器中的“所有”元素的用法基本是element, element *的结构,这样无论嵌套的html结构如何,你都可以准确的跟踪到该位置的点击。

我能想到的唯一极端情况是,如果您确实想跟踪单独的嵌套元素边界上的点击,而不是嵌套在内部的任何东西,但我无法在真实世界的场景中验证和测试此用例。 但是,如果你确实想要在包装元素上专门跟踪点击次数,只需放宽通配符选择器匹配范围,然后只使用div#作为唯一的选择器。

说两句:CSS选择器这个我用的不多,但也是一种触发器的定位方式,其实有更容易的写css选择的方式,可以在查看页面元素中,然后定位到具体你需要跟踪的位置,然后点击邮件的css复制,可以直接拿到这个位置的css选择器。

 

来源:https://www.simoahava.com


如有疑问,可以在文章底部留言或邮件(haran.huang@ichdata.com) 我~
喜欢 (3)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址