Vue project buried point scheme

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.