前端埋点主要是为了服务运营人员采集用户行为数据, 进行后续的数据分析工作.
前端监控和埋点能做什么
数据监控(用户行为)
pv,uv
记录操作系统
用户在每一个页面的停留时间(离开页面, 进入页面)
用户进入的入口
用户在相应页面的触发行为, 点击按钮
性能监控 (JS 中的 performance)
用户的首屏加载
http 请求响应时间
页面渲染时间
页面交互动画完成时间
关键代码
- let timing = performance.timing,
- start = timing.navigationStart,
- dnsTime = 0,
- tcpTime = 0,
- firstPaintTime = 0,
- domRenderTime = 0,
- loadTime = 0;
- //DNS 解析时间
- dnsTime = timing.domainLookupEnd - timing.domainLookupStart;
- //TCP 建立时间
- tcpTime = timing.connectEnd - timing.connectStart;
- // 首屏时间
- firstPaintTime = timing.responseStart - start;
- //dom 渲染完成时间
- domRenderTime = timing.domContentLoadedEventEnd - start;
- // 页面 onload 时间
- loadTime = timing.loadEventEnd - start;
| 域名( domain ) | JavaScript | document.domain ; 获取的值如:"domain" : "127.0.0.1" |
| URL (url) | JavaScript | document.URL; 获取的值如:"url" : "http://127.0.0.1:3000/" |
| 页面标题 (title) | JavaScript | document.title; 获取的值如:"title" : "Express"; |
| 上一跳 url,referrer (referrer) | JavaScript | document.referrer; 获取的值如:"referrer" : "" ; |
| 分辨率 (height:sh; width: sw) | JavaScript | Windows.screen.height & width; 获取的值如:"sh" : "1050" ,"sw" : "1680"; |
| 颜色深度 (cd) | JavaScript | Windows.screen.colorDepth; 获取的值如:"cd" : "32"; |
| 客户端语言 (lang) | JavaScript | navigator.language; 获取的值如:"lang" : "zh-CN"; |
| user-agent header(userAgent) | JavaScript | navigator.userAgent; 获取的值如:"userAgent" : "Mozilla/5.0 (Windows NT 6.1; Win64; x64) ApplewebKit/537.36 (Khtml, like Gecko) Chrome/48.0.2564.82 Safari/537.36"; |
- // 页面加载时发送埋点请求
- $(document).ready(function(){
- // ... 这里存在一些业务逻辑
- sendRequest(params);
- });
- // 按钮点击时发送埋点请求
- $('button').click(function(){
- // 这里存在一些业务逻辑
- sendRequest(params);
- });
- // key 表示埋点的唯一标识; act 表示埋点方式
- <button data-stat="{key:'111', act:'click'}">埋点</button>
- https://zhuanlan.zhihu.com/p/27659302
- http://web.jobbole.com/94895/
来源: http://www.bubuko.com/infodetail-3350214.html