不少刚接触GA的人可能不知道怎么用GA做事件跟踪,不同的方法经常混淆,导致无从下手,或是不知道什么情况用哪种跟踪方法,下面是根据自己多年实际经验总结的几种方法,包括其中的优劣,选取方法的原则:
1、直接往页面添加代码的形式,这种方法的缺点是每次添加都需要开发去加,然后发新版,所以非常繁琐,而且页面代码加多后,维护不方便。
2、自定义注入HTML的形式,这种方法是适用比较广,但是需要控制js的触发顺序,如果页面还没有加载完,用户就单击会跟踪不到。
3、页面元素定位法,量少的时候很容易操作,量多的时候会导致GTM中要维护很多的触发器和代码。
4、绑定元素方法,与前一种方法相比,这种方法大大降低了触发器和代码的数量。
5、ga-data方法,批量跟踪必用方法。
6、dataLayer方法,特殊框架,如果前面几种方法都不适用的时候,这个是万金油方法,但是需要开发配合。
下面来详细介绍各种事件跟踪的部署方法:
1.页面添加方法
请看2.3.6章节的事件跟踪。
2.自定义注入HTML的形式
这一节要介绍一种特别的事件跟踪方法,如果您学会这个,那您完全可以抛开开发,但这个需要您掌握js,您准备好了吗?下面入正题:
原理:通过GTM中的自定义html注入js,给相关跟踪位置添加上属性,然后通过GTM里面控制触发的顺序,这样这个事件跟踪就已经添加上页面的html代码了,当触发的时候就会发送事件。
设置过程: 1、下面以单击“关于作者”做事件跟踪为例子,需要跟踪的位置如图3-58所示:
![4.7、六种事件跟踪方法 4.7、六种事件跟踪方法](https://pic2.zhimg.com/80/v2-857cc53614a6c00ba6b5bd0fefd39695_hd.jpg)
将鼠标移动到需要跟踪功能的位置,然后单击右键的“检查”,查看对应单击为是的代码,确定需要添加代码的位置。
2、然后在自定义html写个js,定位位置,添加属性,如图3-59所示:
![4.7、六种事件跟踪方法 4.7、六种事件跟踪方法](https://pic2.zhimg.com/80/v2-664787b612db21a6bc8152dc7da2dd11_hd.jpg)
代码中的37表示单击的位置第37个a标签的位置。代码要设置优先级更高些,上图中的3就是代码的优先级,然后是在基础跟踪代码加载之前就要加载好。
3、刷新一下,然后查看重复第1步的操作,查看代码元素,如图3-60所示:
![4.7、六种事件跟踪方法 4.7、六种事件跟踪方法](https://pic1.zhimg.com/80/v2-cd842742e83135697e6c7ed591e0a1c0_hd.jpg)
可以看到事件跟踪的代码已经被添加到页面上去了。
原则上这种方法可以应用于所有的事件跟踪,而且直接自己能在GTM操作,不需要开发,不足就是部分页面复杂的定位可能比较复杂,需要js,另一个加载顺序会影响到代码是否生效。
3.页面元素定位法
主要通过内置变量中的数据层变量或自动事件变量定位,就经验而言,大部分的定位第一条会是定位URL,然后是具体的根据属性做跟精准的定位,在这过程中需要不断的debug,以确定单击被触发。
下面就举一个例子,想要采集单击某个位置的单击量,单击右键查看该按钮的元素,如图3-61所示:
![4.7、六种事件跟踪方法 4.7、六种事件跟踪方法](https://pic3.zhimg.com/80/v2-3d537347776ce7ac5ad479bdf85013ae_hd.jpg)
还记得前面讲解到触发器里面:用户单击的时候GTM自动将最近的变量填充到Click Clases、Click Text、Click Target这些内置变量。从上面的定位的代码可以确定:Click Clases是btn_1,Click Text是“CamShare”,也就是可以将触发器设置为如图3-62所示:
![4.7、六种事件跟踪方法 4.7、六种事件跟踪方法](https://pic3.zhimg.com/80/v2-e1107598414dbf0180e8a2fe4d356856_hd.jpg)
图3-62 页面元素定位法
这样就可以,再次强调:触发器定义第一条一般是URL,也就是这个事件跟踪是在哪个页面的,如果是所有页面都有,就正则匹配所有的。
4.绑定元素方法
这是通过js绑定class属性的方法来实现的。
原理:将需要跟踪的位置用datalayer push绑定,一般定位到class,且这个class要唯一,如果有人单击该位置,那么事件就通过datalayer push这个方法发送出去,推送出去的信息再通过数据层去接受,然后去tag中设置。
这个方法有一个好处就是datalayer push的可以用统一的结构,后续需要增加事件跟踪,直接对新增的绑定位置做新增即可实现。
详细设置过程
1、下面以GA小站单击头部作为事件跟踪的例如,如图3-63所示,用户单击“GA小站”的元素是g-mono
![4.7、六种事件跟踪方法 4.7、六种事件跟踪方法](https://pic3.zhimg.com/80/v2-a847ee4c04959d98b4a207150695132e_hd.jpg)
2、在GTM中用自定义html的方法将g-mono与事件绑定,如图3-64所示:
![4.7、六种事件跟踪方法 4.7、六种事件跟踪方法](https://pic4.zhimg.com/80/v2-17fc6b13679b0e8e79f87391b89c156b_hd.jpg)
这个的作用是,有人单击的时候,就将事件用datalayer push的发送出去。
3、变量中用数据层变量接收发出的三个数据层变量,如图3-65所示:
![4.7、六种事件跟踪方法 4.7、六种事件跟踪方法](https://pic3.zhimg.com/80/v2-21ef01c2c1d49024f480968ed261cd36_hd.jpg)
4、触发器中接收自定义事件变量,如图3-66所示:
![4.7、六种事件跟踪方法 4.7、六种事件跟踪方法](https://pic1.zhimg.com/80/v2-fd598c9f3cb9b6ac8c854d45b513c054_hd.jpg)
5、在GTM中设置代码,如图3-67所示:
![4.7、六种事件跟踪方法 4.7、六种事件跟踪方法](https://pic3.zhimg.com/80/v2-d262a60dd04f1a6f0baa926ae211667e_hd.jpg)
6、测试,如图3-68所示,在GTM中单击预览,模拟单击,然后在GA的实时里面看是否有对应的事件触发,如果有,事件跟踪成功。
![4.7、六种事件跟踪方法 4.7、六种事件跟踪方法](https://pic1.zhimg.com/80/v2-a3513259915f27ace7fc1629654c0b00_hd.jpg)
5.ga-data方法(批量事件跟踪)
这节要介绍的是如何做批量事件跟踪,也就是一条代码触发多个事件的形式,前面已经介绍了4种事件跟踪的方法,但都逐个去定位的,工作量比较大且繁琐,现在介绍一种可以批量跟踪事件的方法。
实现原理:如图3-69所示,通过自定义js获取页面固定属性的数值,再将数值通过对照表转义成对应的具体行为,在触发器通过设置数值范围设置促发条件,新建代码即可。
![4.7、六种事件跟踪方法 4.7、六种事件跟踪方法](https://pic2.zhimg.com/80/v2-86403bf367b47a13b3863fbd0745e6d1_hd.jpg)
详细设置流程:
1、Web上加ga-data属性
将鼠标移至需要监控的位置,单击右键查看具体代码位置加入ga-data属性,不同的位置分配不同的数值,如图3-70所示。
![4.7、六种事件跟踪方法 4.7、六种事件跟踪方法](https://pic1.zhimg.com/80/v2-d290a7ade62fcce55df7a356029c11f0_hd.jpg)
2、自定义JavaScript
在GTM中选择“变量”→“新建”→“选择一个变量类型以开始设置…”→“自定义JavaScript”,然后将这段代码复制进入,此js是获取Web页面的固定属性,完整代码去http://www.ichdata.com/book.html获取,具体如图3-71所示:
![4.7、六种事件跟踪方法 4.7、六种事件跟踪方法](https://pic1.zhimg.com/80/v2-f675c0a730d142eaf18d42c7f1d9e830_hd.jpg)
更改attr后面的属性可以获取不同全局属性。这里需要注意,这段代码中使用了,这个变量是GTM属于用户自定义变量里的的,默认是没有启用,要使用要做点配置。在GTM中单击“变量”→“新建”→“选择一个变量类型以开始设置…”→“自动事件变量”,其中变量类型选择“元素”,然后将这变量保存为element,具体配置信息如图3-72所示:
![4.7、六种事件跟踪方法 4.7、六种事件跟踪方法](https://pic3.zhimg.com/80/v2-53e6f4303ce2e2a2a063618982dbe556_hd.jpg)
3、对照表
如图3-73所示,将前面获取的ga-data的属性里面的具体数值转化成对应的具体行为,一般数值范围选用顺序构造,方面后面设置触发器的促发条件 。
![4.7、六种事件跟踪方法 4.7、六种事件跟踪方法](https://pic2.zhimg.com/80/v2-f66486218b45d2a0b6ed641905063dd5_hd.jpg)
需要注意,这里输入变量就是上一步自定义js获取到的变量getGaData。
4、设置触发器
设置触发条件范围,目标中使用的是所有元素,如果确定单击的是链接,可以选用链接,促发条件就是前面的数值范围,如图3-74所示:
![4.7、六种事件跟踪方法 4.7、六种事件跟踪方法](https://pic3.zhimg.com/80/v2-b549b2a84c3b59f7392d28c32b9a553e_hd.jpg)
5、设置代码,具体配置如图3-75所示:
![4.7、六种事件跟踪方法 4.7、六种事件跟踪方法](https://pic2.zhimg.com/80/v2-33fc5ba24131825cbe2d1d784b3acff5_hd.jpg)
触发器就是上一步设置的Tag501,这里由于截图问题没有显示。
6、测试发布
在Debug测试无异常后即可发布
用这种方法可以简化页面代码的部署,维护方便,后面只需在需要跟踪的位置添加ga-data就可以。
这种方法可以用于表单优化,导航栏的使用使用跟踪,AB test和追踪用户具体的单击等,下面介绍这种方法在表单优化的应用。
基本思路是:通过ga-data方法将整个注册表单的行为都跟踪下来,然后分析注册流程哪一步流失最大,对应做表单压缩或顺序调整,降低降低注册流失,提高注册转化比例。
详细设置过程
1、首先看看表单结构,这里只截取主要是核心部分,如图3-76所示:
![4.7、六种事件跟踪方法 4.7、六种事件跟踪方法](https://pic2.zhimg.com/80/v2-15cb6e6070a118e29c2ec8bff54434c1_hd.jpg)
2、然后根据页面设计结构做ga-data数值分配,如图3-77所示:
![4.7、六种事件跟踪方法 4.7、六种事件跟踪方法](https://pic2.zhimg.com/80/v2-f180a6f529d6f00a20fa73f888eeb245_hd.jpg)
3、然后GTM中设置,其中变量用到的有3个变量,如图3-78所示:
![4.7、六种事件跟踪方法 4.7、六种事件跟踪方法](https://pic2.zhimg.com/80/v2-3c301e347904f55feac52d312a28d031_hd.jpg)
4、其中gadata1对照表如图,这里的作用是将getGaData的数值与具体的行为对应转义,如图3-79所示:
![4.7、六种事件跟踪方法 4.7、六种事件跟踪方法](https://pic4.zhimg.com/80/v2-cf1c9f0e660a20614dbc0d6ce3acefd7_hd.jpg)
5、设置促发条件,根据数值范围设置,如图3-80所示:
![4.7、六种事件跟踪方法 4.7、六种事件跟踪方法](https://pic2.zhimg.com/80/v2-acf8954c3322f380b15b035ff99e20dd_hd.png)
6、设置Tag,向GA发送数据,如图3-81所示:
![4.7、六种事件跟踪方法 4.7、六种事件跟踪方法](https://pic4.zhimg.com/80/v2-8c0df2d8a4f282827263eeb52e9e9ef3_hd.jpg)
7、GA中事件跟踪接收到数据形式如3-82所示:
![4.7、六种事件跟踪方法 4.7、六种事件跟踪方法](https://pic2.zhimg.com/80/v2-e53b4499678550aaf125e89cac8dfc5d_hd.jpg)
后面就可以根据业务做具体的分析与调整,可以上面的数据有个递减的趋势,可以计算各个步骤的流失情况。
6.dataLayer方法(数据层的应用)
如果在单页应用或APP里面要做事件跟踪要怎么实现呢?很明显,前面的集中方法都不适用了,这时候需要用dataLayer方法,也就是用到数据层了。
实现原理:调用dataLayer主动推送自定义事件。
详细设置过程:
1、行为触发的时候调用dataLayer
比如虚拟页面中单击某个位置,或APP中单击某个位置就调用dataLayer,格式如:dataLayer = [{‘event’: ‘click’}];
2、触发器设置
触发器中使用自定义事件接受click,配置如图3-83所示:
![4.7、六种事件跟踪方法 4.7、六种事件跟踪方法](https://pic3.zhimg.com/80/v2-0288146b368dbed2f32e25da11abda56_hd.jpg)
3、配置代码
触发器是自定义事件,事件的类别、操作和标签根据自己需要填,具体配置如3-84所示:
![4.7、六种事件跟踪方法 4.7、六种事件跟踪方法](https://pic4.zhimg.com/80/v2-184cfed2e937bbfb8142aa409a0433c3_hd.jpg)
这里需要注意的,如果是在单页应用里面做事件跟踪,在事件跟踪的代码配置中“要设置的字段”里面的配置信息需要与默认跟踪代码的配置一致,因为单页应用对页面做了改写,如果不一致,事件跟踪到的数据是错误的。