How to report business data in Vue single page

Time:2021-10-15
catalogue
  • summary
  • 1. PV report of each route
  • 2. User click behavior reporting
  • 3. Data reporting of user operation results
  • summary

summary

Business data reporting mainly includes:

  • PV reporting of each route;
  • User click behavior reporting;
  • Data reporting of user operation results (whether sharing is successful);

Common and mandatory data shall be fixed in the reported code, such as equipment information, user information, cookies and other data that need to be reported. If the data needs to be obtained asynchronously and the data is fixed, it shall be stored to prevent re acquisition every time; Other additional data through external exposuresendMethod.

For example, in the area of obtaining information, the jsapi given by the client may only be called asynchronously, so we can handle it as follows:


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 report of each route

The PV reporting of each route can be realized through the aftereach of Vue router. The aftereach method will be executed every time the route is refreshed. Then we report the PV here:

//PV reporting per hash route
router.afterEach((to)=>{
    //To is the currently opened page, and to.name is the name set in router / index.ts
    dataBoss.sendPV(to.name);
})

2. User click behavior reporting

Before reporting the user’s click behavior, a click report is performed at the end of each click business code. However, a bad thing is that a business code must be added for each click element to be reported. At the same time, if multiple click behaviors share a business segment, click differentiation is required:

methods: {
    myClick(value, prarams, act) {
        //... processing of business logic

        //Data reporting
        wzp.send({
            act: act,
            pageSource: 'MainPage'
        })
    }
}

Now, we use the user-defined instructions in Vue to report click behavior. The reporting processing is separated from the business code:

//Official documentation of custom directives: https://cn.vuejs.org/v2/guide/custom-directive.html
//Custom boss instruction
//Bind: bind this element only once
//El: DOM element when triggered
//Binding.value: value passed in
//Use v-boss = "{page: 'mainpage', SOP: 'donate'}"
Vue.directive('boss', {
    // 
    bind: function (el: HTMLElement, binding: any) {
        el.addEventListener('click', ()=>{
            //Bind the click event and report the data after triggering
            Vue.prototype.$dataBoss.send(binding.value)
        })
    }
})

After customizing the v-boss instruction, we can use this instruction on the element:

<!--  Add click data report for user avatar -- >
<div v-boss="{pageName: 'MainPage', sop: 'sop_own_click'}" @click="linkTo">
    <img :src="user.avatar" :alt="user.nickname">
</div>

3. Data reporting of user operation results

The data reporting here is the result of the user’s click behavior. For example, if the user clicks the share button, does he really share successfully or cancel halfway. This kind of data reporting can analyze the loss of users from intended operation to final realization.

The data reporting of operation results depends on the results fed back by the client or interface, which needs to be implemented in the business code. Define a global variable $databoss to report data:

For example, monitoring the success of sharing:

//Initiate sharing
handleShare() {
    share.show();
    share.on('shareResult', res => {
        this.$dataBoss.send({
            sop: 'share_success'
        });
    })
}

Report according to the data in the interface:


handleUser() {
    jsonp(url).then(result => {
        this.$dataBoss.send({
            kv: {
                money: 20
            }
        });
    })
}

summary

There are many dimensions of front-end data reporting to facilitate us to better understand users and products and facilitate future function iterations.

The above is the details of how to report business data in Vue single page. For more information about reporting business data in Vue single page, please pay attention to other relevant articles of developeppaer!