doc_ai_backed/frontend-sdk/usage-examples.ts

// 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 {};