什么是页面埋点？
页面埋点应该是大家最常写的监控了，一般起码会监控以下几个数据：
- PV / UV
- 停留时长
- 流量来源
- 用户交互
为什么要埋点？现在的互联网公司越来越关注转化、新增、留存，而不是简单的统计PV、UV。而完整的数据采集是一切的前提。埋点包括在IOS、Android、H5、小程序等前端埋点，也包括后端业务埋点。
手动埋点(代码埋点)
纯手动写代码，调用埋点SDK的函数，在需要埋点的业务逻辑功能位置调用接口上报埋点数据，友盟、百度统计等第三方数据统计服务商大都采用这种方案；
手动埋点让使用者可以方便地设置自定义属性、自定义事件。所以当你需要深入下钻，并精细化自定义分析时，比较适合使用手动埋点。
手动埋点的缺陷就是，项目工程量大，需要埋点的位置太多，而且需要产品开发运营之间相互反复沟通，容易出现手动差错，如果错误，重新埋点的成本也很高。这会导致整个数据收集周期变的很长，收集成本变的很高，而且效率很低。因为手动埋点需要开发人员完成，所以每次有埋点更新，或者漏埋点，都需要重新走上线发布流程，更新成本也高，对线上系统稳定性也有一定危害。
手动埋点的技术本质是什么呢？
我们看看从javascript中能轻松获得哪些信息：
- 域名：document.domainURLdocument.URL
- 页面标题：document.title
- 分辨率：window.screen.height & window.screen.width
- 颜色深度：window.screen.colorDepth
- Referrer：document.referrer
- 客户端语言：navigator.language
除了上面的列举的常规信息以外，还有大量的业务数据，都需要通过手动写javascript去实现。
代码手动埋点常用的方式有以下几种：
命令式
$(document).ready(()=>{// ... 这里是你的业务逻辑代码sendData(params); //这里是发送你的埋点数据，params是你封装的埋点数据});// 按钮点击时发送埋点请求$('button').click(()=>{// ... 业务逻辑sendData(params); //同上});
这里的sendData有很多种方式，比如基于ajax发送json数据，或者使用url连接带上params，或者使用一像素图片带上数据，在或者使用head带上埋点也可以。封装方式多种多样。
声明式
打车这里声明了自定义属性data-mydata，你可以在你的SDK中去扫描和识别这些自定义属性，并解析封装数据，在SDK中按照自定义规则去绑定事件并发送埋点数据。
前端框架式
如果使用Vue或者React等前端框架，这些框架都有自己的各种生命周期，为了减少重复性的手动埋点次数，可以在各个生命周期位置，根据你的需求封装你所需的埋点。比如你是SPA单页应用，你希望在每一个页面的componentDidMount埋点，并由此确定用户已经打开了页面。
css埋点：
.link:active::after{ content: url("http://www.example.com?action=yourdata");}点击我，会发埋点数据这里使用了很巧妙的css的某些特征，这些可以触发发送请求的特征。
