前端埋点初探

埋点究竟是什么

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

咱们能够看出，充分的埋点数据，有助于准确的分析用户的行为，为产品的调整提供方向。

怎么埋点

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

1. 代码埋点
2. 无埋点
3. 可视化埋点（可认为是无埋点的一种）

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

1. 获取数据
2. 展现数据
3. 分析数据

充分准确的埋点是第一步，对后续的展现及分析都有重要的意义，所以本文重点介绍该方面。

埋点类别详解

1. 代码埋点

• 优势：监控用户行为，监测数据准确
• 缺点：工做量大，须要手动在须要埋点的地方进行埋点，所以须要侵入业务代码，好比点击事件的回调函数、页面的生命周期、ajax回调等。

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

//命令式
$('button').click(()=>{
    record(data);
});
//声明式
<button data-record = '{key:"recordTest",data:"recordData"}'>记录</button>
复制代码

• 命令式埋点：在一些事件操做的回调函数中进行埋点，埋点的数据和方法可能多种多样的，好比图片上带数据，ajax发送数据等。
• 声明式埋点：将埋点信息封装在自定义属性中，经过sdk识别自定义属性而后获取埋点数据。

2. 无埋点

• 优点：不须要关注埋点逻辑
• 缺点：给数据传输增长压力、没法定制

无埋点统计数据基本流程

图片转至该文章

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

无埋点sdk执行阶段

<script type="text/javascript">
var _bury = _bury||[];
_bury.push(["_testData","网站标识"]);
(function(){
    var jsnode = document.createElement('script');
    jsnode.type='text/javascript';
    jsnode.async=true;
    //这里填入js sdk连接
    jsnode.src= 'xxxxxxx/bury_test.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(jsnode,s);
})
</script>
复制代码

经过在页面或者基础脚本中集成这段代码，能够在对应的页面上引入咱们的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('&');
})
复制代码

经过以上方法，能够获取一些基本的页面数据，更多详细的数据，能够根据具体的业务需求进行添加。 如何将采集到的数据进行上报呢，须要根据具体的状况来分析了，若是没有跨域的话，最简单的固然是ajax了。可是不少sdk都涉及到跨域了，目前主流的一种方法是用js脚本建立Image对象，将image的src指向后端脚本，并将数据拼接上。

3. 可视化埋点

• 优势：经过集成sdk，运营可自主选择，操做便捷。
• 缺点：
• 1. 没法定制详细的业务数据，好比 金额、商品数量等，该类数据须要实时变化；
• 2. 须要统一规范，没法用在不一样的设备上，好比某些特殊的设备imei并不能识别。

可视化埋点与代码埋点的对比

图片来自网络

目前不少商用软件好比Mixpanel、TalkingData、诸葛IO、腾讯MTA等均可以用来可视化埋点，用户仅须要点击想要监测的元素，而后对该埋点起个对应的名字，并给个编号，就进行了埋点。
可视化埋点可能是利用xpath，是在xml文档中查找信息的语言，以下图所示

经过上图方法，获得的xpath为//*[@id="1"]/div/div[2]/p[1]
若是将其换作dom的选择器，则为：#1>div>div:nth-of-type(2)>p:nth-of-type(1)，由此，能够定位到固定的DOM节点

如何获取xpath呢，这里能够提供一种方法可供参考：

var getPath = function(elem){
    if(elem.id != ''){
        return '//*[@id=\"'+elem.id+'\"]';
    }
    if(elem == document.body){
        return '/html/'+elem.tagName.toLowerCase();
    }
    var index = 1,siblings = elem.parentNode.childNodes;
    for(var i = 0,len = siblings.length;i<len;i++){
        var sibling = siblings[i];
        if(sibling == elem){
            return arguments.callee(elem.parentNode)+'/'+elem.tagName.toLowerCase()+'['+(index)+']';
        }else if(sibling.nodeType==1&&sibling.tagName == elem.tagName){
            index++;
        }
    }
}
复制代码

经过上述方法，当咱们点击某个元素时，将触发的元素event.target传入，便可获得完整的xpath。

三种埋点的区别

以百度举例：
当用户点击百度一下的时候，无埋点和可视化埋点能够获取的信息有某个时刻、某个设备进行了一次搜索，甚至能够得到部分搜索信息等，可是用户在输入搜索信息时，是否进行了修改、反复删除从新输入几回等深度的业务信息，无埋点和可视化埋点是统计不到的，则须要代码埋点。

数据分析处理

针对埋点的数据进行分析处理，我认为将两个维度的任意组合便可，两个维度我将其定义为客观维度和主观维度，客观维度好比：时间、用户id、设备id、地理位置、渠道等；主观维度好比：触发事件、触发次数、入口来源、异常集合及次数等。
两个维度任意组合，能够组成任意统计数据，好比：
1月份某个页面的访问量统计、2月份某个设备购买的图书数量、3月份某个用户在某个页面用某个设备点赞的次数...

初入掘金，不足之处还请海涵