User-interaction-tracker NPM

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.ts
import { createApp } from 'vue';
import App from './App.vue';
import userInteractionTracker, { UploadLogFunction } from 'user-interaction-tracker';

const app = createApp(App);

const uploadLog: 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>

<script lang="ts" setup>
import { getCurrentInstance, ref, onMounted } from 'vue';

const tracker = getCurrentInstance()?.appContext.config.globalProperties.$userTracker;

// 开始操作
const handleStartAction = () => {
    tracker.startAction('action_name');
};

// 结束操作
const handleEndAction = () => {
    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

type UploadLogFunction = (
  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 文件了解更多详情。

user interaction tracker duration Duration

1 year ago

1 year ago

1 year ago