大数据分析技术系列展示前端数据统计结果方法.pdfVIP

【大数据分析技术系列】 展示前端数据统计结果的方法 目 录 前端数据有哪些？ 1 数据需求分类1 1、访问1 2、性能2 3、点击2 4、异常3 5、其他3 如何采集？ 3 如何展示： 5 浏览器的占比情况：6 用户的登陆情况：6 用户的地理位置分布：6 浏览器的多天占比波动情况7 表格展示：7 总结 8 对于一个成熟的产品来说，隐藏在产品背后的数据分析是非常重要的，也是 必不可少的。特别是在重视用户体验的今天，需要我们及时了解产品的使用情况， 分析数据中隐藏的信息，为产品的提升和改进提供数据支撑。 随着 web 技术的蓬勃发展，前端的展示、交互越来越复杂，在用户的访问、 操作过程中产生了大量的数据。由此，前端的数据分析也变得尤为重要。当然， 对于站长来说，你可以使用百度统计等各种已有的服务平台，但是，如果现有的 统计平台不能满足你的需要，你想开发自己定制化的数据统计平台，或者你是一 个纯粹的 geek，想了解背后隐藏的技术，又或者你对前端的数据统计感兴趣， 本文就能满足你那颗好奇的心。下面就逐步描述前端有哪些数据、如何采集前端 的数据、以及如何展示数据统计的结果。 前端数据有哪些？ 前端的数据其实有很多，从大众普遍关注的 PV、UV、广告点击量，到客户 端的网络环境、登陆状态，再到浏览器、操作系统信息，最后到页面性能、JS 异 常，这些数据都可以在前端收集到。数据很多、很杂，不进行很好的分类肯定会 导致统计混乱，也不利于统计代码的组织，下面就对几种普遍的数据需求进行了 分类： 数据需求分类 1、访问 访问数据是基于用户每次在浏览器上打开目标页面来统计的，它是以 PV 为 粒度的统计，一个 PV 只统计一次访问数据。访问数据可以算作是最基础、覆盖 面最广的一种统计，可以统计到很多的指标项，下面列出了一些较为常见的指标 项： PV/UV：最基础的 PV （页面访问数量）、UV （独立访问用户数量） 页面来源：页面的 refer，可以定位页面的入口 操作系统：了解用户的 OS 状况，帮助分析用户群体的特征，特别是移动端， iOS 和 Android 的分布就更有意义了 浏览器：可以统计到各种浏览器的占比，对于是否继续兼容 IE6、新技术 （HTML5、CSS3 等）的运用等调研提供参考价值 分辨率：对页面设计提供参考，特别是响应式设计 登录率：百度也开始看重登陆，登陆用户具有更高的分析价值，引导用户登 陆是非常重要的 地域分布：访问用户在地理位置上的分布，可以针对不同地域做运营、活动 1 等 网络类型：wifi/3G/2G，为产品是否需要适配不同网络环境做决策 访问时段：掌握用户访问时间的分布，引导消峰填谷、节省带宽 停留时长：判断页面内容是否具有吸引力，对于需要长时间阅读的页面比较 有意义 到达深度：和停留时长类似，例如百度百科，用户浏览时的页面到达深度直 接反映词条的质量 2、性能 页面 DOM 结构越来越复杂，但是又要追求用户体验，这就对页面的性能提 出了更高的要求。性能的监控数据主要是用来衡量页面的流畅程度，也有一些主 要的指标： 白屏时间：用户从打开页面开始到页面开始有东西呈现为止，这过程中占用 的时间就是白屏时间 首屏时间：用户浏览器首屏内所有内容都呈现出来所花费的时间 用户可操作时间：用户可以进行正常的点击、输入等操作 页面总下载时间：页面所有资源都加载完成并呈现出来所花的时间，即页面 onload 的时间 自定义的时间点：对于开发人员来说，完全可以自定义一些时间点，例如： 某个组件 init 完成的时间、某个重要模块加载的时间等等 这里只是解释了这些指标的含义，具体的判断、统计