网站分析方法与数据可视化腾讯数据平台部Johnnyzheng(郑灿双)Agenda•网站测速统计•站内广告效果分析•指定来源跟踪•页面可视化之页面热区图•页面可视化案例分享网站测速•网页渲染和资源拉取的耗时统计scripttype=“text/javascript”var_speedMark=newDate();/scriptthis.url.push(&r3=+(newDate()-_speedMark));问题1:如果嵌入腾讯分析的cgi位置不在末尾,计算的网页渲染耗时就不准确。问题2:需要站长额外增加脚本段(DZ论坛除外),提高了技术门槛。站内广告效果分析•监控网站内指定媒体素材的曝光及其点击情况第二步:监控代码转换•将素材html代码到管理台做转换•JS正则,为媒体素材源代码增加预定义的click事件•采集脚本库负责收集广告位的曝光及其点击信息指定来源跟踪•通过自定义标识对网站来源进行分流,从而有效衡量不同转化质量。编辑素材或者交换链链接,增加来源标识收集来源分流标识,增加相应上报字段按照来源分流标识进行汇总数据可视化•1.链接热点图–当使用链接热点图监控你的网站页面的时候,您可以直观的观察页面上点击元素被点击的次数和百分比。–代表作:CrazyEggOverlay百度统计链接点击图•2.热区图–监控访客在您网站某个页面上的所有点击行为,通过热区图的绘制展现,可以很直观的看出页面哪里是热的,进而进行页面元素的调优和改进。–代表作:CrazyEggHeatmapPtmind可视化点击热图腾讯分析页面热区图页面热区图–将用户点击行为相关数据采集组织起来,上报接入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、更多…谢谢大家!