Foreword:
As the name suggests, the buried point is monitoring, which monitors user behavior, page performance, and page exceptions.
Front-end burying points are mainly divided into the following three categories:
Code burying points:
Add burying logic code or custom attribute implementation where burying points are needed.
Visual burying:
Use visual tools to bury points, that is, traceless burying. When the front-end page is loaded, according to the buried point configuration, the interface is automatically called to upload the buried point data.
No buried point (no trace buried point) :
the front end automatically collects all events and reports the buried point data.
The schemes of visual burying and no burying have a large initial investment, so the solution of using code burying is considered here.
Code embedding is divided into two categories:
Imperative embedding:
add embedding logic code where embedding is required. Disadvantages: heavy workload and intrusion into business logic code.
Declarative burying:
Add custom attributes where burying is required, and collect and upload burying data by identifying custom attribute binding events;
Therefore, the final burying scheme uses: declarative code burying
The following are the specific burying steps of the Vue project:
Step 1: Add track.js, and bind the click event through the custom attribute track
import Vue from 'vue'
import {
eventLog } from '@/api/bpl/event'
// 埋点指令
let track = Vue.directive('track', {
bind: (el, binding, vnode) => {
el.addEventListener('click', () => {
const data = binding.value;
// request API
console.log(data);
eventLog(data).then(response => {
console.debug(response.data);
});
}, false);
}
})
export default track
Step 2: Add a binding track custom instruction in the main.js file
import track from './components/track.js'
Vue.prototype.$track = track;
Step 3: On the label that needs to be embedded, add a v-track custom instruction
<uni-grid :column="4">
<uni-grid-item v-track="{eventId:'1101',location:'home'}">
<view class="grid-item-box">
<uni-icons type="person-filled" size="30"></uni-icons>
<text class="text">用户管理</text>
</view>
</uni-grid-item>
</uni-grid>
The above three steps can complete the click event burying of page elements.