Vue 3 + Vuex 埋点实现指南

在现代前端开发中，数据分析和用户行为追踪是不可或缺的部分。本文将介绍如何在 Vue 3 项目中实现埋点功能，具体使用 Vuex 进行状态管理，并通过自定义 Hook 实现埋点逻辑。

目录

1. 项目结构
2. 实现埋点逻辑
3. 使用埋点功能
4. 总结

1.项目结构

我们将创建一个 xesAnalyticsHook 目录，包含一个 index.js 文件，用于实现埋点逻辑。每个具体的埋点逻辑将分模块存放在单独的文件中，例如 classPlan.js、studyPlan.js 等。

src/
├── hooks/
│   └── xesAnalyticsHook/
│       ├── index.js
│       ├── classPlan.js
│       ├── studyPlan.js
│       └── ...

2.实现埋点逻辑

2.1index.js文件

index.js 文件是整个埋点逻辑的核心。它负责从 Vue 实例中获取全局属性 $xesAnalytics，并提供一系列封装好的埋点方法。

import { getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
import { createClassPlanAnalytics } from './classPlan'
import { createStudyPlanAnalytics } from './studyPlan'
// ... 其他模块的导入

/**
 * 自定义 Hook，用于封装埋点逻辑
 */
export function useXesAnalytics() {
  // 获取当前 Vue 实例
  const instance = getCurrentInstance()
  // 获取全局属性
  const globalProperties = instance?.appContext?.config?.globalProperties
  // 获取全局埋点对象
  const analytics = globalProperties?.$xesAnalytics

  // 获取 Vuex store
  const store = useStore()
  // 获取教师 ID 和学校 ID
  const teacherId = store?.state?.userDetail?.id
  const schoolId = store?.state?.userDetail?.school?.id

  /**
   * 封装的点击事件埋点方法
   * @param {string} eventId - 事件 ID
   * @param {object} properties - 事件属性
   * @param {function} callback - 回调函数
   */
  function trackClick(eventId, properties = {}, callback) {
    analytics.track(eventId, properties, callback)
  }

  /**
   * 封装的页面浏览事件埋点方法
   * @param {string} eventId - 事件 ID
   * @param {object} properties - 事件属性
   * @param {function} callback - 回调函数
   */
  function trackView(eventId, properties = {}, callback) {
    analytics.view(eventId, properties, callback)
  }

  /**
   * 设置用户属性
   * @param {object} profile - 用户属性
   */
  function setProfile(profile) {
    analytics.setProfile(profile)
  }

  /**
   * 注册页面信息
   * @param {object} params - 页面参数
   */
  function registerPage(params) {
    analytics.registerPage(params)
  }

  // 注册页面信息
  registerPage({
    operator_id: teacherId, school_id: schoolId
  })

  // 具体的埋点逻辑
  const ClassPlanAnalytics = createClassPlanAnalytics(trackClick, trackView)
  const studyPlanAnalytics = createStudyPlanAnalytics(trackClick, trackView)
  // ... 其他模块的实例化

  return {
    trackClick,
    trackView,
    setProfile,
    registerPage,
    ...ClassPlanAnalytics,
    ...studyPlanAnalytics,
    // ... 其他模块的方法
  }
}

2.2classPaln.js文件

classPlan.js 文件定义了具体的埋点方法。每个方法对应一个具体的用户行为事件。 

const f = () => {
  // 默认值
}

export function createClassPlanAnalytics(trackClick = f, trackView = f) {
  return {
    trackClassPlanCreatePlanClick() {
      trackClick('click_CuzANHRD')
    },
    trackClassPlanListView() {
      trackView('view_4l5x8Gf9')
    }
  }
}

3.使用埋点功能

在组件中使用埋点功能非常简单。首先导入 useXesAnalytics，然后解构出需要的埋点方法即可。

<template>
  <el-button @click="handelClick"></el-button>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue'
import { useXesAnalytics } from '@/hooks/xesAnalyticsHook/index.js'

const {
  trackClassPlanCreatePlanClick, trackClassPlanListView,
} = useXesAnalytics()

const handelClick = () => {
  trackClassPlanCreatePlanClick()
  // 其他逻辑
}

// 初始化
onMounted(() => {
  trackClassPlanListView()
})
</script>

4.总结

通过本文的介绍，我们实现了一个基于 Vue 3 和 Vuex 的埋点系统。这个系统通过自定义 Hook useXesAnalytics 封装了埋点逻辑，并在组件中方便地调用这些方法。这样不仅提高了代码的可维护性，还使得埋点逻辑更加清晰和模块化。

⚠️具体实现根据实际情况修改即可

希望这篇文章能帮助你更好地理解和实现 Vue 项目中的埋点功能。如果有任何问题或建议，欢迎在评论区留言讨论。