前端的数据埋点请求

1. 埋点是什么

   数据埋点是一种常用的数据采集方法，方便产品/运营系统性的统计分析复杂的用户数据。我们在App端所设置的自定义事件，就是通过数据埋点的方式，实现对用户行为的追踪，以及记录行为发生的具体细节。

   通常情况下，我们会对一些关键节点、关键按钮进行监测，比如关键路径的转化率。另外，还可以通过埋点统计核心业务数据。以电商类App为例，在提交订单环节，将用户购买的商品名称、类别、价格等明细数据进行上报，便于后续分析用户行为与洞察用户偏好。

   百度百科

   埋点分析，是网站分析的一种常用的数据采集方法。数据埋点分为初级、中级、高级三种方式。数据埋点是一种良好的私有化部署数据采集方式。

   作用：工作中，用于前端监控，比如曝光等等，谷歌和百度的都是用的1x1像素的透明gif图片；

2. 为什么通常在发送数据埋点请求的时候使用的是1x1像素的透明gif图片？

   • 能够完成整个HTTP请求+响应（尽管不需要响应内容）。
   • 相比XMLHttpRequest对象发送GET请求，性能上更好。
   • 触发GET请求之后不需要获取和处理数据、服务器也不需要发送数据。
   • 跨域友好。
   • 不会阻塞页面加载，影响用户的体验，只要new Image对象。
   • GIF的最低合法体积最小（最小的BMP文件需要74个字节，PNG需要67个字节，而合法的GIF，只需要43个字节）。

   示例

   <script type="text/javascript">
     const thisPage = window.location.href;
     const referringPage = (document.referrer) ? document.referrer : 'none';
     const beacon = new Image();
     beacon.src = `http://www.example.com/logger/beacon.gif?page=${encodeURI(thisPage)}&ref=${encodeURI(referringPage)}`;
   </script>;