专栏首页GA小站3.2.7 、Google Tag Manager实战指南——六种事件跟踪方法

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

不少刚接触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所示:

图3-58 需要跟踪的位置

将鼠标移动到需要跟踪功能的位置,然后单击右键的“检查”,查看对应单击为是的代码,确定需要添加代码的位置。 2、然后在自定义html写个js,定位位置,添加属性,如图3-59所示:

图3-59 添加属性

代码中的37表示单击的位置第37个a标签的位置。代码要设置优先级更高些,上图中的3就是代码的优先级,然后是在基础跟踪代码加载之前就要加载好。

3、刷新一下,然后查看重复第1步的操作,查看代码元素,如图3-60所示:

图3-60 添加事件跟踪

可以看到事件跟踪的代码已经被添加到页面上去了。 原则上这种方法可以应用于所有的事件跟踪,而且直接自己能在GTM操作,不需要开发,不足就是部分页面复杂的定位可能比较复杂,需要js,另一个加载顺序会影响到代码是否生效。

3.页面元素定位法

主要通过内置变量中的数据层变量或自动事件变量定位,就经验而言,大部分的定位第一条会是定位URL,然后是具体的根据属性做跟精准的定位,在这过程中需要不断的debug,以确定单击被触发。 下面就举一个例子,想要采集单击某个位置的单击量,单击右键查看该按钮的元素,如图3-61所示:

图3-61 审查页面元素

还记得前面讲解到触发器里面:用户单击的时候GTM自动将最近的变量填充到Click Clases、Click Text、Click Target这些内置变量。从上面的定位的代码可以确定:Click Clases是btn_1,Click Text是“CamShare”,也就是可以将触发器设置为如图3-62所示:

图3-61 审查页面元素

图3-62 页面元素定位法 这样就可以,再次强调:触发器定义第一条一般是URL,也就是这个事件跟踪是在哪个页面的,如果是所有页面都有,就正则匹配所有的。

4.绑定元素方法

这是通过js绑定class属性的方法来实现的。 原理:将需要跟踪的位置用datalayer push绑定,一般定位到class,且这个class要唯一,如果有人单击该位置,那么事件就通过datalayer push这个方法发送出去,推送出去的信息再通过数据层去接受,然后去tag中设置。 这个方法有一个好处就是datalayer push的可以用统一的结构,后续需要增加事件跟踪,直接对新增的绑定位置做新增即可实现。 详细设置过程 1、下面以GA小站单击头部作为事件跟踪的例如,如图3-63所示,用户单击“GA小站”的元素是g-mono

图3-63 GA小站头部

2、在GTM中用自定义html的方法将g-mono与事件绑定,如图3-64所示:

图3-64 绑定class

这个的作用是,有人单击的时候,就将事件用datalayer push的发送出去。 3、变量中用数据层变量接收发出的三个数据层变量,如图3-65所示:

图3-65 接收数据层变量

4、触发器中接收自定义事件变量,如图3-66所示:

图3-66 接收自定义事件

5、在GTM中设置代码,如图3-67所示:

图3-67 设置代码

6、测试,如图3-68所示,在GTM中单击预览,模拟单击,然后在GA的实时里面看是否有对应的事件触发,如果有,事件跟踪成功。

图3-68 测试

5.ga-data方法(批量事件跟踪)

这节要介绍的是如何做批量事件跟踪,也就是一条代码触发多个事件的形式,前面已经介绍了4种事件跟踪的方法,但都逐个去定位的,工作量比较大且繁琐,现在介绍一种可以批量跟踪事件的方法。 实现原理:如图3-69所示,通过自定义js获取页面固定属性的数值,再将数值通过对照表转义成对应的具体行为,在触发器通过设置数值范围设置促发条件,新建代码即可。

图3-69 批量事件跟踪原理

详细设置流程: 1、Web上加ga-data属性 将鼠标移至需要监控的位置,单击右键查看具体代码位置加入ga-data属性,不同的位置分配不同的数值,如图3-70所示。

图3-70

2、自定义JavaScript 在GTM中选择“变量”→“新建”→“选择一个变量类型以开始设置…”→“自定义JavaScript”,然后将这段代码复制进入,此js是获取Web页面的固定属性,完整代码去ichdata.com/book.html获取,具体如图3-71所示:

图3-71 自定义JavaScript

更改attr后面的属性可以获取不同全局属性。这里需要注意,这段代码中使用了,这个变量是GTM属于用户自定义变量里的的,默认是没有启用,要使用要做点配置。在GTM中单击“变量”→“新建”→“选择一个变量类型以开始设置…”→“自动事件变量”,其中变量类型选择“元素”,然后将这变量保存为element,具体配置信息如图3-72所示:

图3-72 element

3、对照表 如图3-73所示,将前面获取的ga-data的属性里面的具体数值转化成对应的具体行为,一般数值范围选用顺序构造,方面后面设置触发器的促发条件 。

图3-73 对照表

需要注意,这里输入变量就是上一步自定义js获取到的变量getGaData。 4、设置触发器 设置触发条件范围,目标中使用的是所有元素,如果确定单击的是链接,可以选用链接,促发条件就是前面的数值范围,如图3-74所示:

图3-74 设置触发器

5、设置代码,具体配置如图3-75所示:

图3-75 代码设置

触发器就是上一步设置的Tag501,这里由于截图问题没有显示。 6、测试发布 在Debug测试无异常后即可发布 用这种方法可以简化页面代码的部署,维护方便,后面只需在需要跟踪的位置添加ga-data就可以。

这种方法可以用于表单优化,导航栏的使用使用跟踪,AB test和追踪用户具体的单击等,下面介绍这种方法在表单优化的应用。

基本思路是:通过ga-data方法将整个注册表单的行为都跟踪下来,然后分析注册流程哪一步流失最大,对应做表单压缩或顺序调整,降低降低注册流失,提高注册转化比例。 详细设置过程 1、首先看看表单结构,这里只截取主要是核心部分,如图3-76所示:

图3-76 表单截图

2、然后根据页面设计结构做ga-data数值分配,如图3-77所示:

图3-77 ga-data数字分配

3、然后GTM中设置,其中变量用到的有3个变量,如图3-78所示:

图3-78 GTM中的设置

4、其中gadata1对照表如图,这里的作用是将getGaData的数值与具体的行为对应转义,如图3-79所示:

如图3-79 对照表转义

5、设置促发条件,根据数值范围设置,如图3-80所示:

如图3-80 设置触发条件

6、设置Tag,向GA发送数据,如图3-81所示:

图3-81 设置代码

7、GA中事件跟踪接收到数据形式如3-82所示:

图3-82 事件报告中显示

后面就可以根据业务做具体的分析与调整,可以上面的数据有个递减的趋势,可以计算各个步骤的流失情况。

6.dataLayer方法(数据层的应用)

如果在单页应用或APP里面要做事件跟踪要怎么实现呢?很明显,前面的集中方法都不适用了,这时候需要用dataLayer方法,也就是用到数据层了。 实现原理:调用dataLayer主动推送自定义事件。 详细设置过程: 1、行为触发的时候调用dataLayer 比如虚拟页面中单击某个位置,或APP中单击某个位置就调用dataLayer,格式如:dataLayer = [{‘event’: ‘click’}]; 2、触发器设置 触发器中使用自定义事件接受click,配置如图3-83所示:

图3-83 自定义事件

3、配置代码 触发器是自定义事件,事件的类别、操作和标签根据自己需要填,具体配置如3-84所示:

图3-84 DataLayer方法代码设置

这里需要注意的,如果是在单页应用里面做事件跟踪,在事件跟踪的代码配置中“要设置的字段”里面的配置信息需要与默认跟踪代码的配置一致,因为单页应用对页面做了改写,如果不一致,事件跟踪到的数据是错误的。

本文分享自微信公众号 - GA小站(ichdata)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端转Flutter - 对照Javascript学Dart

    最近在学flutter,发现flutter的编程语言Dart和Javascript有诸多相似,对于前端开发者而已好处在于有JavaScript经验学习Dart会...

    MudOnTire
  • Android7.0适配之FileProvider

    之前项目的新特性适配工作都是同事在做,一直没有怎么太关注,不过类似这些适配的工作还是有必要做一些记录的。

    大公爵
  • 5 个 JS 不良编码习惯,你占几个呢

    在这篇文章中,我描述了JavaScript中常见的5种不良编码习惯。重要的是,本文会给出一些可行的建议,如何的摆脱摆脱这些习惯。

    前端小智@大迁世界
  • javascipt

    用户2337871
  • Echarts请求不同格式的json数据处理

    在前面已经说到过关于Echarts请求json数据处理: 【前端统计图】echart折线图ajax请求json数据: https://www.jianshu...

    祈澈菇凉
  • Spring Ioc源码分析 之 Bean的加载(八):初始化

    初始化 bean 的方法其实就是三个步骤的处理,而这三个步骤主要还是根据用户设定的来进行初始化,这三个过程为:

    大王叫下
  • 前端面试:谈谈 JS 垃圾回收机制

    最近看到一些面试的回顾,不少有被面试官问到谈谈JS 垃圾回收机制,说实话,面试官会问这个问题,说明他最近看到一些关于 JS 垃圾回收机制的相关的文章,为了 B ...

    Javanx
  • Django实战-多对多查询

    Django网络应用开发的5项基础核心技术包括模型(Model)的设计,URL 的设计与配置,View(视图)的编写,Template(模板)的设计和Form(...

    小团子
  • 有了这套模板,女朋友再也不用担心我刷不动 LeetCode 了

    下面的动画以 「力扣」第 704 题:二分查找 为例,展示了使用这个模板编写二分查找法的一般流程。

    帅地
  • leetcode491. Increasing Subsequences

    这里采用深度优先的思路进行解决。先将数组按照从小到大排序,再从左往右遍历数组,每个数字有两种可能,分别是选中到子数组,或者不选中。将所有的结果收纳即可获得最终的...

    眯眯眼的猫头鹰

扫码关注云+社区

领取腾讯云代金券