User Interaction Tracker

用户交互跟踪器是一个用于跟踪用户行为和时间的库。它提供了一种轻量级的方式来记录用户的交互操作，支持Vue2、Vue3以及其他JavaScript框架。它提供了灵活的API和插件机制，方便集成到各种项目中。如：开始和结束某个操作的时间，以及操作的持续时间（duration）。

English

特性

• 跟踪用户开始和结束操作的时间
• 计算并记录操作的持续时间 duration
• 支持自定义的上传日志函数
• 支持在 Vue 2 、 Vue 3 和 React 项目中使用，以及其他框架示例（如jQuery或原生JavaScript）
• 操作简单：startAction、endAction，支持多个跟踪

安装

使用 npm 安装：

npm install user-interaction-tracker

使用 yarn 安装：

yarn add user-interaction-tracker

简单示例（以 Vue 3 为例）

在 main.ts 中注册插件

// main.tsimport{createApp}from'vue';importAppfrom'./App.vue';importuserInteractionTracker,{UploadLogFunction}from'user-interaction-tracker';constapp=createApp(App);constuploadLog: UploadLogFunction=(action,type,data)=>{console.log(`Action: ${action}, Type: ${type}`,data);};app.use(userInteractionTracker,{
uploadLog,globalName: '$userTracker',// 可选，默认为'$userTracker'enabled: true// 可选，默认为false});app.mount('#app');

在组件中使用

<template><div><button @click="handleStartAction">开始记录</button><button @click="handleEndAction">结束记录</button></div></template><scriptlang="ts"setup>import{ getCurrentInstance, ref, onMounted }from'vue';consttracker=getCurrentInstance()?.appContext.config.globalProperties.$userTracker;// 开始操作consthandleStartAction=()=>{tracker.startAction('action_name');};// 结束操作consthandleEndAction=()=>{tracker.endAction('action_name');};</script>

示例详情

1、Vue2 代码详细示例

2、Vue3 代码详细示例

3、React 代码详细示例

4、其他框架示例（如jQuery或原生JavaScript）代码详细示例

配置选项

参数	类型	描述	默认值
uploadLog	函数	用于上传日志的函数，接收三个参数：action（操作名称），type（操作类型），data（操作数据）	必填
enabled	布尔值	是否启用	false
globalName	字符串	在 Vue 实例中全局挂载追踪器的名称	$userTracker

API

方法	描述	参数	返回值
startAction(action: string, options?: any)	开始记录一个操作	action (字符串): 操作名称 options (可选, any): 开始操作的额外信息	无
endAction(action: string, options?: any)	结束记录一个操作	action (字符串): 操作名称 options (可选, any): 结束操作的额外信息	无
getPendingActions(action?: string)	获取未完成的操作。如果传递 action 参数，返回该操作的详细信息；否则返回所有未完成的操作。	action (可选, 字符串): 操作名称	Object or Array
clearActions(actions?: string[]): void	清除指定的操作记录。如果不传递参数，清除所有操作记录。	actions (可选, 数组): 要清除的操作名称数组	无
track(action: string, options?: any)	交互埋点	action (字符串): 操作名称 options (可选, any): 额外信息	无

UploadLogFunction

typeUploadLogFunction=(action: string,type: 'duration'|'endAction'|'startAction'|'track',data?: {duration: number,start: number|null,end: number|null,startOptions: any,endOptions: any,})=>void;

贡献

欢迎提出问题、报告 bug 或提出新功能请求。请在 GitHub Issues 中提出。

许可证

MIT 许可证。请参阅 LICENSE 文件了解更多详情。