Vue 3 + Vuex 埋点实现指南
在现代前端开发中,数据分析和用户行为追踪是不可或缺的部分。本文将介绍如何在 Vue 3 项目中实现埋点功能,具体使用 Vuex 进行状态管理,并通过自定义 Hook 实现埋点逻辑。
目录
- 项目结构
- 实现埋点逻辑
- 使用埋点功能
- 总结
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 storeconst store = useStore()// 获取教师 ID 和学校 IDconst teacherId = store?.state?.userDetail?.idconst 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 项目中的埋点功能。如果有任何问题或建议,欢迎在评论区留言讨论。
相关文章:
Vue 3 + Vuex 埋点实现指南
在现代前端开发中,数据分析和用户行为追踪是不可或缺的部分。本文将介绍如何在 Vue 3 项目中实现埋点功能,具体使用 Vuex 进行状态管理,并通过自定义 Hook 实现埋点逻辑。 目录 项目结构实现埋点逻辑使用埋点功能总结 1.项目结构 我们将创…...
电子应用设计方案-30:智能扫地机器人系统方案设计
智能扫地机器人系统方案设计 一、引言 随着人们生活节奏的加快和对生活品质的追求,智能家居产品越来越受到消费者的青睐。智能扫地机器人作为一种能够自动清扫地面的智能设备,为人们节省了大量的时间和精力。本方案旨在设计一款功能强大、智能化程度高、…...
HTML飞舞的爱心(完整代码)
写在前面 HTML语言实现飞舞的爱心完整代码。 完整代码 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>飞舞爱心</title><style>* {margin: 0;padding: 0;}html,body {overflow: hidd…...
android shader gl_Position是几个分量
在Android的OpenGL ES中,gl_Position是顶点着色器(Vertex Shader)的一个内置输出变量,它用于指定顶点在裁剪空间(Clip Space)中的位置。gl_Position是一个四维向量(4-component vectorÿ…...
spine 动画层 动态权重
前奏.业务背景 这边想实现一个功能,项目中有 一只猫 猫的头会盯着逗猫棒移动。因为素材还没到所以这里使用了 spine 自带的猫头鹰。他的动画 刚好挺有针对性:(关联上篇)https://blog.csdn.net/nicepainkiller/article/details/144…...
《Python基础》之Python中可以转换成json数据类型的数据
目录 一、JSON简介 JSON有两种基本结构 1、对象(Object) 2、数组(Array) 二、将数据装换成json数据类型方法 三、在Python中,以下数据类型可以直接转换为JSON数据类型 1、字典(Dictionary)…...
在oracle下载jdk显示400 Bad Request Request Header Or Cookie Too Large
下载JDK17,官网地址:【https://www.oracle.com/cn/java/technologies/downloads/#jdk17-windows】 问题: 出现 400 Bad Request: Request Header Or Cookie Too Large 错误,通常是由于浏览器存储的 Cookies 或请求头过大所导致的…...
MongoDB注入攻击测试与防御技术深度解析
MongoDB注入攻击测试与防御技术深度解析 随着NoSQL数据库的兴起,MongoDB作为其中的佼佼者,因其灵活的数据模型和强大的查询能力,受到了众多开发者的青睐。然而,与任何技术一样,MongoDB也面临着安全威胁,其…...
【Java基础入门篇】前言
Java基础入门篇 本系列内容主要针对Java基础知识,总共包含四大部分内容: 变量、数据类型和运算符控制语句和递归算法面向对象和JVM底层分析数组和排序 学习需要具备: IDEA编译器 JDK1.8版本 写在前面 在Java入门的最开始,我们需…...
Oracle 建表的存储过程
建表的存储过程 下面是建表的存储过程,用途:通过不同的表,根据不同过滤条件,得到某个字段,例如neid,然后创建一个新表T,表T的表名为拼接XXXX_XXX_neid,表T的字段自行添加 xxx&…...
【Debug】hexo-github令牌认证 Support for password authentication was removed
title: 【Debug】hexo-github令牌认证 date: 2024-07-19 14:40:54 categories: bug解决日记 description: “Support for password authentication was removed on August 13, 2021.” cover: https://pic.imgdb.cn/item/669b38ebd9c307b7e9f3e5e0.jpg 第一章 第一篇博客记录一…...
torch.is_floating_point(input)
torch.is_floating_point(input) input: 输入张量 如果输入的数据类型是 浮点数据类型 ,则返回 True。否则返回False。 浮点数据类型:torch.float64、torch.float32、torch.float16 、 torch.bfloat16 import torch# 创建一个浮点数张量 float_tensor torch.te…...
【分布式】分布式事务
目录 1、事务的发展 2、本地事务 (1)如何保障原子性和持久性? (2)如何保障隔离性? 2、全局事务 (1)XA事务的两段式提交 (2)XA事务的三段式提交…...
Spring Data 简介
Spring Data 是一个用于简化数据库访问的框架,它是 Spring 生态系统中的重要组成部分。以下是详细介绍: 一、背景和目的 在开发应用程序时,数据访问层的实现往往是比较复杂和繁琐的。开发人员需要编写大量的代码来实现诸如数据库连接、查询…...
【娱乐项目】基于批处理脚本与JavaScript渲染视频列表的Web页面
Demo介绍 一个简单的视频播放器应用,其中包含了视频列表和一个视频播放区域。用户可以通过点击视频列表中的项来选择并播放相应的视频,播放器会自动播放每个视频并在播放完毕后切换到下一个视频。本项目旨在通过自动化脚本和动态网页渲染,帮助…...
[MySQL]流程控制语句
流程控制语句需要借助存储过程才有效。关于存储过程,我会在后续的文章详述,本篇文章只是阐述流程控制语句。因此,大家只需要注意存储过程中相应的流程控制语句即可。 如果文中阐述不全或不对的,多多交流。 参考笔记三,…...
Flink在Linux系统上的安装与入门
一、Flink的引入 这几年大数据的飞速发展,出现了很多热门的开源社区,其中著名的有Hadoop、Storm,以及后来的Spark,他们都有着各自专注的应用场景。Spark 掀开了内存计算的先河,也以内存为赌注,赢得了内存计…...
微信小程序Webview与H5通信
背景 近期有个微信小程序需要用到web-view嵌套H5的场景,该应用场景需要小程序中频繁传递数据到H5进行渲染,且需要保证页面不刷新。 由于微信小程序与H5之间的通信限制比较大,显然无法满足于我的业务场景 探索 由于微信小程序与webview的环境是…...
Debezium Engine监听binlog实现缓存更新与业务解耦
飞书文档 解决缓存与数据源数据不一致的方案有很多, 各有优缺点; 1.0、旁路缓存策略, 直接同步更新 读取流程: 查询缓存。如果缓存命中,则直接返回结果。如果缓存未命中,则查询数据库。将数据库查询到的数据写入缓存,并设置一个…...
docker搭建socks5代理
准备工作 VPS安全组/策略放行相应端口如启用了防火墙,放行相应端口 实际操作 我们选用“历史悠久”的Dante socks5 代理服务器,轻量、稳定。Github也有对dante进行进一步精简的镜像,更为适宜。github项目地址如下: https://gi…...
【杂谈】-递归进化:人工智能的自我改进与监管挑战
递归进化:人工智能的自我改进与监管挑战 文章目录 递归进化:人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管?3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...
iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘
美国西海岸的夏天,再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至,这不仅是开发者的盛宴,更是全球数亿苹果用户翘首以盼的科技春晚。今年,苹果依旧为我们带来了全家桶式的系统更新,包括 iOS 26、iPadOS 26…...
反向工程与模型迁移:打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下,商品详情API作为连接电商平台与开发者、商家及用户的关键纽带,其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息(如名称、价格、库存等)的获取与展示,已难以满足市场对个性化、智能…...
云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地
借阿里云中企出海大会的东风,以**「云启出海,智联未来|打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办,现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...
Cesium1.95中高性能加载1500个点
一、基本方式: 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
系统设计 --- MongoDB亿级数据查询优化策略
系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log,共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题,不能使用ELK只能使用…...
Neo4j 集群管理:原理、技术与最佳实践深度解析
Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...
【HTTP三个基础问题】
面试官您好!HTTP是超文本传输协议,是互联网上客户端和服务器之间传输超文本数据(比如文字、图片、音频、视频等)的核心协议,当前互联网应用最广泛的版本是HTTP1.1,它基于经典的C/S模型,也就是客…...
uniapp 字符包含的相关方法
在uniapp中,如果你想检查一个字符串是否包含另一个子字符串,你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的,但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...
