前端页面：用户交互持续时间跟踪（duration）user-interaction-tracker

news2024/12/22 9:00:22

引言

在用户至上的时代，精准把握用户行为已成为产品优化的关键。本文将详细介绍 user-interaction-tracker 库，它提供了一种高效的解决方案，用于跟踪用户交互的持续时间，并提升项目埋点的效率。通过本文，你将了解到如何在 Vue、React 以及其他框架中使用这个工具，助你更好地理解用户行为，优化产品性能。

本文亮点

掌握user-interaction-tracker库的核心功能
学习在 Vue、React 中高效集成用户交互跟踪
提升项目埋点效率，优化用户体验
与同行交流，分享你的见解或提问

user-interaction-tracker：你的用户行为分析利器

库的介绍

user-interaction-tracker 是一个用于记录用户交互和时间的 JavaScript 库。它支持 Vue 2、Vue 3、React 以及其他 JavaScript 框架，提供了简单易用的 API 和插件机制。无论你是在开发 Vue 还是 React 应用，或者其他前端项目，这个库都可以轻松集成，帮助你更好地理解用户行为。

目标：实现用户交互持续时间跟踪（duration），并且提升项目埋点效率。

在这里插入图片描述

主要特性

跟踪用户操作时间：记录用户开始和结束操作的时间点。
计算操作持续时间：提供操作的持续时间，方便进行进一步分析。
支持自定义日志上传：可以定义自己的日志上传函数，将数据上传到服务器或进行其他处理。
多框架支持：兼容 Vue 2、Vue 3 和 React，同时也提供了 jQuery 和原生 JavaScript 的示例。
操作简单：提供 startAction 和 endAction 方法，支持多个跟踪实例。

设计理念：灵活、高效、易用

全面适配多样化场景

在设计 user-interaction-tracker 之初，致力于打造一个能够适应不同需求、场景和项目的工具。以下是设计考量：

能不能支持多个跟踪实例？同时达到内存优化的目的？
如何灵活配置，操作简单使用，提升项目埋点效率？
出现异常是否应该暴露异常？
是否可以清除异常数据？

这些问题都需要在封装核心功能时一一解决。

技术亮点

多版本支持：为了确保兼容性，本库兼容 Vue2 和 Vue3，通过 Vue.use() 方便地集成到 Vue 应用中。同时，对 React 和其他 JavaScript 框架的支持使得它能够广泛应用于各种项目。
属性名冲突：为了避免在不同 Vue 项目中出现名称冲突，提供了 globalName 属性配置，允许用户自定义实例名称。
性能优化：在不需要埋点报告的环境（如测试环境）中，可以通过 enabled 选项轻松禁用跟踪，减少不必要的性能开销。此外，使用 Map 替代 Object 来存储数据，优化了频繁操作下的大数据量处理。
异常处理：封装过程中考虑了操作失败、异常暴露及清除异常数据的情况，以确保在出现问题时能够有效处理。

无论是新手还是资深开发者都能轻松上手，大幅提升项目的埋点效率。

实战教程：快速集成 user-interaction-tracker

安装

使用 npm 或 yarn 安装 user-interaction-tracker：

npm install user-interaction-tracker

或

yarn add user-interaction-tracker

在 Vue 和 React 项目中的使用

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', // 可选，自定义全局变量名
  enabled: true // 可选，是否启用
});

app.mount('#app');

在组件中使用

<template>
  <div>
    <button @click="handleStartAction">开始记录</button>
    <button @click="handleEndAction">结束记录</button>
  </div>
</template>

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

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

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

// 结束操作
const handleEndAction = () => {
    tracker.endAction('action_name');
};
</script>

在 React 项目中使用

配置 user-interaction-tracker

// userTracker.ts
import UserInteractionTracker, { UploadLogFunction } from 'user-interaction-tracker';

const uploadLog: UploadLogFunction = (action, type, data) => {
  console.log(`Action: ${action}, Type: ${type}`, data);
};

const userTracker = new UserInteractionTracker({
  uploadLog,
  enabled: true // 可选，默认为false
});

export { userTracker };

在组件中使用

// App.tsx
import React from 'react';
import { userTracker } from './userTracker';

const App: React.FC = () => {
  const handleStartAction = () => {
    userTracker.startAction('someAction');
  };

  const handleEndAction = () => {
    userTracker.endAction('someAction');
  };

  return (
    <div>
      <button onClick={handleStartAction}>Start Action</button>
      <button onClick={handleEndAction}>End Action</button>
    </div>
  );
}

export default App;

配置选项与 API

配置参数

参数	类型	描述	默认值
`uploadLog`	函数	上传日志的函数，接收 `action`（操作名称），`type`（操作类型），`data`（操作数据）	必填
`enabled`	布尔值	是否启用追踪器	`false`
`globalName`	字符串	在 Vue 实例中的全局变量名	`$userTracker`（仅支持vue2&vue3）

API 方法

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