怎么在vue项目中实现前端埋点-创新互联
本篇文章为大家展示了怎么在vue项目中实现前端埋点,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
目前成都创新互联已为上千的企业提供了网站建设、域名、雅安服务器托管、网站改版维护、企业网站设计、高邮网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。Vue的优点
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。
埋点方案的确定。业界的埋点方案主要分为以下三类:
代码埋点:在需要埋点的节点调用接口,携带数据上传。如百度统计等;
可视化埋点:使用可视化工具进行配置化的埋点,即所谓的「无痕埋点」,前端在页面加载时,可以读取配置数据,自动调用接口进行埋点。如开源的Mixpanel;
无埋点:前端自动采集全部事件并上报埋点数据。如国内的神策数据等;
在当时排期紧凑,人力紧缺的情况下,显然不允许我们去开发可视化埋点方案和无埋点方案,所以只能采取代码埋点方案。
命令式埋点
命令式埋点,顾名思义,开发者需要手动在需要埋点的节点处进行埋点。如点击按钮或链接后的回调函数、页面ready时进行请求的发送。大家肯定都很熟悉这样的代码:
// 页面加载时发送埋点请求 $(document).ready(function(){ // ... 这里存在一些业务逻辑 sendRequest(params); }); // 按钮点击时发送埋点请求 $('button').click(function(){ // ... 这里存在一些业务逻辑 sendRequest(params); });
可以很容易发现,这样的做法很有可能会将埋点代码侵入业务代码,这使整体业务代码变得繁琐,容易出错,且后续代码会愈加膨胀,难以维护。所以,我们需要让埋点的代码与具体的业务逻辑解耦,即 声明式埋点 ,从而提高埋点的效率和代码的可维护性。
声明式埋点
理论上,声明式埋点只需要关注两个问题:
需要埋点的DOM节点;
所需携带的数据
因此,可以很快想出一个声明式埋点的方法:
// key表示埋点的唯一标识;act表示埋点方式
那么可以去遍历DOM树,找到 [data-stat] 的节点,给这个button绑上click事件,把这些参数在回调函数中通过请求发出去。
在DOM节点(html)上声明埋点,与业务逻辑(通常在Javascript文件中)就解耦了。调用也很方便。
看起来很美,但这样就能解决问题了吗?显然是不够的。还需要解决以下问题:
遍历DOM树的时机问题,一个简单的例子,一个表格的行数据是通过异步加载,而表格行中的操作按钮需要埋点,那么在DOM ready的时候去遍历,显然是无法找到的
绑定埋点事件次数的问题,怎样保证埋点事件不会被重复绑定到元素上,一次操作发了N个埋点请求?
如何处理特有的埋点行为,如页面展现埋点,区域展现埋点?
如何在解绑时,销毁已绑定的事件?
1.自定义指令实现埋点数据统计
在项目中通常需要做数据埋点,这个时候,使用自定义指令将会变非常简单
在项目入口文件 main.js 中配置我们的自定义指令
// 坑位埋点指令 Vue.directive('stat', { bind(el, binding) { el.addEventListener('click', () => { const data = binding.value; let prefix = 'store'; if (OS.isAndroid || OS.isPhone) { prefix = 'mall'; } analytics.request({ ty: `${prefix}_${data.type}`, dc: data.desc || '' }, 'n'); }, false); } });
2.使用路由拦截统计页面级别的 PV
由于第一次在单页应用中尝试数据埋点,在项目上线一个星期之后,数据统计后台发现,首页的 PV 远远高于其它页面,数据很不正常。后来跟数据后台的人沟通询问他们的埋点统计原理之后,才发现其中的问题所在。
传统应用,一般都在页面加载的时候,会有一个异步的 js 加载,就像百度的统计代码类似,所以我们每个页面的加载的时候,都会统计到数据;然而在单页应用,页面加载初始化只有一次,所以其它页面的统计数据需要我们自己手动上报
解决方案
使用 vue-router 的 beforeEach 或者 afterEach 钩子上报数据,具体使用哪个最好是根据业务逻辑来选择。
const analyticsRequest = (to, from) => { // 只统计页面跳转数据,不统计当前页 query 不同的数据 // 所以这里只使用了 path, 如果需要统计 query 的,可以使用 to.fullPath if (to.path !== from.path) { analytics.request({ url: `${location.protocol}//${location.host}${to.path}` }); } }; router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { // 这里做登录等前置逻辑判断 // 判断通过之后,再上报数据 ... analyticsRequest(to, from); } else { // 不需要判断的,直接上报数据 analyticsRequest(to, from); next(); } });
在组件中使用我们的自定义指令
基于 jquery + widget 的老项目,
那么在这些项目中的DOM操作是jquery甚至原生DOM API来实现,Vue的自定义指令就无法工作
基于MutationObserver API的Mixin
MutationObserver是在DOM3标准中提出的标准API,提供让开发者感知到在某一个DOM节点变更的能力。可以监听以下场景:
childList: 目标节点的子节点插入删除引起的变更
attributes: 目标节点属性改变引起的变更
characterData: 目标节点的文本节点改变引起的变更,如通过appendData()等
subtree: 目标节点的子孙节点改变引起的变更
attributeOldValue:当attribute监听被设定为true时,可以记录改变前的属性值
characterDataOldValue:当characterData监听被设定为true时,可以记录改变前的属性值
attributeFilter:可以设定需要监听的属性列表
但为了保证MutationObserver可以在所有浏览器上正常工作,我们仍然引入了这个API的polyfill,详情可见这里。
在此能力的前提下,我们就可以在任意的DOM操作下触发Vue进行重新解析指令。
我们将 MutationObserver 封装进一个 Vue mixin , 非Vue应用的业务代码只需要引入这个mixin,这样也可以很好地解耦。
详细的实现原理可以见以下伪代码:
let observer; export default { ready() { // 开启监听 observer = new MutationObserver(mutations => { this.$compile(this.$el); }); observer.observe(this.$el, config); }, destroyed() { // 清理工作 observer.disconnect(); observer.takeRecords(); } }
上述内容就是怎么在vue项目中实现前端埋点,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联成都网站设计公司行业资讯频道。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
当前标题:怎么在vue项目中实现前端埋点-创新互联
分享URL:http://pwwzsj.com/article/csccgo.html