TeamBlog——规范、高效的项目管理知识库

前言

几乎所有的业务都有统计的需求，当前阶段，我们的产品经理没有足够的运营经验，对于 PV、UV、访问时长、跳出率没有概念，在设计和实施概览类、工作台类页面时，比较吃力

一些说明

为什么不用百度统计

首先，原则上如果需要精细化运营，还是应该使用百度统计、growingIO 等专业为的统计平台为依托，其数据模型、漏斗统计等功能非常强大，我们如果自有业务运营，还是应该接入专业化的统计平台。

现实情况是，我们的客户对于统计没有概念，或者说其运营 level 仅仅处于看看 PV、UV 的阶段，并且对于登陆三方平台查看数据无法接受（囧...）。此外，某些情况下，我们的客户需要拿到明细级数据（结合业务），即哪个用户查看了 xxx 数据。在我的认知中，目前没有哪个免费的统计平台可以对外输出数据，因此满足不了这部分的需求。

PS：如果你知道哪个统计平台可以有效输出数据接口，可以向 TerryQi 宣讲，我们共同讨论。

我们的建设目标

本次搭建统一的数据统计平台，有两个目标：

  1. 提升效率，希望可以通过简单的 1、2、3 步，完成数据接入和统计
  2. 累积业务经验，持续优化统计业务功能，让产品经理对业务统计有概念，进一步提升对于工作台类业务的理解
  3. 提升技术能力，我们团队目前没有大数据量、高并发业务的场景，但数据统计也许可能制造出这场景

PS：我们深刻的认识到，除了基础素养外，技术技能的提升主要依赖于环境，我们需要不断的优化环境（技术环境、业务环境、人文环境），提升团队综合素质

代码位置

如果你没有代码权限，请去联系 TerryQi、婷婷、徐哥申请

  • Java 服务端代码

点击查看open in new window

  • Web 端代码

点击查看open in new window

  • npm 包代码

点击查看open in new window

开始设计

我们先设想一下业务，接入统计平台的过程是这样的：

  1. 先登录综合统计平台open in new window申请一个应用，获取接入的 appKey
  2. 在我的应用中进行接入，将统计数据送入综合统计平台
  3. 管理后台调用综合统计平台的接口，展示业务概览的数据

更好一点： Plus1，能不能编写一个组件库[tongji-ui]，引入后快速展现统计信息 Plus2，提供综合统计平台的 JDK[tongji-jdk]，服务端通过 JDK 可以与统计平台同步

如何使用？

在团队 showdoc 中，有统计平台相关的代码地址，包括：统计平台服务端、统计平台管理端、统计平台-client 接入 js 包、统计平台 vue 组件库

综合统计平台申请应用

先登陆综合统计平台open in new window申请应用，我们的建议是：

  1. 申请一个测试应用，用于测试环境
  2. 申请一个生产应用，用于生产环境

为什么要区分生产应用和测试应用？

因为在统计平台会记录用户的 id，可能生产环境和测试环境的用户的 id 是不同的，如果接入混乱，可能造成数据错乱。例如说我们要展示每日活跃用户排行，那么流程大概是统计平台输出每日的排列信息，业务平台加工数据再展示（在用户 id 的基础上，关联更多的信息）。

登陆平台申请应用

登陆综合统计平台open in new window，账号密码你懂得

平台区分生产和测试环境，应该先建设测试环境的应用，测试环境的 appKey 是TEST-开头，同时允许手动创建测试数据

具体说明

具体说明

具体说明

具体说明

具体说明

前端应用接入

vue 项目丝滑接入，具体过程如下：

  1. 安装 tongji-client
npm install tongji-client
  1. 在 main.js 中进行 tongji-client 的初始化

请注意 appKey 要放在 env 变量中，这样总不会出错

/**
 * 接入综合统计平台
 */
import { TJ_clientInit, TJ_clientCheck } from "tongji-client";

TJ_clientInit("c7167b15-aa7a-4b8a-b74c-6a2cf68400dc");
TJ_clientCheck(false); //TJ_clientCheck方法只是用于check配置信息

其中，TJ_clientInit(appKey,subCode)有两个参数，分别是：

  • appKey：应用 key
  • subCode：子应用编码，很少见，但可能有这个场景，例如一个业务有两个 APP，需要分别统计访问量，那么 subCode 系统不统一管理，由项目经理分配

TJ_clientCheck(debug)，debug 是调试标识，使用该方法可以测试接入的是否正确，debug 给 true 可以在 console 中打印调试信息

具体说明

  1. 接入成功后，在 localstorage 中会有TJ_CLIENT_CONFIG信息，里面存储着应用配置

具体说明

  1. 在你的业务的用户登陆成功的回调中，放入用户信息

TJ_userLogin(userUuid, userType = null, extraUuid = null)

  • userUuid：必填，是用户的唯一标识
  • userType：选填，例如某些业务要统计用户身份，那么可以再这里传入
  • extraUuid：额外的 uuid，也是扩展用的，例如统计部门信息，那么用 extraUuid 来传
import { TJ_userLogin } from "tongji-client";
//完成登录操作
TJ_userLogin(res.result.username); //这里应该放入用户的唯一标识
  1. 在路由守卫中，记录信息
import { TJ_viewRecord } from "tongji-client";

router.beforeEach((to, from, next) => {
  // start progress bar
  TJ_viewRecord(from.fullPath, to.fullPath);
  next();
});

刷新几下页面，登陆综合统计平台看看有没有数据

服务端对接

本想着封装一个 java-sdk 给大家来使用，可是貌似只有一个接口可能有场景会被调用，所以这里暂不封装 sdk

具体接口在 ApiFox 中就有，大家可以封装一个接口调用一下

具体说明

随着业务的发展，如果你的确有需要使用 sdk，那么请联系 TerryQi，我会协助你封装

管理后台对接

同样，本想着封装一个 vue2.0 的组件库供小伙伴使用，但是我的项目与 element-ui 耦合太紧密了，那么这里开放综合统计平台open in new window，如果你的项目是 element 的，那么可以直接 copy

项目使用了

  • element ui
  • echarts

主要代码在 app 目录下

具体说明

每个组件都监听了 startAt 和 endAt，但是如果你想主动刷新组件数据，可以发送TrendRefreshInfo事件

具体说明

当然，你需要在 main.js 中注册总线

具体说明

小结

综合统计平台目前仅仅是初步版本，例如用户操作轨迹、漏斗分析模型等等业务还没有实现，什么时候实现？看公司业务的发展和实际的需求

我们追求的不是八股文代码或者华而不实的体验和功能，我们要持续围绕业务提供价值，关于统计平台如果你有更好的想法，可以随时找 TerryQi 来沟通

Last Updated:
Contributors: TerryQi