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

時間 2019-12-06

標籤 vue 頁面進行業務數據上報简体版

原文原文鏈接

爲何要在標題里加上一個業務數據的上報呢，由於在我們前端項目中，可上報的數據維度太多，好比還有性能數據、頁面錯誤數據、console捕獲等。這裏咱們只講解業務數據的埋點。javascript

業務數據的上報主要分爲：html

各個路由的PV上報；
用戶的點擊行爲上報；
用戶操做結果（分享是否成功）的數據上報等；

通用和必須上報的數據，均在上報的代碼中進行固定，好比設備信息、用戶信息、cookie等都須要上報的數據，在上報前處理完成，須要異步獲取且數據固定的，作好存儲，防止每次都要從新獲取；其餘額外的數據，經過對外暴露的send方法進行傳遞。前端

好比獲取信息這塊，客戶端給到的jsapi，有可能只能異步調用，那麼咱們就能夠這麼處理：vue

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的上報：java

// 每一個hash路由的PV上報
router.afterEach((to)=>{
    // to爲當前已打開的頁面，to.name爲在router/index.ts中設定的name
    dataBoss.sendPV(to.name);
})

2. 用戶點擊行爲的上報

用戶點擊行爲的上報，以前是在每一個點擊的業務代碼最後，進行一次點擊上報。不過這樣一個很差的地方是，必須爲每一個須要上報的點擊元素添加一段業務代碼，同時，若是多個點擊行爲共享某個業務片斷時，須要進行點擊區分：json

methods: {
    myClick(value, prarams, act) {
        // ... 業務邏輯的處理

        // 數據的上報
        wzp.send({
            act: act,
            pageSource: 'MainPage'
        })
    }
}

如今，咱們利用Vue中的自定義指令來實現點擊行爲的上報，上報的處理與業務代碼進行分割：api

// 自定義指令的官方文檔： 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指令後，咱們就能夠在元素上使用這個指令後：cookie

<!-- 爲用戶頭像添加點擊數據上報 -->
<div class="avatar" v-boss="{pageName: 'MainPage', sop: 'sop_own_click'}" @click="linkTo">
    <img :src="user.avatar" :alt="user.nickname">
</div>

3. 用戶操做結果的數據上報

這裏的數據上報是用戶點擊行爲以後的結果上報，好比用戶點擊了分享按鈕，那麼最終他是真的分享成功了，仍是中途又取消了。這種數據的上報，能夠分析出用戶從意圖操做到最終實現的一個流失狀況。app

操做結果的數據上報，依賴於客戶端或者接口給反饋的結果，這就須要在業務代碼中實現了，定義一個全局變量$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
            }
        });
    })
}