前端监控与前端埋点(初探)

前端监控和前端埋点

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

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

现有的前端埋点方案总结

手动埋点

  • 命令式埋点

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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
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>

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

  • 声明式埋点

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
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>Documenttitle>
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等都可以用来可视化埋点,用户仅需要点击想要监测的元素,然后对该埋点起个对应的名字,并给个编号,就进行了埋点。

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


总结

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

你可能感兴趣的:(javascript,大数据)