前端三种埋点
埋点到底是什么呢？
引用自百科的原话是，埋点分析网站分析的一种常用的数据采集方法。因此其本质是分析，但是靠什么分析呢？
靠埋点得到的数据。通俗来讲，就是当我想要在某个产品上得到用户的一些行为数据用来分析，就可以用埋点了。举个栗子，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，运营可自主选择，操作便捷。
缺点：无法定制详细的业务数据，比如 金额、商品数量等，该类数据需要实时变化；
需要统一规范，无法用在不同的设备上，比如某些特殊的设备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。
三种埋点的区别
以百度举例： 当用户点击百度一下的时候，无埋点和可视化埋点可以获取的信息有某个时刻、某个设备进行了一次搜索，甚至可以获得部分搜索信息等，但是用户在输入搜索信息时，是否进行了修改、反复删除重新输入几次等深度的业务信息，无埋点和可视化埋点是统计不到的，则需要代码埋点。
App可视化埋点方案
背景
目前统计已经是一个产品常见的需求，尤其在业务模式探索的前期，埋点功能更是必不可少的功能，下面将介绍最简单的app全埋点方案！
什么是数据埋点
数据埋点是一般项目采用统计UV，PV，Action，Time等一系列的数据信息，对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。
为什么要数据埋点
产品或运营分析人员，基于埋点数据分析需要，对用户行为的每一个事件进行埋点布置，并通过SDK上报埋点的数据结果，进行分析，并进一步优化产品或指导运营。
数据埋点包括哪些
这里有我之前写的一篇文章App优质精准的用户行为统计和日志打捞方案
地址：http://blog.csdn.net/sk719887916/article/details/50931485
数据埋点采集模式
自动埋点
App通过代理，调用Sdk相关API，进行的将数据埋点上报的模式.
无痕埋点
无需通过专门提供代理类，直接由sdk提供相关接口，或者通过编译工具，预编译替换代码等，直接由sdk全部负责采集上报
可视化埋点
可视化埋点指 前端或者app端基于dom 元素和控件所精准自动埋点的上报的方案。
对比分析：
自动埋点：
缺点：
1 开发人员工作量大，需对业务提供唯一的ID，来区分每一个业务，无论是否提供sdk代理，业务开发人员至少需要多次调用sdk相关API.
2 业务人员和产品沟通成本提高，需要对具体业务制定相关的业务标识，以便于产品分析和统计
优点：
产品运营工作量少，对照业务映射表，就能分析出还原相关业务场景， 数据比较精细，无需大量的加工和处理。
无痕埋点
缺点：
1 sdk开发人员需提供一套无痕埋点技术成品，包括能正确获取PV，UV，ACtion,TIme等多项统计指标。前期技术投入大。
2 数据量大，需后端落地进行大量处理，并由产品进行自我还原业务员场景。 无论采用智能系统平台，还是通过原生的数据库查询数据，都是一种大量的分析精力。
优点：
1 开发人员工作量小，无需对业务标识进行唯一区分，由sdk自动进行生成，ID规则由sdk和产品进行约定。减少业务人员的沟通成本和使用步骤。
2 数据量全面，覆盖面广，产品可按需进行分析。做到毫无遗漏。
3 支持动态页面和局部动效的统计。
可视化埋点
优点：
1 相对数据量而言
相比较于无埋点相而言对较低，但是这个可视化元素的识别技术是客户端或者前端所要实现的，唯一id生成也无需客户端去自定义规则，这套生成规则由相关产品在自动化工具的情况下生成配置表，下发到客户端，再由客户端按坑就班到相关界面去实现。
2 数据量相对精确
缺点：
1 可视化工具的平台的搭建，静态页面的元素识别都需要额外开发。
2 动态效果可能会遗漏。
实现方案：
埋点需求可参考我之前的文章：
自动埋点实际上也是，提供一个base类，由业务类继承base类，在base里面做相关统计api调用，
可参考我的github:https://github.com/Tamicer/SkyMonitoring
核心实现：
以android作为列子：
提供自动遍历元素 并能扑捉点击的控件的activity, 并能在生命周期统计pv的打开和关闭，调用我开源的SkyMonitoring的对应的api.
复写dispatchTouchEvent(MotionEvent ev) 事件函数，确定被点击的view的相关位置，并生成唯一的ID，企业级app都是从服务器下发对应的ID，对应页面去调用埋点sdk Api，实现事件行为TcStatInterface.initEvent(path.viewTree);。
这个path就是view的路径，页面的深度路径，包括打开和关闭sdk在SkyMonitoring中已能自动获取。
本次demo是id生成规则是按照 :包名+ Activity+ Viewgroup+ Layout+ view + View index + viewID实现的。
业务直接去继承TamicActivity即可，就能去实现所有可视化view的埋点功能。
代码如下：
“`
public abstract class TamicActivity extends AppCompatActivity {
private int statusBarHeight; View rootView; String rootViewTree; String bigDataPrefix; String bigDataIngorePrefix; String bigDataEventPrefix; private String TAG = "LYK"; @Override public void onAttachedToWindow() { super.onAttachedToWindow(); //获取到根节点的view rootView = getWindow().getDecorView(); //控件在视图树上的根路径 rootViewTree = getPackageName() + "." + getClass().getSimpleName(); //前缀名 bigData bigDataPrefix = "Tamic_test"; //前缀名 bigData_ bigDataIngorePrefix = bigDataPrefix + ""; //前缀名 bigdata_ignore bigDataEventPrefix = bigDataIngorePrefix +"Igmore"; } @Override protected void onResume() { super.onResume(); TcStatInterface.recordPageStart(TamicActivity.this); } @Override protected void onPause() { super.onPause(); TcStatInterface.recordPageEnd(); } @Override protected void onDestroy() { super.onDestroy(); // APP退出 TcStatInterface.recordAppEnd(); } @Override public boolean dispatchTouchEvent(MotionEvent ev) { if(ev.getAction() == MotionEvent.ACTION_DOWN){ ViewPath path = findClickView(ev); if(path != null) { Log.e(TAG, "path -->" + path.viewTree); TcStatInterface.initEvent(path.viewTree); } } return super.dispatchTouchEvent(ev); } private ViewPath findClickView(MotionEvent ev) { Log.e(TAG, "bigdata-->findClickView"); ViewPath clickView = new ViewPath(rootView, rootViewTree); return searchClickView(clickView, ev, 0); } private ViewPath searchClickView(ViewPath myView, MotionEvent event, int index) { ViewPath clickView = null; View view = myView.view; if (isInView(view, event)) { myView.level++; if (myView.level == 2 && !"LinearLayout".equals(view.getClass().getSimpleName())) { myView.filterLevelCount++; } if (myView.level > myView.filterLevelCount) { myView.viewTree = myView.viewTree + "." + view.getClass().getSimpleName() + "[" + index + "]"; } Log.i(TAG, "bigdata-->tag = " + view.getTag()); if (view.getTag() != null) { // 主动标记不需要统计时，不进行自动统计 String tag = view.getTag().toString(); if (tag.startsWith(bigDataIngorePrefix)) { return null; } else if (tag.startsWith(bigDataPrefix)) { if (tag.startsWith(bigDataEventPrefix)) { myView.specifyTag = tag.replace(bigDataEventPrefix, ""); } return myView; } } if (view instanceof ViewGroup) { if (view instanceof AbsListView) { Log.i(TAG, "bigdata-->AbsListView "); return null; } ViewGroup group = (ViewGroup) view; int childCount = group.getChildCount(); if (childCount == 0) { return myView; } for (int i = childCount - 1; i >= 0; i--) { myView.view = group.getChildAt(i); clickView = searchClickView(myView, event, i); if (clickView != null) { return clickView; } } } else { clickView = myView; } } return clickView; } private boolean isInView(View view, MotionEvent event) { if (view == null || view.getVisibility() != View.VISIBLE) { return false; } int clickX = (int) event.getRawX(); int clickY = (int) event.getRawY(); int[] location = new int[2]; view.getLocationOnScreen(location); int x = location[0]; int y = location[1]; int width = view.getWidth(); int height = view.getHeight(); return clickX > x && clickX < (x + width) && clickY > y && clickY < (y + height); }
}
App项目集成使用，初始化url和相关统计配置字典，这个字典可以从服务器下发下来，我本次只是通过简单的本地文件做实践。
public class StatAppliation extends Application { @Override public void onCreate() { super.onCreate(); // you app id int appId = 21212; // assets String fileName = "my_statconfig.json"; String url = "https://github.com/Tamicer/TamicAppMonitoring"; // init statSdk TcStatInterface.initialize(this, appId, "you app chanel", fileName); TcStatInterface.setUrl(url); TcStatInterface.setUploadPolicy(TcStatInterface.UploadPolicy.UPLOAD_POLICY_DEVELOPMENT, TcStatInterface.UPLOAD_TIME_ONE); } }
可视化也可以通过aop插桩实现，但是实现起来对代码的入侵性太高，这里不做介绍。
aop插桩对碎片化fragment支持比较好。对这块的介绍可看我以前在公众号推送的一篇文章
：AOP编程之AspectJ实战实现数据无痕埋点
