前端监控和前端埋点

数据监控与前端埋点，傻傻分不清楚。什么是前端监控，什么是数据埋点。为什么把他们两个放在一起，他们之间是什么关系，这个问题我探究了很久。前端监控是在理念，前端埋点是实施方法。

  • 前端监控：我们需要掌握用户的数据，通过用户的行为数据，设备数据，浏览数据。对这些数据进行分析与处理，这样才能更好的解决公司未来的发展需要以及广告投入的百分比。
  • 前端埋点：为了实现上述的前端监控理念，我们就需要一些解决方案。前端埋点就是我们的解决方案。如何埋点，就要根据具体的情况进行埋点。

现有的前端埋点方案总结

手动埋点

  • 命令式埋点

顾名思义，我们手动的从浏览器获取用户数据信息（跳转网站，浏览时间，设备信息等），并通过ajax发送给后台。后台拿到前端埋点搜集的数据后，对数据进行分析，从而得到用户行为数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    这是一个前端埋点测试页面
</body>
<script> (function() {
     console.log(132) let data = {
    } data.url = document.URL //文档当前地址 data.domain = document.domain //文档的当前域名 data.referrer = document.referrer //文档的源地址 data.title = document.title //文档题目 data.innerHeight = window.innerHeight data.innerWidth = window.innerWidth console.log(data) }()) </script>
</html>

上面的就是一个埋点。在这里埋点一般都是为了获取用户设备信息、跳转信息、首屏加载速度、白屏时间等。

  • 声明式埋点 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    这是一个前端埋点测试页面
    <button id='button'>点击埋点</button>
</body>
<script> let button = document.getElementById('button') button.addEventListener('click',() => {
     let data = {
    } a.url = document.URL //文档当前地址 data.domain = document.domain //文档的当前域名 data.referrer = document.referrer //文档的源地址 data.title = document.title //文档题目 data.innerHeight = window.innerHeight data.innerWidth = window.innerWidth console.log(data) },false) </script>
</html>

手动埋点特点

  • 优点
    • 灵活：面对任何业务情况都可以进行埋点，获取到对应的数据。
  • 缺点
    • 页面卡顿：每一个埋点都需要进行一次ajax的发送，那么问题来了，对于一个大型页面而言，他本身就请求很多的数据。对于V8引擎而言，他并行请求的数量是有限的，超过请求上限的请求将会在队列中存放等待。
    • 无法解耦：如上图代码所示，可以发现，这种埋点的方式是在业务代码中进行埋点。在一个足够大的系统情况下，埋点完全嵌套在业务代码中,在多出埋点不好维护。

无埋点

顾名思义，没有埋点，那么没有埋点又是怎么埋点的呢？我理解了很久。

无埋点：就是在不在业务逻辑中进行埋点代码的书写，而是引入埋点sdk（埋点脚本）来实现埋点的。

常见的无埋点

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    这是一个前端埋点测试页面
    <button id='button'>点击埋点</button>
</body>
<script> 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>
</html>

上述代码会创建一个scripyt的脚步并引入埋点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发送数据到对应的接口。但是为了解决页面请求过多的情况，通常使用js脚本创建image对象，在让image脚本src指向后端接口，并拼接上数据。

无埋点的特点

  • 优点

    • 方便维护：应为是通过sdk的形势引入的，这样只需要维护对应的脚本即可。
    • 解耦性好：埋点代码没有与业务代码相互嵌套。

  • 缺点

    • 给数据传输增加压力、无法定制
    • 流量和采集的数据过于庞大，服务器性能压力山大

可视化埋点

通过集成封装sdk的形式，封装成一可视化的操作界面。目前很多商用软件比如Mixpanel、TalkingData、诸葛IO、腾讯MTA等都可以用来可视化埋点，用户仅需要点击想要监测的元素，然后对该埋点起个对应的名字，并给个编号，就进行了埋点。

如何操作这里我没有深究，在后期的学习中我会对其进行一个探究，并上传到博客和大家分享。

总结

现在大部分的产品都有做埋点，更具不同的需求使用不同的埋点方式。