前端埋点和前端监控软件怎么选(前端业务的监控与埋点数据的上报)
这里,我们还是主要探讨业务数据的上报,关于页面性能和错误日志的收集上报,不在此讨论范围内。
我们前端团队的业务数据上报功能,主要集中在新闻客户端内部,依赖于新闻客户端提供的特性,因此其他团队的前端上报组件是没办法适应我们的需求的,这里我本人基于之前上报的经验,开发了一套完整的前端业务埋点数据上报组件。
在开发这套组件之前,我们要先明确几个问题:
- 哪些数据是可以自行收集的,哪些数据需要开发者埋点上报;
- 开发者进行数据埋点的方式有哪些?
- 如何保障设备的唯一性;
- 跳转前的上报丢失如何处理;
- 在新闻客户端、微信、QQ 等环境都可以进行上报;
- 单页面应用中,切换页面时如何上报;
- 用户并未退出页面,而是切换了 APP,又重新切换回来怎么办?
- 是否支持自定义上报的方式?
上面的这些疑问,我们一一进行了解决。
1. 可以自行收集的信息与设备唯一性很多信息都是可以自行收集,而不用每个开发者都收集一遍,例如基于新闻客户端提供的能力,可以拿到设备信息,已登录用户的个人信息,ua 等,都是可以自行收集的,然后存储起来。
不过在新闻客户端外,就无法拿到设备信息了。我在这里,通过前端生成一个尽量唯一 的码来标识设备,并存储到 cookie 和 localStorage 中,若存在则使用,若不存在则生成一个新的。以此来保证设备的唯一性。
let uid = cookie.getCookie('wzpuser') || localStorage.getItem('wzpuser');
if (!uid) {
uid = 'gh' Date.now() (Math.random() '').substr(-6);
cookie.setCookie('wzpuser', uid, 360);
localStorage.setItem('wzpuser', uid);
}
this.__data.uid = uid;
return Promise.resolve(this.__data);
开发者可以更加关注在页面和用户行为上。
2. 开发者进行数据埋点的方式有哪些?主要有 2 种方式,一个是开发者的主动上报:
reporter.send({
pagename: 'mainpage',
event_id: 'banner_click',
});
还有一种方式,是在 html 元素上添加 data-reporter 属性,然后进行事件冒泡,若遇到 data-reporter 后,则进行上报;若一直冒泡到 document 上都没有该属性,则不上报。
// 渲染每一个专场
const renderItem = (item: SpecialItem) => (
<div
data-reporter={JSON.stringify({
pagename: 'mainpage',
event_id: 'item_click',
})}
>
<div
className="cover"
onClick={() => handleAnswer(item.ename, item.zhname, item)}
>
</div>
);
我们经常需要上报点击某个链接的 pv,但通常会存在上报还没有完成,页面已经卸载了,导致上报失败。
针对这种情况,我是在跳转前,先存储到本地,等下次重新回到这个页面时,将存储的数据进行上报。为了方便传入和存储,我对字段也进行了过滤,没有数据的字段全部去掉,只上报有数据的字段。
reporter.send(
{
pagename: 'mainpage',
event_id: 'link_click',
},
'save'
); // 先进行存储
window.location.href = 'https://www.xiabingbao.com';
新闻客户端中提供了一些获取设备信息和用户信息的能力,而微信、QQ、浏览器等环境,只能使用前端的一些骚操作了,例如分析 cookie 中的字段,ua 中的一些字段等等。
这里我也编写了一个工具方法 https://github.com/wenzi0github/utils ,将这些能力独立出来。欢迎 star。
5. 单页面应用中,切换页面时如何上报这个问题没有很好地解决,虽然能监听到 history 路由和 hash 路由的变化( 前端中的 hash 和 history 路由 ),但页面的名称需要提前定义好,而组件是不知道的,因此这里交给开发者开进行监听路由的变化并上报数据。
// 每个hash路由的PV上报
router.afterEach((to) => {
// to为当前已打开的页面,to.name为在router/index.ts中设定的name
reporter.send({
pagename: to.name,
event_id: 'pv',
});
});
用户没有退出页面,而是使用了系统级的 home 键,进行了 APP 的切换,其实用户也是真实的离开了,若用户重新回来,其实 page view 应该是要 1 的,然而页面没有刷新,会产生丢失 PV 的情况。
这里我们可以监听页面的可见性,当页面重新可见时,我们就把 pv 1。当然还有一种情况要考虑到:用户可能只是在多个 APP 中切换,当前页面只是其中的过客而已,而用户并没有真的进入到这个页面中。因此我们需要设置下重新上报 PV 的条件:
- 距离上次可见时有 30 分钟左右;
- 当前可见已有 5 秒以上;
let lastShowTime = 0; // 上次可见时的时间
const visibility = new PageVisibility();
visibility.visibilityChange((isShow) => {
let timer;
if (isShow && Date.now() - lastShowTime >= 1000 * 60 * 30) {
// 页面可见时
timer = setTimeout(() => {
report.send({
pagename: 'mainpage',
event_id: 'pv',
});
}, 5000); // 5秒后上报
} else {
clearTimeout(timer);
}
});
组件中提供了 img 标签上报和 post 方式的方式,如果这两种方式也不满足上报要求,可以自定义上报方式,并上报到对应的服务器上。
const report = new Report({
actid: 56,
adapter: (data) => {
// 要上报的数据
console.log(data);
},
});
通过这次业务埋点数据的上报,也了解了很多基础功能的实现,同时还有如何提供自定义的能力。
整理这个的是一些大企业的大佬,认真地和他们学习了很多经验以及获取了很多直观的资料,现在全部拿出来奉献给大家!
想系统学习WEB前端的朋友,可以加这边的交流裙(1146649671)学习资料、面试资料、视频资源,资源给你们拉满,不见不散哦~
,免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com