Buried point is also called event tracking, the purpose is to collect user behavior data, such as what button the user clicked, which pages they browsed, how long they browsed, and from which page they entered the current page (conversion rate), etc.
Excluding node and other implementation methods, for the front end, saving these operations or recording these data must ultimately call the interface.
1. Button click
Assuming that we want to record what button the user clicks now, the first thing that comes to mind is the button click event. In the Vue project, it is @click, for example:
<el-button @click="confirm" size="mini">确定</el-button>
//...
confirm() {
//httpRequest...
},
//...Implement the interface call in confirm(), and bury some user operations.
However, if every click is to be recorded, then every @click event must call a buried point interface, and the user click is a functional operation, its purpose is to perform operations, not to let us bury points .
Perhaps readers will say, then continue to call the interface. This scheme is theoretically feasible, but the feasibility is extremely low, for example:
- ①The project has been developed very well, and now it needs to be buried, and it must not be searched or modified globally.
- ②Even if the project is very small and can be modified globally, it means that the entire project needs to be tested, and the cost is very high.
- ③Even if none of the above is a problem, when a click event has a very complicated function, it needs to call a lot of interfaces, and it is mixed with synchronous and asynchronous, conditional judgment, variable basis, conditional judgment and variable basis if...else. ..Branch statement, and then there are branch statements that pop up various pop-up boxes and various operations in the pop-up box. After closing the pop-up window, you need to trigger @click and other situations. The code is complicated and lengthy. Be criticized.
Since the buried event is an independent function, it is only affected by user operations and can be completely independent. Therefore, we need to think of another way to unify the capture of such events - custom instructions .
Listen to the click event when mounting, remove the click event when unmounting, and call the buried point interface (encapsulated in track.js) after the click is triggered. The code is as follows:
directive.js
import { track } from "track.js";
const appDirective = app => {
app.directive("tracking", {
mounted(el, binding, vnode) {
el.addEventListener("click", () => {
track(binding);
});
},
unmounted(el, binding) {
el && el.removeEventListener("click", () => {
track(binding);
});
}
});
};
export { appDirective };main.js
//...
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementPlus from "element-plus";
import "element-plus/lib/theme-chalk/index.css";
import { appDirective } from "./directive"
let app = createApp(App);
appDirective(app)
app.config.errorHandler = (error, vm, info) => {
}
app
.use(store)
.use(router)
.use(ElementPlus)
.mount("#app");After completing the implementation and loading of the above custom instructions, the v-tracking instruction can be used to bury the click event:
<el-button size="mini" @click="confirm" type="info"
v-tracking="{
name: 'x页面-确定-点击',
type: 'click',
id: '',
from: ''
}"
>查询</el-button>
<span size="mini" @click="confirm" type="info"
v-tracking="{
name: 'x页面-下载-点击',
type: 'click',
id: '',
from: ''
}"
>下载</el-button>2. Page browsing
Use the routing interception guard to record the necessary input parameters and the current time (beginTime) when entering the page, record them in vuex, and get the current time (endTime) when leaving the page, and calculate the difference as the time the user stays on the current page number. Call the interface (track.js) to transfer buried point data.
track({
name: 'x页浏览',
type: 'scan',
id: '',
from: '菜单',
time: '10s'
});