目錄概述1. 各個(gè)路由的PV上報(bào)2. 用戶點(diǎn)擊行為的上報(bào)3. 用戶操作結(jié)果的數(shù)據(jù)上報(bào)總結(jié)概述

業(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() );1. 各個(gè)路由的PV上報(bào)

各個(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);})2. 用戶點(diǎn)擊行為的上報(bào)

用戶點(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 v-boss='{pageName: ’MainPage’, sop: ’sop_own_click’}' @click='linkTo'> <img :src='http://www.lshqa.cn/bcjs/user.avatar' :alt='user.nickname'></div>3. 用戶操作結(jié)果的數(shù)據(jù)上報(bào)

這里的數(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 }}); })}總結(jié)

前端數(shù)據(jù)上報(bào)的維度很多，都是為了方便我們更加的了解用戶、了解產(chǎn)品，方便以后的功能迭代。

以上就是如何在Vue單頁面中進(jìn)行業(yè)務(wù)數(shù)據(jù)的上報(bào)的詳細(xì)內(nèi)容，更多關(guān)于Vue單頁面中進(jìn)行業(yè)務(wù)數(shù)據(jù)的上報(bào)的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！