GTM教程,抓取任意页面元素内容

极诣好久没有和大家分享Google Tag Manager的小技巧了。本周我们花5分钟来学习一个最基本的从页面抓取内容并保存到Google Analytics的技巧。

不过我们先稍微卖个关子,先来了解下GTM的Trigger。

GTM的Trigger原理

GTM的Trigger是管理标签Tag触发的管理工具。在GTM进化到2.0版本之后简化了许多设置,界面变得更友好了。不过由于GTM本身的灵活性,新手不免还是会产生一些困扰。比如下面这个例子:

三种不同的设置Click Event的方法

三种不同的设置Click Event的方法

这三种新建Trigger的方法全都是正确的,而且这三者并没有谁优熟劣。这个Trigger在当用户点击页面上ID为interesting_spot的元素时就会被触发,触发以后你就可以爱干嘛干嘛了(笑)。比如把对应的Click Text记录到GA的Event中去:

通过GA Event将内容保存到GA中去

通过GA Event将内容保存到GA中去

在触发标签的时候,细心的你可能已经发现在GTM中可以轻松定义触发的规则:

高级触发选项

高级触发选项

这里补充一下,不难理解Unlimited和Once per page,那么Once per event是什么意思呢?其实这是GTM默认的设置,也就是说当Trigger满足条件的时候触发Tag。那么问题又回来了,Unlimited又是什么情况。我们注意到一个Tag可以添加多个Trigger,当几个Trigger同时满足时,如最简单的gtm.click,Click Trigger 1:Click ID为“Interesting Point”,Click Trigger 2:Element Class为“PointOfInterest”。由于是“或”的逻辑Tag应该被触发运行两次。这就是Unlimited。这是一个很Tricky的地方,甚至GTM的官方说明都没有说清楚。

抓取网页任意元素

终于可以说正题了。你应该对HTML有一定的了解。假设访客访问你的网站的时候在网页的特定部分都会有相应的内容,而你又不想麻烦程序员去推送数据到数据层。那么这时该怎么做呢?作为一个营销者当然应该少去麻烦程序员。所以你可以利用GTM这个利器自行抓取页面上的元素。

我们拿maxket.com举例子。当你登录以后会看到页面的右上角会出现你的用户名。抓取UserId的跟踪方法我们在以往的文章中介绍过,其实还有另一种方法就是利用GA里的Advanced Filter,这个在跟踪初始访客来源的文章中也介绍过。

为了更加直观,我们更想抓取“扫喵姨”,“兔狲喵”这样的用户名。那么你就可以去抓取登录后的用户名。这在GTM中只需要一个Variable就可搞定。

新建一个DOM Element变量自动抓取ID为特定值的元素的文本内容

新建一个DOM Element变量自动抓取ID为特定值的元素的文本内容

你可以看到极诣用了loginusername那是因为这个元素的ID就是这个值:<span id=”loginusername”>扫喵姨</span>这样你就可以抓取到HTML标签里的内容。

如果你的标签长这样:<span id=”loginusername” username=”smy”>扫喵姨</span>,那么你把username这个Attribute填入Attribute Name,就可以抓取“smy”。到此,你应该就轻车熟路了!我们把UserName这个Variable推入GA Tag的User Defined Dimension:

此处注意dimension1是默认的名称,在GA后台定义的第一个。dimension2以此类推

此处注意dimension1是默认的名称,在GA后台定义的第一个。dimension2以此类推

你可能要问了,那么那个DOM元素如果没有ID该怎么办呢?恭喜你,你的程序员写代码很随意。如果没有ID那只有通过上一层或者使用标签名来定位了。具体的Javascript代码这里就给出一个简单的例子:

这里获取一个name为"qty"的元素的值

这里获取一个name为”qty”的元素的值

你还会用到的有document.getElementsByClassName()和document.getElementsByTagName()然后层层parse抽丝剥茧。

在这里,根据你HTML和JavaScript的水平不同,你可能还是会麻烦前端程序员,不过你并不需要对网站进行更新,只需在GTM里完成所有的魔法。

以上,这就是本次介绍的GTM应用。相当实用吧?感谢阅读。

标签为: ,