【Vue】Vue 项目中常见的埋点方案

Vue 项目中常见的埋点方案。埋点（Data Tracking）是收集用户行为数据的关键技术，用于数据分析、产品优化和运营决策。

---

核心概念：埋点类型

1. 曝光埋点 (Impression): 页面或元素进入用户视野时触发（如页面访问、广告曝光）。
2. 点击埋点 (Click): 用户点击按钮、链接等交互元素时触发。
3. 页面停留埋点 (Page Stay): 记录用户在页面的停留时长。
4. 自定义事件埋点 (Custom Event): 如视频播放、表单提交等业务相关事件。

---

方案一：手动埋点（代码侵入性强，最灵活）

直接在业务代码中调用埋点方法。

实现方式：

1. 创建埋点 SDK / 工具函数

   // utils/tracker.js
   export const trackEvent = (eventName, eventData = {}) => {// 这里实现实际的发送逻辑，例如：// 1. 发送图片 beacon（navigator.sendBeacon）// 2. 发送 AJAX 请求// 3. 调用第三方 SDK（如 Google Analytics, GrowingIO, 神策等）console.log(`Track Event: ${eventName}`, eventData);// 示例：使用 sendBeacon（适合页面卸载前的请求）const data = JSON.stringify({event: eventName,data: eventData,timestamp: Date.now(),url: window.location.href});navigator.sendBeacon('/api/track', data);
   };
   

2. 在组件中手动调用

   <template><button @click="handleBuy">立即购买</button>
   </template><script>
   import { trackEvent } from '@/utils/tracker';export default {methods: {handleBuy() {// 业务逻辑this.$api.buyProduct(this.productId).then(() => {// 埋点逻辑trackEvent('product_buy_click', {product_id: this.productId,price: this.price,user_id: this.$store.state.userId});});}}
   };
   </script>
   

优缺点：

• 优点: 绝对精准，控制力强，可以随业务逻辑灵活添加。
• 缺点: 代码侵入性强，与业务逻辑耦合度高，难以维护和统一管理。

---

方案二：指令埋点（代码侵入性弱，适用于DOM交互）

利用 Vue 的自定义指令来统一处理交互类埋点，如点击、曝光。

2.1 点击事件指令 (v-track-click)

// directives/track.js
import { trackEvent } from '@/utils/tracker';export const trackClick = {bind(el, binding) {el.addEventListener('click', () => {// binding.value 可以是一个字符串（事件名）或一个对象（包含事件名和数据）const { event, data } = parseBindingValue(binding.value);trackEvent(event, data);});}
};function parseBindingValue(value) {if (typeof value <