“用数据说话,从埋点开始”-带你理解前端的三种埋点

埋点到底是什么呢?

引用自百科的原话是,埋点分析网站分析的一种常用的数据采集方法。因此其本质是分析,但是靠什么分析呢?靠埋点得到的数据。通俗来讲,就是当我想要在某个产品上得到用户的一些行为数据用来分析,就可以用埋点了。举个栗子,A用户把某本书加到了自己的书架了,我可以通过该用户书架的书的类型,由此分析该用户的阅读偏好,更深一步,通过对用户偏好的判断,我可以自动像用户推荐同类型的书,或者可以根据用户加入书架的时间,判断用户的碎片时间,在此时间段,可以定点向用户推送一些消息等。

我们可以看出,充分的埋点数据,有助于准确的分析用户的行为,为产品的调整提供方向。

 

欢迎关注我们的微信公众号:Web前端Talk  获取更多好的前端内容

“用数据说话,从埋点开始”-带你理解前端的三种埋点

 

怎么埋点呢?

要想知道埋点的方法,首先要了解埋点的分类,目前埋点主要分为三大类,分别是:

代码埋点

无埋点

可视化埋点(可认为是无埋点的一种)

 

已经知道了埋点的分类了,那么具体怎么实施呢,因其依靠数据,因此其步骤有三:

获取数据

展示数据

分析数据

 

充分准确的埋点是第一步,对后续的展示及分析都有重要的意义,因此本文重点介绍该方面。

 

埋点类别详解

1. 代码埋点

优点:监控用户行为,监测数据准确

缺点:工作量大,需要手动在需要埋点的地方进行埋点,因此需要侵入业务代码,比如点击事件的回调函数、页面的生命周期、ajax回调等。

 

常用代码埋点类型分两类,分别为命令式、声明式,可查看如下举例。

“用数据说话,从埋点开始”-带你理解前端的三种埋点

“用数据说话,从埋点开始”-带你理解前端的三种埋点

命令式埋点:在一些事件操作的回调函数中进行埋点,埋点的数据和方法可能多种多样的,比如图片上带数据,ajax发送数据等。

声明式埋点:将埋点信息封装在自定义属性中,通过sdk识别自定义属性然后获取埋点数据。

 

2. 无埋点

优势:不需要关注埋点逻辑

缺点:给数据传输增加压力、无法定制

 

无埋点统计数据基本流程

“用数据说话,从埋点开始”-带你理解前端的三种埋点

通常,当页面打开时,页面中的埋点js片段会被执行,这段js代码会异步加载一个js文件,该文件就是无埋点的sdk,会被浏览器请求到并执行,通过该脚本进行数据收集,当数据收集完成后,可以利用一些方法将数据传递给后端进行收集整理。

 

无埋点sdk执行阶段

“用数据说话,从埋点开始”-带你理解前端的三种埋点

通过在页面或者基础脚本中集成这段代码,可以在对应的页面上引入我们的bury_test脚本,而bury_test脚本就是我们的埋点sdk。

 

埋点sdk

(function() { var buryData = {}; //常用信息 if (document) { //域名 buryData.domain = document.domain || ''; //标题 buryData.title = document.title || ''; //访问来源 buryData.referrer = document.referrer || ''; //分辨率 buryData.sw = window.screen.width || 0; buryData.sh = window.screen.height || 0; //设备信息 buryData.lang = navigator.language || ''; buryData.ua = navigator.userAgent || ''; //页面加载时间 buryData.loadT = window.performance.timing.domContentLoadedEventEnd - window.performance.timing.navigationStart || 0; } //整理埋点数据 var arg = []; if (buryData) { for (var i in buryData) { arg.push(encodeURIComponent(i) + '=' + encodeURIComponent(buryData[i])); } } var args = arg.join('&'); })

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpfzzp.html