当前位置：首页 > uni-app

uniapp统计分析

2026-03-26 12:53:44uni-app

数据埋点与统计方案

使用uni统计功能 uni-app官方提供uni统计功能，需在manifest.json中启用。登录uni-admin后台可查看用户行为、设备分布等数据。支持自定义事件统计，通过uni.report()上报自定义事件。

集成第三方统计SDK 常见方案包括友盟、百度统计、Google Analytics等。需在原生端配置SDK（如Android的build.gradle），H5端通过JavaScript SDK引入。示例代码：

// 友盟统计示例
import umeng from 'umeng-web-sdk';
umeng.init('your_app_key');

export default {
  onLaunch() {
    umeng.trackEvent('app_launch');
  }
}

自定义数据上报 通过uni.request接口将数据发送至自有服务器。建议封装通用上报方法：

function trackEvent(eventName, data = {}) {
  uni.request({
    url: 'https://your-api.com/track',
    method: 'POST',
    data: {
      event: eventName,
      timestamp: Date.now(),
      ...data
    }
  });
}

关键指标监控

页面访问路径分析 使用uni.onRouteChange监听路由变化，记录页面停留时长：

uniapp统计分析

let pageStartTime;
uni.onRouteChange((route) => {
  if (pageStartTime) {
    const duration = Date.now() - pageStartTime;
    trackEvent('page_leave', {duration});
  }
  pageStartTime = Date.now();
  trackEvent('page_enter', {url: route.path});
});

用户行为漏斗模型 定义关键事件序列（如浏览->加购->支付），通过事件关联ID实现转化率分析。示例数据结构：

{
  "user_id": "123",
  "funnel_id": "purchase_flow",
  "steps": [
    {"name": "view", "time": "2023-01-01T10:00:00Z"},
    {"name": "add_cart", "time": "2023-01-01T10:05:00Z"}
  ]
}

性能监控方案

启动耗时测量 在App.vue中记录关键时间节点：

uniapp统计分析

const performance = {
  appLaunch: Date.now(),
  firstRender: 0
};

export default {
  onReady() {
    performance.firstRender = Date.now();
    const startupTime = performance.firstRender - performance.appLaunch;
    trackEvent('startup_time', {duration: startupTime});
  }
}

API请求监控 封装uni.request拦截器，记录请求成功率与耗时：

const originalRequest = uni.request;
uni.request = function(config) {
  const start = Date.now();
  return originalRequest({
    ...config,
    success(res) {
      trackEvent('api_success', {
        url: config.url,
        duration: Date.now() - start
      });
      config.success?.(res);
    },
    fail(err) {
      trackEvent('api_fail', {url: config.url});
      config.fail?.(err);
    }
  });
};

数据可视化分析

使用ECharts集成 通过vue-echarts组件展示分析结果。安装依赖后示例：

import ECharts from 'vue-echarts';
import 'echarts/lib/chart/line';

export default {
  components: { 'v-chart': ECharts },
  data() {
    return {
      options: {
        xAxis: { type: 'category', data: ['Mon', 'Tue'] },
        yAxis: { type: 'value' },
        series: [{ data: [820, 932], type: 'line' }]
      }
    };
  }
}

关键指标看板 建议监控的核心指标：