安装

npm install tracking-sdk

CDN 方式

<script src="https://cdn.example.com/tracking-sdk.min.js"></script>

npm方式使用

// NPM 方式使用
import { Tracker } from 'tracking-sdk';

// 初始化时会自动收集页面性能指标
const tracker = new Tracker({
  appId: 'your-app-id',
  uploadUrl: 'https://your-api.com/track',
  userId: 'user-123',
});

// 手动追踪事件
tracker.track('button_click', {
  buttonId: 'submit-btn',
  page: 'home'
});

<!-- CDN 方式使用 -->
<script src="https://cdn.example.com/tracking-sdk.min.js"></script>
<script>
const tracker = new Tracker({
  appId: 'your-app-id',
  uploadUrl: 'https://your-api.com/track',
});
</script>

初始化

const tracker = new Tracker({
  appId: 'your-app-id',      // 必填，应用标识
  uploadUrl: 'your-url',     // 必填，上报接口地址
  userId: 'user-id',         // 可选，用户标识
  maxBatchSize: 5 * 1024    // 可选，批量上报阈值，默认5kb
});

API

track(eventName: string, params?: Record<string, any>)

用于手动追踪事件

tracker.track('button_click', {
  buttonId: 'submit',
  page: 'home'
});

自动收集的性能指标

• loadTime: 页面加载时间
• domParseTime: DOM解析时间
• whiteScreenTime: 白屏时间
• firstScreenTime: 首屏时间
• navigationType: 页面导航类型

这个 SDK 实现了以下特性：

1. 支持 NPM 和 CDN 两种引入方式
2. 自动收集页面性能指标
3. 支持手动事件追踪
4. 实现了数据批量上报（20kb 阈值）
5. 完整的 TypeScript 支持
6. 提供了使用示例和文档

你可以根据实际需求进行进一步的扩展，比如：
- 添加更多的性能指标收集
- 实现重试机制
- 添加数据压缩
- 实现本地存储机制等

需要注意的是，这只是一个基础实现，在实际使用中可能需要根据具体需求进行调整和优化。