Prólogo:
como sugiere el nombre, el punto oculto es el monitoreo, que monitorea el comportamiento del usuario, el rendimiento de la página y las excepciones de la página.
Los puntos de ocultación de front-end se dividen principalmente en las siguientes tres categorías:
Puntos de ocultación de código:
Agregue código de lógica de ocultación o implementación de atributos personalizados donde se necesitan puntos de ocultación.
Entierro visual:
use herramientas visuales para enterrar puntos, es decir, entierro sin rastro. Cuando se carga la página frontal, de acuerdo con la configuración del punto enterrado, se llama automáticamente a la interfaz para cargar los datos del punto enterrado.
Sin punto enterrado (sin rastro de punto enterrado) :
el front-end recopila automáticamente todos los eventos e informa los datos del punto enterrado.
Los esquemas de ocultación visual y no ocultación tienen una gran inversión inicial, por lo que aquí se considera la solución de utilizar ocultación de código.
La incrustación de código se divide en dos categorías:
Incrustación imperativa:
agrega código lógico de incrustación donde se requiere la incrustación. Desventajas: gran carga de trabajo e intrusión en el código de lógica empresarial.
Entierro declarativo:
agregue atributos personalizados donde se requiera el entierro, y recopile y cargue datos de entierro mediante la identificación de eventos de vinculación de atributos personalizados;
Por lo tanto, el esquema de enterramiento final utiliza: enterramiento de código declarativo
Los siguientes son los pasos de enterramiento específicos del proyecto Vue:
Paso 1: agregue track.js y vincule el evento de clic a través de la pista de atributos personalizados
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
Paso 2: agregue una instrucción personalizada de pista vinculante en el archivo main.js
import track from './components/track.js'
Vue.prototype.$track = track;
Paso 3: en la etiqueta que debe incrustarse, agregue un comando personalizado v-track
<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>
Los tres pasos anteriores pueden completar el entierro del evento de clic de los elementos de la página.