要想GTM玩得溜,这些CSS选择器必须会用

极诣在以往陆陆续续地介绍了许多GTM的小经验和小窍门。如果你是极诣的忠实读者那么,你对GTM一定不会陌生。作为Google Analytics 360套件中的尖刀组件,GTM承载着数据抓取得重任。以往我们承接到一个Web Analytics的项目时需要和客户的前端工程师磕磕碰碰好久才能把代码部署到HTML页面中,而现在有了Google Tag Manager这些活被简化到了“一片蛋糕”那么简单。我们只要将GTM的Container代码发给客户并让他们统一放置到<body>开始标签之后,剩下的我们就可以独自完成。而我们独自完成的部分也仅仅需要一两小时,简单的几分钟便可部署。这多亏了GTM的灵活性和易用性。本篇我们将继续介绍GTM的“大杀器”之一的CSS选择器(CSS Selector)功能,希望能够进一步简化各位网站分析师的布码工作。

DOM元素在GTM中的表示

HTML是一个个DOM元素构成的,其中也插入了脚本和样式。每一个HTML标签都可以认为是一个DOM元素(有例外,但请各位大神此处勿较真)。比如<H5>这才是H5!</H5>,这里的H5代表第五层级的Heading。默认的样式在每个浏览器中有所不同,而且你也可以用CSS来对其进行样式的定义。在极诣,它看上去就是这样的。

这才是H3!

这才是H4!

这才是H5!

我们可以将样式直接写在H5标签中,同样我们也可以用CSS选择器来对其进行修饰。比如下面的p.center就是一个CSS选择器。它规定了class为center的p标签必须居中并且用红色字体。

p.center {
text-align: center;
color: red;
}

先科普一下,我们注意基本的CSS选择器语法:

  • . 表示一个类,即class
  • # 表示元素的id
  • [] 表示属性
  • > 表示直接子元素
  • 空格表示后代,子元素、子元素的子元素……
  • + 表示相邻的兄弟元素

在现代浏览器中,在JavaScript中我们也可以使用document.querySelector(“.example”);来对某一个DOM元素进行定位。这比传统的getElementsBy什么的要好用得多。

在Google Tag Manager中,我们一样可以使用CSS选择器。前提是我们要先定义好Element的变量。变量的定义有多种方法比如你可以如下图开启Click Element这个默认的数据层变量。

Variables - Built-In Variables - CONFIGURE - Clicks - Click Element

Variables – Built-In Variables – CONFIGURE – Clicks – Click Element

当你需要针对表单提交或表单操作时,你可以同时勾上Forms – Form Element。另一种方法是新建一个Variable选择Page Elements中的Auto-Event Variable作为变量类型。不管怎么说,这下我们就可以对这个元素进行选择操作了。

说到选择操作,我们一定知道我们必须新建一个触发器也就是Trigger。那么我们通过Triggers – New新建一个Trigger。然后选择Click – All Elements作为类型。

选择matches CSS selector并填入p.center

选择matches CSS selector并填入p.center

这样我们就有了一个触发器了,这个触发器的触发条件是“当点击class为center的p标签元素”。如果你在浏览极诣这篇文章的桌面版,你可以点击上面“这才是H5!”你会发现一个弹出消息。这个弹出消息就是由一个应用了CSS选择器的触发器所触发的。

CSS Selector+Trigger的GTM实例

CSS Selector+Trigger的GTM实例

那些超实用的CSS选择器

你可能要说了,我现在明白了CSS选择器在GTM中如何使用,那么CSS选择器本身有哪些用法呢?你可以参考W3CSchool来了解复杂的CSS选择器用法。我们在此借鉴了Simo Ahava最新博文的成果为大家推荐几个常用的CSS选择器。

点击外链

a[href*=”maxket.com”]

这个例子说明点击的<a></a>标签的href属性中包含极诣的域名。当我们使用外链标记时记得要在条件中选择does not match CSS selector。

移动页面电话呼叫

a[href^=”tel:”]

当手机页面上放置电话号码链接让用户直接拨打时,我们可以使用这个CSS选择器来统计用户拨打次数和页面环境信息。

文件下载

a[href$=”.pdf”]

这个选择器将统计链接后缀为pdf的点击。同样的,我们可以把它举一反三地应用到,.exe和.apk。

点击发送邮件

a[href^=”mailto:”],a[href^=”mailto:”]*

和我们上面的移动电话呼叫的例子相似,我们这里用了mailto。这里我们又重复了并在后面加上星号*是为了避免一些特殊的情况发生。这也是Simo指出的一大问题,因为DOM元素总是嵌套的,某些情况下真正接受到并被检测的元素并不一定是<a>元素。

举个例子:

<a href=”mailto:some@email.com”>
<span>some@email.com</span>
</a>

在这个情况下,被送去GTM检测的DOM元素是<span>。如果我们仅仅用了a[href^=”mailto:”],那么它并不能触发标签。于是后面那段重复加*就格外重要了。因为此时GTM还会检测这个<span>元素是否在一个<a>元素内。

会玩了吗?

以上就是我们要介绍的超快速部署网站统计的方法。只要你在网页上点击鼠标邮件检查元素,大致了解网页的HTML构造,你就可以轻松抓取用户在网页中的行为。同时只要你善用星号*,就可以比较好地解决DOM元素嵌套的问题。如果你还对GTM的CSS选择器应用有所困惑,请务必一起探讨。

要想深入了解CSS选择器,你还可以参考Periscopix的精彩分析。传送门

http://www.periscopix.co.uk/blog/new-gtm-trigger-condition-matches-css-selector/

感谢阅读,感谢关注极诣。