前端 数据埋点

常见的埋点

用户某个icon点击次数、观看某个视频的时长
 

埋点的作用

大数据杀熟，多次访问后涨价
大量用户在5分钟时发送了弹幕，判断这是视频的精彩瞬间，截取这一段来做推广
 

埋点分类

• 展现埋点：服务端记录响应的内容（页面展现的内容信息）
• 曝光埋点：屏幕有限，内容无限，记录用户实际看到的
• 交互埋点：记录用户点赞、播放、暂停等
   

数据监控（监控用户行为）

• PV（page view）：页面浏览/点击量
• UV（user view）：访问站点/新闻的不同IP地址人数
• 用户通过什么入口来访问该网页
• 用户在页面中触发的行为

知道了用户来源渠道，可以促进产品推广
知道了用户的页面停留时间，可以针对停留时间长的页面，放多点广告上去
 

性能监控（监听页面性能）

• 不同用户、系统、机型的首屏加载时间
• 白屏时间
• 请求响应时间
• 静态资源整体下载时间
• 页面渲染时间
• 页面交互动画完成时间

结果可以判断前端性能的好坏，针对性优化提高前端性能，提高用户体验

// 拿到Performance并且初始化一些参数
let timing = performance.timing,
    start = timing.navigationStart,
    dnsTime = 0,
    tcpTime = 0,
    firstPaintTime = 0,
    domRenderTime = 0,
    loadTime = 0;

// 根据提供的api和属性，拿到对应的时间
dnsTime = timing.domainLookupEnd - timing.domainLookupStart;  // DNS解析时间
tcpTime = timing.connectEnd - timing.connectStart;            // TCP建立连接时间
firstPaintTime = timing.responseStart - start;                // 首页白屏时间
domRenderTime = timing.domContentLoadedEventEnd - start;      // DOM渲染完成时间
loadTime = timing.loadEventEnd - start;                       // 页面load时间

 

异常监控（监控产品、系统异常）

• JavaScript异常监控
• 样式丢失异常监控

及时上报异常，避免线上故障发生
 

埋点上报

 

手动埋点

优：精细化自定义分析
缺：工程大、埋点位置多，产品、开发、运营要反复沟通，出错后重新埋点成本高

// 页面加载时发送埋点请求
$(document).ready(() => { ... })

// 按钮点击时发送埋点请求
$('button').click(() => { ... })

// 通过伪装成image对象，传递给后端，防止跨域
let img = new Image(1, 1);
let src = `http://aaa/api/test.gif?args=${encodeURIComponent(args)}`;
img.src = src;
                         
// css实现的埋点
.link:active::after {
  content: url('http://www.example.com?action=yourdata')
}

 

使用Gif上报的原因

• 防止跨域：一般接收打点的域名不是当前域名，接口会跨域，图片的src不会
• 防止页面加载阻塞
  • 创建link、script标签，需要插入到DOM中才会发送资源请求
  • 反复的操作DOM性能不好
  • 载入JS、CSS资源会阻塞页面渲染
• GIF比JPG/PNG体积小
  • 用1*1像素的透明Gif来上报
    • 1*1：最小的合法图片
    • 透明：不影响页面展示，节约体积（不用存储色彩空间数据）
       

可视化埋点

优：可视化交互、业务代码与埋点代码分离
缺：可以埋点的控件有限，不能手动定制

国外服务商：Mixpanel
国内服务商：TalkingData、诸葛IO、腾讯MTA
 

无埋点

优：只需加载一次埋点脚本SDK，后端进行过滤和计算有用的数据
缺：流量和采集数据大，服务器性能压力大

<script>
  var _hmt = _hmt || [];

  (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?xxxxxxxxxx你的百度keyxxxxxxx";
    
    var s = document.getElementByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  })();
</script>