如何在Vue单页面中进行业务数据的上报
作者:蚊子博客 发布时间:2024-04-26 17:42:13
标签:vue,业务数据
概述
业务数据的上报主要分为:
各个路由的PV上报;
用户的点击行为上报;
用户操作结果(分享是否成功)的数据上报等;
通用和必须上报的数据,均在上报的代码中进行固定,比如设备信息、用户信息、cookie等都需要上报的数据,在上报前处理完成,需要异步获取且数据固定的,做好存储,防止每次都要重新获取;其他额外的数据,通过对外暴露的send
方法进行传递。
比如获取信息这块,客户端给到的jsapi,有可能只能异步调用,那么我们就可以这么处理:
function getAppInfo() {
let appInfo = {};
return ()=> {
if (appInfo.deviceId) {
return Promise.resolve(appInfo);
} else {
return new Promise((resolve, reject) => {
ABB.getAppInfo(info => {
if (info.deviceId) {
appInfo = info;
resolve(appInfo);
} else {
reject(new Error('get AppInfo error'));
}
})
})
}
}
}
const AppInfo = getAppInfo();
console.log( AppInfo() );
1. 各个路由的PV上报
各个路由的PV上报可以通过vue router的afterEach来实现,每次路由刷新时,afterEach方法都会执行,那么我们在这里进行PV的上报:
// 每个hash路由的PV上报
router.afterEach((to)=>{
// to为当前已打开的页面,to.name为在router/index.ts中设定的name
dataBoss.sendPV(to.name);
})
2. 用户点击行为的上报
用户点击行为的上报,之前是在每个点击的业务代码最后,进行一次点击上报。不过这样一个不好的地方是,必须为每个需要上报的点击元素添加一段业务代码,同时,如果多个点击行为共享某个业务片段时,需要进行点击区分:
methods: {
myClick(value, prarams, act) {
// ... 业务逻辑的处理
// 数据的上报
wzp.send({
act: act,
pageSource: 'MainPage'
})
}
}
现在,我们利用Vue中的自定义指令来实现点击行为的上报,上报的处理与业务代码进行分割:
// 自定义指令的官方文档: https://cn.vuejs.org/v2/guide/custom-directive.html
// 自定义boss指令
// bind: 只对该元素绑定一次
// el: 触发时的DOM元素
// binding.value: 传入的值
// 使用 v-boss="{page: 'MainPage', sop: 'donate'}"
Vue.directive('boss', {
//
bind: function (el: HTMLElement, binding: any) {
el.addEventListener('click', ()=>{
// 绑定click事件,触发后进行数据上报
Vue.prototype.$dataBoss.send(binding.value)
})
}
})
自定义v-boss指令后,我们就可以在元素上使用这个指令后:
<!-- 为用户头像添加点击数据上报 -->
<div class="avatar" v-boss="{pageName: 'MainPage', sop: 'sop_own_click'}" @click="linkTo">
<img :src="user.avatar" :alt="user.nickname">
</div>
3. 用户操作结果的数据上报
这里的数据上报是用户点击行为之后的结果上报,比如用户点击了分享按钮,那么最终他是真的分享成功了,还是中途又取消了。这种数据的上报,可以分析出用户从意图操作到最终实现的一个流失情况。
操作结果的数据上报,依赖于客户端或者接口给反馈的结果,这就需要在业务代码中实现了,定义一个全局变量$dataBoss,通过这个来上报数据:
比如分享是否成功的监控:
// 发起分享
handleShare() {
share.show();
share.on('shareResult', res => {
this.$dataBoss.send({
sop: 'share_success'
});
})
}
根据接口中的数据进行上报:
handleUser() {
jsonp(url).then(result => {
this.$dataBoss.send({
kv: {
money: 20
}
});
})
}
来源:https://www.cnblogs.com/xumengxuan/p/10682338.html
0
投稿
猜你喜欢
- 1、概述python * 殊方法(魔术方法)是被python解释器调用的,我们自己不需要调用它们,我们统一使用内置函数来使用。例如:特殊方法_
- 本教程将分步讲解如何使用JQuery和CSS打造一个炫酷动感菜单。jQuery的"write less, do more"
- 1. JSON简介JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,它是JavaScript的子
- 本文讲述了Javascript简单实现面向对象编程继承实例代码。分享给大家供大家参考,具体如下:面向对象的语言必须具备四个基本特征:1.封装
- 前些天用python处理xml的转换的一个小程序,用来把xml,xsl转换成html。用的libxml2,所以还要先安装了libxml2模块
- 本文实例为大家分享了python绘制雪花的具体代码,供大家参考,具体内容如下代码非常容易理解,画着玩玩还是可以的。直接上代码# -*- co
- 5位数日期戳读取 .mat 文件处理里面数据时,发现里面的日期数据全部都是 “5位数” 数字,很不解;后来查到可以在excel中通过设置单元
- 今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可
- 废话不多说了,直奔主题了。mysql的四种启动方式:1、mysqld启动mysql服务器:./mysqld --defaults-file=
- 1 九九乘法表for i in range(9):#从0循环到8 i += 1#等价于 i = i+1 for j
- 下面给大家介绍远程连接mysql错误代码1130的解决方法:以上所述是小编给大家介绍的远程连接mysql错误代码1130的解决方法网站的支持
- 运行环境:eclipse+MySQL以前我们Java连接MySQL数据库都是一个数据库写一个类,类下面写好多方法,要是多个数据库,就要写多个
- 在我们的日常生活工作中,经常会遇到需要上传日志的场景,比如多台机器运行同一个程序,并且需要记录每台机器程序产生的日志,根据相关关键词告警,或
- 本文实例为大家分享了Python Unittest自动化单元测试框架的具体代码,供大家参考,具体内容如下1、python 测试框架(本文只涉
- 用windows账号还是可以登录的。 查找问题的过程: 第一步: 启动所有与SQL有关的服务,问题依旧; 第二步: 查看windows防火墙
- 假设现在有如下N条记录 表明叫book id author title 1 aaa AAA 2 bbb BBB 3 ccc CCC 4 dd
- Celery是一个异步的任务队列(也叫做分布式任务队列),一个简单,灵活,可靠的分布式系统,用于处理大量消息,同时为操作提供维护此类系统所需
- using System;using System.Data.SqlClient;namespace ExecuteSqlTran{&nbs
- 今天学到Python 有一个名为 random 的内置模块,可用于生成随机数,这个好玩~可以用来做为上课随机点名的程序了哈哈。。def ma
- 判断某一个对象里面是否存在某个属性,常见错误场景排查,但是你真的知道该如何使用嘛。关于这个问题,大家第一眼看到脑海中肯定会有多种方案去实现,