@uxda/appkit 4.2.93 → 4.2.94

package/src/shared/tracking/examples/data-structure-example.ts

@@ -0,0 +1,239 @@
+/**
+ * 埋点数据结构示例
+ * 展示新版数据结构的实际输出
+ */
+
+import type { TrackingMainData } from '../tracking-sdk'
+
+/**
+ * 示例1: 页面访问埋点
+ * 当用户访问商品详情页时自动生成
+ */
+export const pageViewExample: TrackingMainData = {
+  log_id: '1732181400000_abc123def',
+  log_time: 1732181400000,
+  log_type: 'page',
+  tenant_id: '1',
+  user_id: 'user_123456',
+  source: 'H5',
+  session_id: 'session_abc123def456',
+  log_data: {
+    page: {
+      page_name: '商品详情页',
+      page_url: 'https://example.com/products/123',
+      page_referrer: 'https://example.com/home',
+      previous_page_name: '首页',
+      page_start_time: '2024-11-21T09:25:00Z',
+      page_duration: 0, // 刚进入页面,停留时间为0
+    },
+  },
+}
+
+/**
+ * 示例2: 点击事件埋点
+ * 当用户点击"加入购物车"按钮时触发
+ */
+export const clickEventExample: TrackingMainData = {
+  log_id: '1732181405000_def456ghi',
+  log_time: 1732181405000,
+  log_type: 'page/event',
+  tenant_id: '1',
+  user_id: 'user_123456',
+  source: 'H5',
+  session_id: 'session_abc123def456',
+  log_data: {
+    page: {
+      page_name: '商品详情页',
+      page_url: 'https://example.com/products/123',
+    },
+    event: {
+      event_type: 'click',
+      event_name: '加入购物车按钮点击',
+      element_id: 'add_to_cart_btn',
+    },
+  },
+}
+
+/**
+ * 示例3: 自定义业务事件埋点
+ * 当用户完成购买时触发
+ */
+export const customBusinessEventExample: TrackingMainData = {
+  log_id: '1732181410000_ghi789jkl',
+  log_time: 1732181410000,
+  log_type: 'event/',
+  tenant_id: '1',
+  user_id: 'user_123456',
+  source: 'H5',
+  session_id: 'session_abc123def456',
+  log_data: {
+    event: {
+      event_type: 'custom',
+      event_name: 'purchase_complete',
+    },
+  },
+}
+
+/**
+ * 示例4: 带性能数据的页面埋点
+ * 记录页面加载性能
+ */
+export const performanceExample: TrackingMainData = {
+  log_id: '1732181415000_jkl012mno',
+  log_time: 1732181415000,
+  log_type: 'performance',
+  tenant_id: '1',
+  user_id: 'user_123456',
+  source: 'H5',
+  session_id: 'session_abc123def456',
+  log_data: {
+    performance: {
+      page_load_time: 1250, // 页面加载时间1.25秒
+      response_time: 320, // API响应时间320毫秒
+      fps: 60, // 帧率60fps
+      memory_usage: 45.2, // 内存使用45.2%
+      battery_usage: 15.8, // 电池使用15.8%
+      network_latency: 120, // 网络延迟120毫秒
+      crash_rate: 0.1, // 崩溃率0.1%
+    },
+  },
+}
+
+/**
+ * 示例5: 带错误信息的埋点
+ * 记录API调用失败
+ */
+export const errorExample: TrackingMainData = {
+  log_id: '1732181420000_mno345pqr',
+  log_time: 1732181420000,
+  log_type: 'error',
+  tenant_id: '1',
+  user_id: 'user_123456',
+  source: 'H5',
+  session_id: 'session_abc123def456',
+  log_data: {
+    error: {
+      error_code: 'TIMEOUT',
+      error_message: '请求超时：接口 /api/products/123 响应时间超过3秒',
+      stack_trace:
+        'Error: Request timeout\n    at fetchProduct (api.ts:45)\n    at ProductDetail.vue:123',
+      error_level: 'error',
+      error_context: JSON.stringify({
+        api: '/api/products/123',
+        method: 'GET',
+        timeout: 3000,
+      }),
+    },
+  },
+}
+
+/**
+ * 示例6: 完整的埋点数据
+ * 包含所有可能的字段
+ */
+export const completeExample: TrackingMainData = {
+  log_id: '1732181425000_pqr678stu',
+  log_time: 1732181425000,
+  log_type: 'page/event/app/device/performance/error',
+  tenant_id: '1',
+  user_id: 'user_123456',
+  source: 'H5',
+  session_id: 'session_abc123def456',
+  log_data: {
+    page: {
+      page_name: '商品详情页',
+      page_url: 'https://example.com/products/123',
+      page_referrer: 'https://example.com/home',
+      previous_page_name: '首页',
+      page_start_time: '2024-11-21T09:25:00Z',
+      page_duration: 300000,
+    },
+    event: {
+      event_type: 'click',
+      event_name: '加入购物车按钮点击',
+      element_id: 'add_to_cart_btn',
+    },
+    app: {
+      app_version: '3.2.1',
+      package_name: 'com.example.app',
+      app_channel: 'H5',
+    },
+    device: {
+      device_type: 'mobile',
+      os: 'iOS',
+      os_version: '16.5',
+      brand: 'Apple',
+      model: 'iPhone 14 Pro',
+      network_type: '5G',
+    },
+    performance: {
+      page_load_time: 1250,
+      response_time: 320,
+      fps: 60,
+      memory_usage: 45.2,
+      battery_usage: 15.8,
+      network_latency: 120,
+      crash_rate: 0.1,
+    },
+    error: {
+      error_code: '',
+      error_message: '',
+      stack_trace: '',
+      error_level: 'info',
+      error_context: '',
+    },
+  },
+}
+
+/**
+ * 使用示例代码
+ */
+export const usageExamples = {
+  // 1. 基本点击事件
+  async trackButtonClick() {
+    const { trackClick } = await import('../tracking-sdk')
+    await trackClick('submit_btn', '提交按钮')
+  },
+
+  // 2. 自定义业务事件
+  async trackPurchase(orderId: string, amount: number) {
+    const { trackCustom } = await import('../tracking-sdk')
+    await trackCustom('purchase_complete', {
+      order_id: orderId,
+      amount,
+      currency: 'CNY',
+    })
+  },
+
+  // 3. 带性能数据的埋点
+  async trackPagePerformance(loadTime: number, responseTime: number) {
+    const { trackCustom } = await import('../tracking-sdk')
+    await trackCustom('page_performance', {
+      performance: {
+        page_load_time: loadTime,
+        response_time: responseTime,
+        fps: 60,
+      },
+    })
+  },
+
+  // 4. 带错误信息的埋点
+  async trackError(error: Error, context: string) {
+    const { trackCustom } = await import('../tracking-sdk')
+    await trackCustom('error_occurred', {
+      error: {
+        error_code: error.name,
+        error_message: error.message,
+        stack_trace: error.stack,
+        error_level: 'error',
+        error_context: context,
+      },
+    })
+  },
+
+  // 5. 页面访问埋点
+  async trackPageVisit(pageTitle: string) {
+    const { trackPageView } = await import('../tracking-sdk')
+    await trackPageView(pageTitle)
+  },
+}

package/src/shared/tracking/examples/directive-tracking-example.vue

@@ -0,0 +1,202 @@
+<template>
+  <view class="directive-tracking-example">
+    <view class="header">
+      <text class="title">埋点指令使用示例</text>
+    </view>
+
+    <!-- 页面访问埋点示例 -->
+    <view class="section">
+      <text class="section-title">页面访问埋点</text>
+      <view class="content">
+        <view v-track-page="'指令页面访问示例'">
+          <text>此区域已启用页面访问埋点</text>
+        </view>
+
+        <view v-track-page="{ pageTitle: '自定义页面标题', customData: { pageType: 'example' } }">
+          <text>此区域使用自定义配置的页面访问埋点</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 点击埋点示例 -->
+    <view class="section">
+      <text class="section-title">点击埋点</text>
+      <view class="content">
+        <!-- 基础点击埋点 -->
+        <button v-track-click="'basic_click'" class="btn">基础点击埋点</button>
+
+        <!-- 带数据的点击埋点 -->
+        <button
+          v-track-click="{
+            event: 'custom_click',
+            data: { buttonType: 'primary', value: 123 },
+          }"
+          class="btn">
+          自定义数据点击埋点
+        </button>
+
+        <!-- 带元素信息的点击埋点 -->
+        <button
+          id="custom-btn"
+          v-track-click="{
+            event: 'element_click',
+            elementId: 'custom-btn',
+            elementText: '自定义元素信息',
+            data: { action: 'submit' },
+          }"
+          class="btn btn-secondary">
+          自定义元素信息点击埋点
+        </button>
+      </view>
+    </view>
+
+    <!-- 滚动埋点示例 -->
+    <view class="section">
+      <text class="section-title">滚动埋点</text>
+      <view class="content">
+        <!-- 基础滚动埋点 -->
+        <view v-track-scroll="true" class="scroll-demo">
+          <text>滚动到此区域会触发埋点</text>
+        </view>
+
+        <!-- 自定义滚动埋点 -->
+        <view
+          v-track-scroll="{
+            threshold: 0.3,
+            data: { section: 'custom_scroll' },
+            trackDirection: true,
+          }"
+          class="scroll-demo">
+          <text>自定义配置的滚动埋点（阈值30%）</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 组合使用示例 -->
+    <view class="section">
+      <text class="section-title">组合使用示例</text>
+      <view class="content">
+        <view v-track-page="{ pageTitle: '组合示例页面' }" v-track-scroll="{ threshold: 0.5 }">
+          <button
+            v-track-click="{
+              event: 'combo_click',
+              data: { combo: true },
+            }"
+            class="btn">
+            组合埋点按钮
+          </button>
+        </view>
+      </view>
+    </view>
+
+    <!-- 指令说明 -->
+    <view class="section">
+      <text class="section-title">指令说明</text>
+      <view class="content">
+        <text class="instruction">v-track-page: 页面访问埋点，支持页面标题和自定义数据</text>
+        <text class="instruction">v-track-click: 点击埋点，支持事件名称、元素信息和自定义数据</text>
+        <text class="instruction">v-track-scroll: 滚动埋点，支持滚动阈值和方向跟踪</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { trackingSDK } from '../tracking-sdk'
+
+// 页面挂载时的处理
+onMounted(() => {
+  // 发送页面访问埋点
+  trackingSDK.trackPageView('埋点指令使用示例页面')
+})
+</script>
+
+<style scoped>
+.directive-tracking-example {
+  padding: 20px;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #333;
+}
+
+.section {
+  margin-bottom: 30px;
+  background-color: white;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 15px;
+  display: block;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.btn {
+  background-color: #007aff;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  padding: 12px 20px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.btn:hover {
+  background-color: #0056cc;
+}
+
+.btn:active {
+  background-color: #004499;
+}
+
+.btn-secondary {
+  background-color: #6c757d;
+}
+
+.btn-secondary:hover {
+  background-color: #545b62;
+}
+
+.scroll-demo {
+  height: 200px;
+  background-color: #e8f4fd;
+  border: 2px dashed #007aff;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  color: #007aff;
+  font-weight: bold;
+}
+
+.instruction {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.5;
+  display: block;
+  margin-bottom: 8px;
+}
+</style>

package/src/shared/tracking/examples/global-tracking-example.vue

@@ -0,0 +1,25 @@
+<template>
+  <view>
+    <!-- 使用全局埋点方法 -->
+    <button @click="handleClick">点击按钮</button>
+  </view>
+</template>
+
+<script setup lang="ts">
+// 使用全局埋点方法（已在app.ts中注册）
+const handleClick = () => {
+  // 使用全局 $track 方法
+  this.$track('button_click', {
+    buttonId: 'submit',
+    page: 'example',
+  })
+
+  // 使用全局 $trackPage 方法
+  this.$trackPage('页面标题', {
+    customData: 'value',
+  })
+
+  // 使用全局 $trackClick 方法
+  this.$trackClick('button-id', '按钮文本')
+}
+</script>

package/src/shared/tracking/examples/page-tracking-template.vue

@@ -0,0 +1,27 @@
+<template>
+  <view>
+    <!-- 你的页面内容 -->
+  </view>
+</template>
+
+<script setup lang="ts">
+// 导入自动埋点组合式函数
+import { usePageTracking } from '~/composables/useAutoTracking'
+
+// 启用页面级自动埋点
+const tracking = usePageTracking({
+  pageTitle: '页面标题', // 自定义页面标题
+  customData: {
+    pageType: 'example', // 自定义页面类型
+    // 其他自定义数据
+  },
+})
+
+// 可选：手动埋点示例
+const handleCustomEvent = () => {
+  tracking.trackEvent('custom_button_click', {
+    buttonType: 'primary',
+    action: 'submit',
+  })
+}
+</script>

package/src/shared/tracking/examples/sdk-tracking-example.vue

@@ -0,0 +1,33 @@
+<template>
+  <view>
+    <!-- 页面内容 -->
+  </view>
+</template>
+
+<script setup lang="ts">
+import { trackingSDK, TrackingEventType } from '../tracking-sdk'
+
+// 页面访问埋点
+trackingSDK.trackPageView('示例页面')
+
+// 自定义事件埋点
+const handleCustomEvent = () => {
+  trackingSDK.trackCustom('custom_event', {
+    action: 'click',
+    element: 'button',
+  })
+}
+
+// 业务事件埋点
+const handleBusinessEvent = () => {
+  trackingSDK.trackBusiness(TrackingEventType.CUSTOM, {
+    businessType: 'order',
+    action: 'create',
+  })
+}
+
+// 点击事件埋点
+const handleClick = () => {
+  trackingSDK.trackClick('button-id', '按钮文本')
+}
+</script>

package/src/shared/tracking/index.ts

@@ -0,0 +1,5 @@
+import { usePageTracking } from './useAutoTracking'
+import { trackingSDK } from './tracking-sdk'
+import { initTracking, installTrackingPlugin } from './tracking-init'
+
+export { usePageTracking, trackingSDK, initTracking, installTrackingPlugin }