如何在Vue單頁面中進行業務數據的上報

目錄概述1. 各個路由的PV上報2. 用戶點擊行為的上報3. 用戶操作結果的數據上報總結概述

業務數據的上報主要分為：

各個路由的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 v-boss='{pageName: ’MainPage’, sop: ’sop_own_click’}' @click='linkTo'> <img :src='http://www.wxshucaidpc.com/bcjs/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 }}); })}總結

前端數據上報的維度很多，都是為了方便我們更加的了解用戶、了解產品，方便以后的功能迭代。

以上就是如何在Vue單頁面中進行業務數據的上報的詳細內容，更多關于Vue單頁面中進行業務數據的上報的資料請關注好吧啦網其它相關文章！