网站分析方法与数据可视化 腾讯 数据平台部 Johnnyzheng（郑灿双） Agenda 网站测速统计 站内广告效果分析 指定来源跟踪 页面可视化之页面热区图 页面可视化案例分享 网站测速 网页渲染和资源拉取的耗时统计 问题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、TreeMap 5、实时交易图 6、更多… 。。。以下略