What is front-end embedding?
Front-end burying is a method of user behavior analysis that collects user behavior data on web pages by inserting specific code into the front-end code.
1. Three steps for front-end burying
- [Create a script element] In the step of creating a script element, load the script file used to collect user behavior data by dynamically creating a script element in the front-end code.
- [Collect client data] In the step of collecting client data, the user information obtained by the front end is passed to the back end by parsing the parameters in the HTTP request.
- [Communication and logging with the backend] In the step of communicating and logging with the backend, generate an empty 1x1 pixel GIF image as the response content, and set the Content-type of the response header to image/gif, and then which is returned to the front-end code. In this way, the front-end bureau can obtain user behavior data on the web page and perform corresponding analysis and recording.
2. Use custom instructions to implement front-end burying points
// directive.js
const appDirective = app => {
app.directive("tracking", {
mounted(el, binding, vnode) {
el.addEventListener("click", () => {
// 埋点相关操作
});
},
unmounted(el, binding) {
el && el.removeEventListener("click", () => {
// 埋点相关操作
});
}
});
};
export {
appDirective };
3. Use Vue.use global mounting to implement front-end burying
Vue.use({
install(Vue) {
Vue.prototype.$track = function(eventName, eventProps) {
// 埋点相关操作
}
}
})
4. Use Mixin to achieve front-end burying
const trackMixin = {
methods: {
$track(eventName, eventProps) {
// 埋点相关操作
}
}
}
Vue.component('my-component', {
mixins: [trackMixin],
template: 'test page'
})