自建埋点数据可视化系统-从前端到后台

最新推荐文章于 2025-11-06 16:02:28 发布

原创

最新推荐文章于 2025-11-06 16:02:28 发布 · 3.9k 阅读

19 ·

CC 4.0 BY-SA版权

本文详细介绍自建埋点系统的全过程，涵盖指标设计、数据库设计、Java后台与Vue前端开发，以及客户端埋点API实现。系统采用MySQL、SpringBoot、MyBatis、Vue和ElementsUI等主流技术，提供丰富的可视化分析，监控日常运营情况。

前期做了埋点后可进行丰富的可视化实现，用来监控日常的运营情况。网上所谓的自动化埋点也并非全自动化的，而且要引入一套第三方的代友，你的用户数据都被发送到了第三方的服务器，非常的不放心，所以自建了一套埋点系统，数据库采用MySQL关系统型数据库，前端VUE+Elements UI，后台采用Spring Boot+MyBatis实现，并非针对Web应用封装了埋点的API,供别人调用，之所以没有采用自动化的埋点方式，是因为不想保存太多乱七八糟的数据，影响分析。

步骤	标题
1	指标设计
2	数据库设计
3	Java后台开发
4	Vue+Webpack前端开发
5	客户端埋点API开发

•ั一、指标设计

首先进行的是指标设计，就是将来要出什么样的统计分析图。常见的图表有下面这些。
1、APP平均访问量对比
所有应用平均访问量对比（周期：累计、近三月，近一月，近一周，当天）———柱状图
说明：因为每个应用对应的用户数是不同的，统计绝对的PV值做对比没有多大的意义，所以定义平均访问量=总访问量/用户人数

1、PV：
A、某应用PV趋势（按周、按天）———折线图
B、某应用中各页面访问量对比（周期：近一月、近一周）———柱状图
C、某应用中各页面访问量趋势（按周、按天）

2、、UV访问量趋势
某用户访问了一次应用，计数+1，同一天重复访问此应用，仍记为访问1次。（按天，按周，折线趋势图）

3、用户存留率
留存率=新增用户中登录用户数/新增用户数*100%，用户留存率对于互联网应用很重要，但是对于BI系统来说，用户不需要注册（全员可用），所以不存在新增用户一说，但是用户流失这种现象依然是存在的，比如某应用上线后用户逐渐不再使用了，我们就要及时采取措施，为此可把用户留存率指标进行改造，以某个周期（如周）的开始为起点，记录此时访问的用户，统计这些用户后续时间的访问流失情况，这样也是有意义的。
A、按周：以周（7天）为单位，假设第一天有100人访问，第二天这100中只有80人访问，则第二天的留存率为80%，第三天这80人中只有20再次访问，则留存率降为20%，以此类推。
B、按月：上月新增用户数在本月访问了应用的个数 / 上个月新增用户数。改造为：上个月访问的用户数在本月依然访问的用户数 / 上个月访问的用户数

4、单应用用户活跃度
A、日活跃用户数（DAU-Daily Activated Users）：某APP日活跃用户数 (此处等于日UV)
B、月活跃用户数（MAU-Month Activated Users）:某APP月活跃用户数
C、用户活跃度（UAUser activity）=本周期内使用APP的用户数/本APP用户总量
周期：天、月、年
各APP日活、周活、月活度对比；（折线图）

5、页面停留时长对比
A、针对某个APP，用户停留时长的页面TOP 5 （按周、按月），可针对某个页面出趋势图
B、可对所有APP统计用户合计时长/用户数（平均用户访问时长）做对比，分析哪个APP用户粘性更大

6、跳出率分析
A、所有APP跳出率对比：用户进入应用就退出的量/总访问量（按周、按月）
B、某应用中各页面的跳出率：用户进入此页面就退出的量/此页面的总访问量（按周、按月）

7、页面用户操作统计
某页面中用户操作Top 5 （按周、按月）

8、单用户分析（针对某应用）
A、某用户活跃性分析（按天、按周、按月，此用户PV趋势折线图）
B、某用户关注点分析（用户常用操作，常看页面，停留时间最长的几个页面）（周期：累计）

9、用户设备统计
A、统计出用户手机机型持有情况（帕累托图：80%访问量的机型）
B、统计IOS和android机型占比

10、各分公司使用情况分析
A、针对某APP，分析33家分公司是否有用户覆盖，各分公司用户量（柱状图），对无用户覆盖的分公司重点关注
B、某分公司使用（对某APP的访问量）趋势图（按天、按周、按月），对访问量整体偏小或下降趋势的分公司重点关注

11、消息推送转化率
A、转化率=点击数/推送数。实现方式：在推送时增加URL参数ATN，埋点load时带上ATN参数，记录在页面加载表里，每推送一条消息就在消息推送日志表中记录下此APP的消息，（统计页面加载表中带ATN参数的记录（去重-同用户同ATN值多次访问记为一次）/消息推送日志表中的记录数）就得到转化率了

•ั二、数据库设计

❣配置表

假如你有很多个项目或应用，配置表保存各个应用，名称，所在平台，只有在配置表里的应用才会被记录访问数据，将来也可以统计不同应用的访问情况。

❣页面访问日志表

页面访问日志记录什么人在什么时间通过什么设备访问了哪个页面，并且停留了多长时间。也就是说用户访问过哪些页面。

❣页面操作日志表

页面操作日志表记录用户在什么时间在页面中做了什么操作，比如点击了一个按钮，或者设置了什么条件等，这种数据是对用户行为和路径进行分析的基础。

•ั三、Java后台开发

项目结构图
使用Spring Boot搭建项目，全注解的方式，除了MyBatis的xml文件，没有多余的配置文件，通过IDea配置项目环境，设置启动器本地调试，前后端分离，Java层只负责Rest接口的输出。
配置项目属性
使用Maven进行打包，把构建好的项目部署到Tomcat下，前端构建的代码发到tomcat里，就可以运行了，不存在跨域问题。但在开发阶段，因为Java和Vue项目是分开启动的，端口不一样，存在跨域，需要配置前端的代理访问。

•ั四、Vue+Webpack前端

前端项目结构
细节不用多说，首先配置项目的编译和代理

❣项目配置

配置代理
这样前端就不存在跨域的问题了，当然代理也可以通过Nginx做，如果发布时Java项目和前端项目不在一起，就比较适合用Nginx做代理，开发时用webpack的代理就行了。

❣引入Elements UI相关的组件

为了减小项目压力，采用部分引入的方式，用不到的组件不引入。

import Vue from 'vue'
import App from './App'
import router from './router'
// import 'bootstrap/dist/js/bootstrap.js'
import 'font-awesome/css/font-awesome.min.css'
import 'bootstrap/dist/css/bootstrap.min.css'
import axios from 'axios'
Vue.prototype.$http = axios
import echarts from 'echarts'
Vue.prototype.$echarts = echarts //引入组件

import {
   
    DatePicker, TimePicker,Select,OptionGroup, Option,Menu, Submenu, MenuItem, MenuItemGroup,Switch,Dialog} from 'element-ui'; Vue.use(DatePicker)
Vue.use(TimePicker)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItem)
Vue.use(MenuItemGroup)
Vue.use(TimePicker)
Vue.use(Switch)
Vue.use(Dialog)
Vue.use(Select)
Vue.use(OptionGroup)
Vue.use(Option)

Vue.config.productionTip = false
Date.prototype.toLocaleString=function(b){
   
   
	var m=this.getMonth()+1;
	if(m<10){
   
   m="0"+m;}
	if(b){
   
   
		return this.getFullYear()+"-"+m+"-"+this.getDate();
	}
	return this.getFullYear()+"-"+m+"-"+this.getDate()+" "+this.getHours()+":"+this.getMinutes()+":"+this.getSeconds();
}
/* eslint-disable no-new */
new Vue({
   
   
  el: '#app',
  router,
  components: {
   
    App },
  template: '<App/>'
})

在App.vue中处理一些路由相关的信息

<template>
  <div class="app">
    <router-view/>
  </div>
</template>

新建Home.vue用来做目录：

<template>
	<div class="home">
		 <div class="banner">
	      <img class="logo" src="./assets/logo.png">
	      元数据管理系统
	      <div class="pull-right banner_tools">
	      	{
   
   {
   
   user.user_name}}  <a href="javascript:void(0)" @click="logout()" class="fa fa-sign-out" title="退出"></a>
	      	<a href="/help" title="帮助" target="_blank"><i class="fa fa-question-circle-o"></i></a>
	      	<a href="/#/users/" title="用户管理" class="users"><i class="fa fa-users"></i></a>
	      </div>
	    &