feat: add track point

frontend-sdk/usage-examples.ts

@@ -0,0 +1,217 @@
+// Analytics SDK 使用示例
+
+import { initAnalytics, getAnalytics } from './analytics';
+
+// 1. 初始化 SDK
+const analytics = initAnalytics({
+  apiUrl: 'https://your-api-domain.com/doc_ai/v1/analytics',
+  token: 'your-auth-token', // 从登录后获取
+  userId: 12345, // 用户ID
+  enableAutoTrack: true, // 启用自动埋点（页面浏览等）
+  debug: true, // 开发环境下启用调试
+});
+
+// 2. 设置用户ID（登录后）
+analytics.setUserId(12345);
+
+// 3. 记录页面浏览
+analytics.trackPageView('首页');
+
+// 4. 记录点击事件
+const handleButtonClick = () => {
+  analytics.trackClick('提交按钮', {
+    button_text: '提交',
+    button_position: 'bottom',
+  });
+};
+
+// 5. 记录表单提交
+const handleFormSubmit = (formData: any) => {
+  analytics.trackFormSubmit('用户注册表单', {
+    form_fields: Object.keys(formData),
+    success: true,
+  });
+};
+
+// 6. 记录任务相关事件
+const handleTaskCreate = (taskId: string) => {
+  analytics.trackTask(taskId, 'create', {
+    task_type: 'formula_recognition',
+    file_type: 'image/png',
+  });
+};
+
+const handleTaskComplete = (taskId: string) => {
+  analytics.trackTask(taskId, 'complete', {
+    duration_seconds: 5.2,
+    success: true,
+  });
+};
+
+// 7. 记录自定义事件
+const handleFileUpload = (file: File) => {
+  analytics.track({
+    event_name: 'file_upload',
+    properties: {
+      file_name: file.name,
+      file_size: file.size,
+      file_type: file.type,
+    },
+    meta_data: {
+      upload_source: 'drag_drop',
+    },
+  });
+};
+
+// 8. 批量记录事件
+const handleBatchActions = () => {
+  analytics.trackBatch([
+    {
+      event_name: 'button_click',
+      properties: { button_name: 'save' },
+    },
+    {
+      event_name: 'data_export',
+      properties: { format: 'pdf' },
+    },
+  ]);
+};
+
+// 9. React 组件中使用
+import React, { useEffect } from 'react';
+
+function HomePage() {
+  useEffect(() => {
+    // 页面加载时记录
+    getAnalytics().trackPageView('首页');
+  }, []);
+
+  const handleClick = () => {
+    getAnalytics().trackClick('首页-开始按钮');
+  };
+
+  return (
+    <div>
+      <h1>首页</h1>
+      <button onClick={handleClick}>开始</button>
+    </div>
+  );
+}
+
+// 10. Vue 组件中使用
+export default {
+  name: 'HomePage',
+  mounted() {
+    getAnalytics().trackPageView('首页');
+  },
+  methods: {
+    handleClick() {
+      getAnalytics().trackClick('首页-开始按钮');
+    },
+  },
+};
+
+// 11. 记录用户行为流程
+class FormulaRecognitionFlow {
+  private analytics = getAnalytics();
+  private taskId: string | null = null;
+
+  // 开始识别流程
+  startRecognition(file: File) {
+    this.analytics.track({
+      event_name: 'formula_recognition_start',
+      properties: {
+        file_name: file.name,
+        file_size: file.size,
+      },
+    });
+  }
+
+  // 上传成功
+  uploadSuccess(taskId: string) {
+    this.taskId = taskId;
+    this.analytics.trackTask(taskId, 'upload_success', {
+      step: 'upload',
+    });
+  }
+
+  // 识别进行中
+  recognitionProcessing() {
+    if (this.taskId) {
+      this.analytics.trackTask(this.taskId, 'processing', {
+        step: 'recognition',
+      });
+    }
+  }
+
+  // 识别完成
+  recognitionComplete(result: any) {
+    if (this.taskId) {
+      this.analytics.trackTask(this.taskId, 'complete', {
+        step: 'complete',
+        has_result: !!result,
+      });
+    }
+  }
+
+  // 识别失败
+  recognitionFailed(error: string) {
+    if (this.taskId) {
+      this.analytics.trackTask(this.taskId, 'failed', {
+        step: 'error',
+        error_message: error,
+      });
+    }
+  }
+
+  // 查看结果
+  viewResult() {
+    if (this.taskId) {
+      this.analytics.trackTask(this.taskId, 'view_result', {
+        step: 'view',
+      });
+    }
+  }
+
+  // 导出结果
+  exportResult(format: string) {
+    if (this.taskId) {
+      this.analytics.trackTask(this.taskId, 'export', {
+        step: 'export',
+        export_format: format,
+      });
+    }
+  }
+}
+
+// 12. 错误追踪
+window.addEventListener('error', (event) => {
+  getAnalytics().track({
+    event_name: 'javascript_error',
+    properties: {
+      error_message: event.message,
+      error_filename: event.filename,
+      error_line: event.lineno,
+      error_column: event.colno,
+    },
+  });
+});
+
+// 13. 性能追踪
+window.addEventListener('load', () => {
+  const perfData = performance.timing;
+  const pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
+  
+  getAnalytics().track({
+    event_name: 'page_performance',
+    properties: {
+      page_load_time: pageLoadTime,
+      dns_time: perfData.domainLookupEnd - perfData.domainLookupStart,
+      tcp_time: perfData.connectEnd - perfData.connectStart,
+      request_time: perfData.responseEnd - perfData.requestStart,
+      dom_parse_time: perfData.domComplete - perfData.domLoading,
+    },
+  });
+});
+
+export {};