您好,登錄后才能下訂單哦!
小編給大家分享一下怎么在Vue單頁面中進(jìn)行業(yè)務(wù)數(shù)據(jù)的上報(bào),希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
業(yè)務(wù)數(shù)據(jù)的上報(bào)主要分為:
各個(gè)路由的PV上報(bào);
用戶的點(diǎn)擊行為上報(bào);
用戶操作結(jié)果(分享是否成功)的數(shù)據(jù)上報(bào)等;
通用和必須上報(bào)的數(shù)據(jù),均在上報(bào)的代碼中進(jìn)行固定,比如設(shè)備信息、用戶信息、cookie等都需要上報(bào)的數(shù)據(jù),在上報(bào)前處理完成,需要異步獲取且數(shù)據(jù)固定的,做好存儲(chǔ),防止每次都要重新獲取;其他額外的數(shù)據(jù),通過對(duì)外暴露的send
方法進(jìn)行傳遞。
比如獲取信息這塊,客戶端給到的jsapi,有可能只能異步調(diào)用,那么我們就可以這么處理:
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() );
各個(gè)路由的PV上報(bào)可以通過vue router的afterEach來實(shí)現(xiàn),每次路由刷新時(shí),afterEach方法都會(huì)執(zhí)行,那么我們?cè)谶@里進(jìn)行PV的上報(bào):
// 每個(gè)hash路由的PV上報(bào) router.afterEach((to)=>{ // to為當(dāng)前已打開的頁面,to.name為在router/index.ts中設(shè)定的name dataBoss.sendPV(to.name); })
用戶點(diǎn)擊行為的上報(bào),之前是在每個(gè)點(diǎn)擊的業(yè)務(wù)代碼最后,進(jìn)行一次點(diǎn)擊上報(bào)。不過這樣一個(gè)不好的地方是,必須為每個(gè)需要上報(bào)的點(diǎn)擊元素添加一段業(yè)務(wù)代碼,同時(shí),如果多個(gè)點(diǎn)擊行為共享某個(gè)業(yè)務(wù)片段時(shí),需要進(jìn)行點(diǎn)擊區(qū)分:
methods: { myClick(value, prarams, act) { // ... 業(yè)務(wù)邏輯的處理 // 數(shù)據(jù)的上報(bào) wzp.send({ act: act, pageSource: 'MainPage' }) } }
現(xiàn)在,我們利用Vue中的自定義指令來實(shí)現(xiàn)點(diǎn)擊行為的上報(bào),上報(bào)的處理與業(yè)務(wù)代碼進(jìn)行分割:
// 自定義指令的官方文檔: https://cn.vuejs.org/v2/guide/custom-directive.html // 自定義boss指令 // bind: 只對(duì)該元素綁定一次 // el: 觸發(fā)時(shí)的DOM元素 // binding.value: 傳入的值 // 使用 v-boss="{page: 'MainPage', sop: 'donate'}" Vue.directive('boss', { // bind: function (el: HTMLElement, binding: any) { el.addEventListener('click', ()=>{ // 綁定click事件,觸發(fā)后進(jìn)行數(shù)據(jù)上報(bào) Vue.prototype.$dataBoss.send(binding.value) }) } })
自定義v-boss指令后,我們就可以在元素上使用這個(gè)指令后:
<!-- 為用戶頭像添加點(diǎn)擊數(shù)據(jù)上報(bào) --> <div class="avatar" v-boss="{pageName: 'MainPage', sop: 'sop_own_click'}" @click="linkTo"> <img :src="user.avatar" :alt="user.nickname"> </div>
這里的數(shù)據(jù)上報(bào)是用戶點(diǎn)擊行為之后的結(jié)果上報(bào),比如用戶點(diǎn)擊了分享按鈕,那么最終他是真的分享成功了,還是中途又取消了。這種數(shù)據(jù)的上報(bào),可以分析出用戶從意圖操作到最終實(shí)現(xiàn)的一個(gè)流失情況。
操作結(jié)果的數(shù)據(jù)上報(bào),依賴于客戶端或者接口給反饋的結(jié)果,這就需要在業(yè)務(wù)代碼中實(shí)現(xiàn)了,定義一個(gè)全局變量$dataBoss,通過這個(gè)來上報(bào)數(shù)據(jù):
比如分享是否成功的監(jiān)控:
// 發(fā)起分享 handleShare() { share.show(); share.on('shareResult', res => { this.$dataBoss.send({ sop: 'share_success' }); }) }
根據(jù)接口中的數(shù)據(jù)進(jìn)行上報(bào):
handleUser() { jsonp(url).then(result => { this.$dataBoss.send({ kv: { money: 20 } }); }) }
Vue具體輕量級(jí)框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢,Vue中頁面使用的是局部刷新,不用每次跳轉(zhuǎn)頁面都要請(qǐng)求所有數(shù)據(jù)和dom,可以大大提升訪問速度和用戶體驗(yàn)。
看完了這篇文章,相信你對(duì)“怎么在Vue單頁面中進(jìn)行業(yè)務(wù)數(shù)據(jù)的上報(bào)”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。