vue项目埋点方案--点击&曝光

Vue项目埋点方案--声明式指令埋点（点击&曝光）

埋点方案有命令式埋点和声明式埋点。

命令式埋点：在用户行为触发位置调用事件上报函数进行行为上报，缺点是埋点和业务耦合度比较高，工作量比较大 声明式埋点：通过自定义指令统一完成事件上报，使得埋点和业务代码一定程度上解耦合。 本篇文章将记录借助vue自定义指令完成声明式埋点，降低前端埋点压力。 一、准备工作

这里关于vue自定义指令和IntersectionObserver不做详细介绍，自行前往官网了解学习。

vue自定义指令，vue自定义指令官网 IntersectionObserver实现元素视窗观测，Intersection Observer API 二、目录结构 index.js: 指令定义入口文件 exposure.js: 曝光类封装 click.js: 点击类封装 config.js: 上报配置文件，主要是一些服务器配置 fetch.js: axios上报封装，主要用于公共参数封装 sendData.js: 点击类和曝光类调用上报事件 三、代码实现 创建指令 这里我们计划创建v-track指令，创建代码如下：

import Vue from 'vue' import Exposure from './exposure' import Click from './click' // 实例化 const exp = new Exposure() const cli = new Click() Vue.directive('track', { bind(el, binding) { const { arg } = binding arg.split('|').forEach(item => { // 点击 if (item === 'click') { cli.add({ el }) } else if (item === 'exposure') { exp.add({ el }) } }) } }) 曝光类exposure.js 曝光使用IntersectionObserver观察元素是否在视窗内，并且曝光上报只上报一次，上报之后移除观察。设定每2秒进行一次上报。 如何解决曝光的漏报（定时器2秒之内的用户退出）和多报： a. 漏报：保存localStorage，下次进入之后如果有数据则上报，如果用户再不进入，对漏报的几条数据可忽略 b. 多报：IntersectionObserver监听曝光，上报时候移除元素的监听

import 'intersection-observer' import { track } from './sendData' // 节流时间调整，默认100ms IntersectionObserver.prototype['THROTTLE_TIMEOUT'] = 300 export default class Exposure { constructor(maxNum = 20) { this.cacheDataArr = [] this.maxNum = maxNum this._timer = 0 this._observer = null this.init() } /** * 初始化 */ init() { const self = this // 边界处理 this.trackFromLocalStorage() this.beforeLeaveWebview() // 实例化监听 this._observer = new IntersectionObserver(function(entries, observer) { entries.forEach((entry) => { // 出现在视窗中 if (entry.isIntersecting) { // 清除当前定时器 clearInterval(this._timer) // 获取参数 const tp = entry.target.attributes['track-params'].value // 收集参数统一上报，减少网络请求 self.cacheDataArr.push(tp) // 曝光之后取消观察 self._observer.unobserve(entry.target) if (self.cacheDataArr.length >= self.maxNum) { self.track() } else { self.storeIntoLocalStorage(self.cacheDataArr) if (self.cacheDataArr.length > 0) { // 2秒上报一次 self._timer = setInterval(function() { self.track() }, 2000) } } } }) }, { root: null, rootMargin: '0px', threshold: 0.5 }) } /** * 给元素添加监听 * @param {Element} entry */ add(entry) { this._observer && this._observer.observe(entry.el) } /** * 埋点上报 */ track() { const trackData = this.cacheDataArr.splice(0, this.maxNum) track(trackData) // 更新localStoragee this.storeIntoLocalStorage(this.cacheDataArr) } /** * 存储到localstorage, 防止在设定上报时间内用户退出 * @param { Arrary } data */ storeIntoLocalStorage(data) { window.localStorage.setItem('cacheTrackData', data) } /** * 首次进入先获取localStorage中的数据，也就是用户上次退出未上报的数据 */ trackFromLocalStorage() { const cacheData = window.localStorage.getItem('cacheTrackData') if (cacheData) { track(cacheData) } } /** * 用户退出系统时调用方法，需要和客户端同学协商注册事件 */ beforeLeaveWebview() { // 客户端自定义事件监听上报 } } 点击类click.js 用户的点击行为没有曝光行为频繁，所以简单处理，每次点击进行埋点上报。

import { track } from './sendData' export default class Click { add(entry) { const tp = entry.el.attributes['track-params'].value entry.el.addEventListener('click', function() { track(tp) }) } } 上报函数sendData.js 上报函数未具体实现，如果需要提供，后续私信完善。

import request from './fetch' /** * 发送上报数据 * @param {Object} data */ function _track(data) { return request({ url: 'track', method: 'post', data }) } /** * 事件上报 * @param {Object} params */ export function track(params) { console.log(`Track data to server: ${JSON.stringify(params)}`) _track(params) } 接口封装fetch.js

import Axios from 'axios' import config from './config' // 创建实例 const service = Axios.create({ baseURL: config.serverUrl, timeout: config.serverTimeout }) // 公共参数 const trackPublicParams = { uid: '' } // 请求拦截 service.interceptors.request.use((config) => { config.data = Object.assign({}, config.data, trackPublicParams) return config }, (error) => { return Promise.reject(error) }) export default service 配置文件config.js

export default { serverUrl: '', serverTimeout: '6000', version: '1.0.0' } 四、使用 引入全局指令

// main.js import './directives/track' 页面使用自定义指令完成上报

// 点击事件 <div v-track:click></div> // 点击事件带参数 <div v-track:click :track-params="12455"></div> <div v-track:click :track-params="{id: 123}"></div> <div v-track:click :track-params="item.data"></div> // 循环，item为循环对象 // 曝光事件 <div v-track:exposure></div> // 曝光事件带参数 <div v-track:exposure :track-params="12455"></div> <div v-track:exposure :track-params="{id: 123}"></div> <div v-track:exposure :track-params="item.data"></div> // 循环，item为循环对象 // 曝光事件并点击带参数 <div v-track:click|exposure :track-params="12455"></div> <div v-track:click|exposure :track-params="{id: 123}"></div> <div v-track:click|exposure :track-params="item.data"></div> // 循环，item为循环对象

以上，记录vue项目如何进行声明式埋点，不足之处望指正，不喜勿喷！