网站分析方法与数据可视化-郑灿双

网站分析方法与数据可视化 腾讯 数据平台部Johnnyzheng （郑灿双）Agenda•网站测速统计•站内广告效果分析•指定来源跟踪•页面可视化之页面热区图•页面可视化案例分享网站测速•网页渲染和资源拉取的耗时统计this.url.push("&r3=" + (new Date() - _speedMark));问题 1 ：如果嵌入腾讯分析的 cgi 位置不在末尾，计算的网页渲染耗时就不准确。问题 2 ：需要站长额外增加脚本段 (DZ 论坛除外 ) ，提高了技术门槛。站内广告效果分析•监控网站内指定媒体素材的曝光及其点击情况指定来源跟踪•通过自定义标识对网站来源进行分流，从而有效衡量不同转化质量。编辑素材或者交换链链接，增加来源标识收集来源分流标识，增加相应上报字段按照来源分流标识进行汇总数据可视化•1. 链接热点图–当使用链接热点图监控你的网站页面的时候，您可以直观的观察页面上点击元素被点击的次数和百分比。–代表作： Crazy Egg Overlay 百度统计链接点击图•2. 热区图–监控访客在您网站某个页面上的所有点击行为，通过热区图的绘制展现，可以很直观的看出页面哪里是热的，进而进行页面元素的调优和改进。–代表作： Crazy Egg Heatmap Ptmind 可视化点击热图 腾讯分析页面热区图页面热区图–将用户点击行为相关数据采集组织起来，上报接入 server 待解析计算。–去毛疵数据，数据合并，标准化。–将点击数换算为 (0,1] 的比率，再映射为 (0,255]区间的值。–点击坐标转换，合并生成灰度热图，渲染渐变彩色热区图。热区图 - 数据采集收集客户端用户点击行为的位置坐标信息方案 1 ：每个站点一个热区配置列表脚本，在监控脚本内部请求它，后 台根据配置更新时间重新生成。方案 2 ：非静态监控脚本，提供 cgi ，借助缓存和 cron 程序，达到动态更新热区图页面配置的目的。将所有点击坐标均转换为满屏下的 x ， y 标准坐标，并上报此时分辨率，到后台转化为相对于屏幕中轴的 x ， y 坐标热区图 - 数据采集P0 是满屏下面的点击坐标， P 为非满屏幕状态下。通过将非满屏下的点等效转化为满屏状态下的点击坐标。？热区图 - 数据预处理去毛疵数据相对比较简单过滤掉 x ，y 小于 0 或者超过阀值的数据：将单点的点击坐标数据按照 10*10 的正方形块做聚合，统一映射到重心点坐标。将点击数以最大点击数为基准转换为(0,1] 的比率。防止因为点击量分布不均匀导致绘制的热区图颜色过渡不平滑，需要将其平滑打散。热区图 - 颜色换算由之前的数据处理得到的均匀分布的比率值，在这里转化为相应的 rgb 值，并绘制灰度图。热区图 - 生成热区图用户通过前端直观的看到页面哪里是热区。1 、利用 iframe加载用户的真实的配置页面。1 、创建与满屏视窗等大的透明div ，置于iframe 上。2 、 div 加载经过前三步渲染而来的彩色渐变图。1 、针对热区图初始化拉框工具js 库，支持用户拉框统计。更多数据可视化案例1 、矩阵图2 、气泡散点图3 、雷达图4 、 TreeMap5 、实时交易图6 、更多…谢谢大家！