本客服平台由提供产品服务

JS可视化埋点-使用指南

Alan发表于:2017年07月20日 18:23:54更新于:2017年07月27日 14:25:18

诸葛目前提供多种数据采集方式,包括客户端代码埋点、服务端埋点、JS全埋点等。在此基础上,我们提供了新的JS可视化埋点功能,它具有设置灵活和开发量小的优点。

通过JS可视化埋点功能,产品、运营同学都可以直接在页面上进行简单圈选,以追踪用户的行为(定义事件),节省了开发时间。

注意:在使用JS可视化埋点之前,要求相应页面均接入诸葛JS SDK,同时打开可视化埋点开关,开关默认是关闭状态,需要您在页面接入SDK的代码 window.zhuge.load() 中,通过设置visualizer参数,手动开启可视化埋点开关。

visualizer: true  //可视化埋点开关


可视化埋点适用范围:

建议使用在 结构稳定的页面,如官网或活动页;在复杂的单页应用或动态生成页面中 不建议使用。

另外,如果页面中使用id规范标识元素,则适用于可视化埋点。


内容包括以下6部分

  • 进入可视化埋点功能

  • 创建事件

  • 查看事件

  • 编辑事件

  • 取消事件的可视化采集

  • 其他注意信息




1.进入可视化埋点功能


入口: 进入系统 →  左下角“数据接入”  →  JavaScript接入文档

点击”开始可视化埋点“按钮,进入可视化埋点功能


你可以直接填写要进行可视化埋点的页面URL,也可直接选择建议页面。


点击前往,进入访问页面的可视化埋点操作页,如下图:


2.创建事件

进入想要可视化埋点的页面后,点击右上角”创建事件“,开始创建事件!

2.1 第一步:选择1个元素

定义:页面上每个可点击的位置都可称之为元素

选择元素的目的是 定义--- 点击哪里,算做触发事件。

eg:点击按钮”注册“,即相当于触发某个事件

当选中某个具体的元素时,就可以开始定义事件了


2.2 第二步:创建事件

选中元素后,如下图,你可以直接给事件命名,点击保存 即可完成事件的创建

同时,为了帮助你了解该元素的点击情况,会默认展示最近7天的触发数据

2.3 创建事件的其他选项

用户在创建事件过程中,可以进行额外的设置,包含以下三项:

  • 选择当前页面或所有页面

  • 同类元素

  • 自定义属性


(1)当前页面 或 全部页面

作为创建事件时的选项,默认选项是“当前页面”,可根据需要进行调整

  • 当前页面:指仅在当前页面(URL) 点击相应元素 才能触发此事件

  • 全部页面:指在所有接入SDK的页面中 点击相应元素,都算作触发此事件

“全部页面”使用场景举例:

有很多个商品详情页,各页面中的加入购物车按钮不管从按钮文本、样式以及页面结构都是一致的,这种情况下,选择“所有页面”,即可将在这些页面加入购物车的行为,统一记为一个事件


(2)同类元素

在选择1个元素创建事件的基础上,可以通过添加“同类元素”来扩充使用场景

“同类元素”使用场景举例:

官网首页有两个登录按钮,一个在右上角,一个在页面底部,它们在业务角度可以视为同一个事件。这种情况可以先选择


添加同类元素具体方法

点击同类元素旁边的+号,即可添加同类元素

进入添加同类元素子功能后,默认是自动归类方式,可以切换为 手动归类方式。

  • 自动归类:将样式和结构均相同的元素 自动归类为同类元素

  • 手动归类:可手动在页面上选择想要归为一类的元素,自由性强

如果选择的元素满足要求,点击保存即可生效

(3) 自定义属性

在代码埋点中,可通过采集事件属性来为事件本身补充信息。在可视化埋点功能中,我们仍旧可以给事件添加属性。

自定义属性使用场景举例:

商品详情页有一个加入购物车按钮,你想采集用户加入购物车的行为,此时通过添加自定义属性,你可以将页面上显示的商品名称 以及 商品价格 都跟事件一起采集上来,支持进一步的细分筛选分析。

添加事件属性的方法

进入添加自定义属性子功能后,

按照提示,选中一个元素作为事件的属性,该元素的文本将成为属性值,你需要给该事件属性命名,保存后即可生效。在用户触发事件时,会同步采集该事件属性


添加成功后,该属性会出现在属性列表中。你可以在分析模块对它进行分析了


3.查看事件

在页面中,可以查看当前页面已经创建好的事件。

蓝框的元素都代表已经被定义为事件,鼠标悬浮在元素上,会显示对应事件名称


当然,在顶部工具栏的事件列表中,可以查看当前页面上通过可视化埋点功能创建的事件 和 所有页面上的相应事件。

  • 列表默认展示当前页面事件

  • 在列表中选择当前页面事件的某个事件,即在页面中 弹出进入该事件的编辑框

  • 如果在列表中选择某个不在当前页面的事件(该事件是在另一个页面创建的),将弹出跳转页面提示,同意后,可跳到对应页面进行编辑


4.编辑事件


既可以选择在页面上直接编辑,也可以在事件列表中编辑。

4.1编辑事件-页面上直接编辑

当鼠标悬浮在页面中蓝框的部分时,会显示对应的可视化事件名称

点击该名称,即可编辑对应事件


4.2 编辑事件-通过事件列表进行编辑

点击工具栏中事件列表的某一个事件,即可对该事件进行编辑




4.3 编辑事件的同类元素

在进入事件编辑状态后,可以进一步编辑事件的同类元素



4.4 编辑事件自定义属性

在进入事件编辑状态后,可以进一步编辑和删除事件的自定义属性



5.取消事件的可视化采集

你可以在页面右上方的事件列表中 取消事件的可视化采集




注意:

  • 在此处取消采集后,可视化埋点功能内的事件列表中将不再展示该事件,但其产生的事件数据仍可在分析模块使用,只是不会再通过可视化埋点方式采集新的数据。

  • 如果在全局都不想再使用和采集此事件,请到 数据接入-埋点管理-事件管理 中将相应事件隐藏或停止采集


6.需要注意的内容

6.1针对 readirectAfterTrack 参数说明

zhuge.load('此处填写您在诸葛申请的APP KEY', {
        redirectAfterTrack: true,//埋点后是否跳转   (选填,默认false)
        visualizer: true //启 可视化埋点(选填,默认false)
})

参数作用:当 redirectAfterTrack配置为true时,页面中的a标签(超链接)以及表单中submit和reset按钮,如果其默认当前页面跳转,则sdk会在用户触发点击后,暂时阻止页面跳转或提交,等待事件数据上传成功后再执行之前被阻止的操作,这样可以提高数据上传的稳定性。

如果页面中,对超链接或表单有自定义的JS操作,建议关闭该开关 ; 如果页面中基本没有自定义JS操作,同时对数据准确性有更高要求,建立打开redirectAfterTrack开关。


6.2可视化埋点与代码埋点的关系

二者只是两种不同的埋点方式,最终的数据存储和分析载体是 事件,即同一个事件,可以同时通过可视化埋点和代码埋点来采集数据,会根据事件名称自动判定。


6.3 事件重名的处理

情况一:

当前已存在名字为A的事件(没通过可视化方式采集),新创建一个名字为A的可视化事件,这种情况允许重名,选择使用相同的名字即代表 A对用户来说是一个事件,只是同时采用了代码埋点和可视化埋点进行数据采集

情况二:

当前已存在名字为A的可视化事件,此时如果仍要新创建一个名字为A的可视化事件,则不允许。因为相同名字的可视化事件视为同一个事件




    您需要登录后才可以回复