一、埋点定义
所谓“埋点”，是数据采集领域(尤其是用户行为数据采集领域)的术语，指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。比如用户某个icon点击次数、观看某个视频的时长等等。埋点的技术实质，是先监听软件应用运行过程中的事件，当需要关注的事件发生时进行判断和捕获。
二、为什么需要埋点
数据生产-》数据采集-》数据处理-》数据分析挖掘-》数据驱动/用户反馈-》产品优化/迭代 上述是整个数据从产生到最终作用于产品优化上的过程。埋点是整个流程的开始点，终端提供商在收集到埋点数据之后，通过大数据处理、数据统计、数据分析、数据挖掘等加工处理，可以得到衡量产品状态的一些基本指标，比如活跃、留存、新增等大盘数据，从而洞察产品的状态，随着数据挖掘等技术的兴起，埋点采集到的数据在以下方面的作用也越来越凸显。
三、如何埋点
一般情况下，主要有3类埋点:展现埋点 +曝光埋点 +交互埋点。
1、展现埋点
定义展现其实是一个服务端的触发。服务端被触发后，用户侧将会展现什么内容，展现埋点需要记录的是页面展现的内容信息，即服务端下发的内容是什么(这些东西一定是当前页面主要内容，不包含一些交互信息)。
2、曝光埋点
哪些下发的内容被用户实际看到了。和展现埋点类似，由于屏幕有限，但内容可以无限。哪些内容被用户侧实际看到(曝光)，需要记录的是单个“内容”被看到。一系列被下发的内容，可以触发多次曝光埋点。
3、交互埋点
交互埋点表明的是功能/内容被用户“点击”了。从埋点时机来说，这个是展现 & 曝光的下游。记录对于我们提供的“服务”的“消费”情况。比如，一个页面，用户可以点击，那么我们需要记录相应的交互动作埋点;比一个视频可以点赞，我们也可以记录交互埋点;比如，一个视频可以播放暂停，我们也可以记录消费埋点。女，总体来说，就是，我们要记录 被看到的可交互功能/信息的“消费”数据。
四、埋点记录
关于埋点记录需要明确记录两个信息:点位信息、点位映射 点位信息:明确每个业务事件下的具体的参数信息，包含公共参数、业务参数 点位映射:每个埋点对应的业务含义。
五、如何埋点
1、手动埋点
手动埋点也叫代码埋点，他的本质其实就是用js代码拿到一些基本信息，然后在一些特定的位置返回给服务端比如:
域名:document.domainURLdocument.URL
页面标题:document.title
分辨率:window.screen.height & window.screen.width
颜色深度:window.screen.colorDepth
Referrer:document.referrer
客户端语言:navigator.language
可以通过performance 获取各个流程的时间以及性能 （performance 使用方法具体看 juejin.cn/post/738839…
拿到数据以后我们可以再提交，或者通过图片的方式去提交埋点内容
//页面加载时发送埋点请求
$(document).ready(function(){
//...这里存在一些业务逻辑
sendRequest(params);
});
//按钮点击时发送埋点请求
$('button').click(function(){
//这里存在一些业务逻辑sendRequest(params);
);
//通过伪装成Image 对象，传递给后端，防止跨域
let img =new Image(1,1);
let src =`http://aaaa/api/test.jpg?args=${encodeURIcomponent(args)}`;
img.src = src;
//css实现的埋点
.link:active::after{
content:url("http://www.example.com?action=yourdata");
<a class-"link”>点击我，会发埋点致据</a>
//data自定义属性，rangjs去拿到属性绑定事件，实现理点
//<button data-mydata-"{key:'uber_comt_share_ck',act: 'click',msg:{}}">打车</button>
这种埋点方式虽然能精准的监控到用户的行为，和网页性能等数据，但是你会发现，非常繁琐，需要大量的工作量，当然这部分工作也有人帮我们做了，比如像友盟、百度统计等给我们其实提供了服务。我们可以按照他们的流程便用手动埋点
2、可视化埋点
这种埋点方案，又叫无痕埋点，解放了前端手动操的工作量，其实本质就是用系统去插入本来需要手动插入的埋点，这种埋点方式由于自带技术壁垒，所以开发人员基本基本不用考虑，花钱即可，比较靠谱的服务商 国外的Mixpanel，国内较早支持可视化埋点的有TalkingData、诸葛I0，腾讯, MTA 等
3、无埋点
无埋点并不是没有任何埋点，所谓无只是不需要工程师在业务代码里面插入侵入式的代码。只需要简单的加载了一段定义好的SDK代码，技术门槛更低，使用与部署也简单，避免了需求变更，点错误导致的重新埋点。这也是大多网站的选择，因为实在太简单了 我们先来看看百度埋点长什么样子:
<script>
var _hmt=_hmt||[];
(function(){
var hm= document.createElement('script')
hm.src='https://hm.baidu.com/hm.js?<%-htmlNebpackPlugin.options.baiduCode %>
var s= document.getElementsByTaglame('script')[0]
s.parentNode.insertBefore(hm,s)})()
</script>
上图一段代码插入我们的html中,我们便能清晰的看到统计数据，省时省力，就是不省钱!但是缺点就是由于是自动完成，无法针对特定场景拿到数据，由后端来过滤和计算出有用的数据。导致服务器压力山大. 市面上埋点大多使用gif图向后端传输
使用GIF上报的原因
向服务器端上报数据，可以通过请求接口，请求普通文件，或者请求图片资源的方式进行。只要能上报数据，无论是请求GIF文件还是请求js文件或者是调用页面接口，服务器端其实并不关心具体的上报方式。那为什么所有系统都统一便用了请求GIF图片的方式上报数据呢? ·防止跨域 一般而言，打点域名都不是当前域名，所以所有的接口请求都会构成跨域，而跨域请求很容易出现由于配置不当被浏览器拦截并报错，这是不能接受的。但图片的src属性并不会跨域，并且同样可以发起请求。(排除接口上报) .防止阻塞页而加载，影响用户体验 通常，创建资源节点后只有将对象注入到浏览器DOM树后，浏览器才会实际发送资源请求。反复操炸DOM不仅会引发性能问题，而且载入js/css资源还会阻塞页面染，影响用户体验。但是图片请求例外。构造图片打点不仅不用插入DOM，只要在js中new出Image对象就能发起请求，而且还没有阻塞问题，在没有js的浏览器环境中也能通过img标签正常打点，这是其他类型的资源请求所做不到的。(排除文件方式) ·相比PNG/JPG，GIF的体积最小 最小的BMP文件需要74个字节，PNG需要67个字节，而合法的GIF，只需要43个字节。同样的响应，GIF可以比BMP节约41%的流量，比PNG节约35%的流量 并且大多采用的是1*1像素的透明GIF来上报1x1像素是最小的合法图片。而且，因为是通过图片打点，所以图片最好是透明的，这样一来不会影响页面本身展示效果，二者表示图片透明只要便用一个二进制位标记图片是透明色即可，不用存储色彩空间数据，可以节约体积。
