V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
kchum
V2EX  ›  JavaScript

百度统计的热力图是用js实现的么?

  •  
  •   kchum · 2012-12-12 12:53:10 +08:00 · 7550 次点击
    这是一个创建于 4383 天前的主题,其中的信息可能已经有所发展或是发生改变。
    11点上线的时候关注过,但是不知道怎么实现的。。
    不知道是不是js实现的么?
    能说说具体的函数么?
    13 条回复    1970-01-01 08:00:00 +08:00
    sobigfish
        1
    sobigfish  
       2012-12-13 11:48:07 +08:00
    不用百度,但我想原理是一样得, 这个 ClickHeat | Clicks heatmap http://www.labsmedia.com/clickheat/index.html
    甚至有可能百度是抄得人家得,以绕过gpl协议
    kchum
        2
    kchum  
    OP
       2012-12-13 11:53:27 +08:00
    @sobigfish 感谢回答,昨天找了下,有一个heatmap.js(在github上面有)可以显示。
    可能我描述得不清楚,是指是根据js相关的什么函数,来获取访客的浏览信息,如在页面的哪个位置的停留时间。。
    twm
        3
    twm  
       2012-12-13 12:12:31 +08:00
    没那么复杂,以前做过同样的产品,做的时候百度还没有开始做统计呢。

    在被监测的页面放上监测代码,回传用户的鼠标点击坐标、用户分辨率。

    后台根据分辨率,坐标用php gd生成一个热图。拿目标网页垫底,用办透明的热图覆盖,就是最终看到的效果了。


    @kchum
    sobigfish
        4
    sobigfish  
       2012-12-13 12:19:31 +08:00
    点击是 window.event 么,能得到座标,在根据客户浏览器的window.innerHeight pageYOffset之类计算出点击的具体位置
    访客信息自然是navigator.userAgent
    停留时间可能是加载完成的时间和离开的时间计算的,当中的event也应该是。

    ClickHeat的页面采集js
    http://www.labsmedia.com/clickheat-original.js
    yoyicue
        6
    yoyicue  
       2012-12-13 13:39:28 +08:00
    @sobigfish
    百度统计的 heatmap 呈现是自主用 Flash 实现的 不是 js 的.
    http://tongji.baidu.com/web/flash/click_hot.swf
    sobigfish
        7
    sobigfish  
       2012-12-13 14:43:56 +08:00
    @yoyicue 囧,那是我偏见了-。-,flash的话 移动设备被华丽的无视了?
    yoyicue
        8
    yoyicue  
       2012-12-13 15:24:30 +08:00
    @sobigfish 本身那个网站都不是对移动友好的吧
    kchum
        9
    kchum  
    OP
       2012-12-13 19:08:35 +08:00
    @sobigfish 主要是获取访客数据这块,如果访客不点击,那又该怎么获取呢?
    sobigfish
        10
    sobigfish  
       2012-12-13 19:18:59 +08:00
    @kchum OnMouseMove OnMouseOver
    ninozhang
        11
    ninozhang  
       2012-12-13 22:51:57 +08:00
    曾经项目里用flash实现了一个。
    采集要另外实现,无非是获取鼠标坐标,根据宽度转换计算下。
    然后再用数据生成热图。
    https://github.com/ninozhang/oHeatMap/tree/release
    下载swf然后按h可以看到测试数据,按k可以看到按键帮助
    liuxurong
        12
    liuxurong  
       2012-12-14 00:01:56 +08:00
    这个贴不是LIVID发的 么?
    kchum
        13
    kchum  
    OP
       2012-12-14 00:13:49 +08:00
    @liuxurong 看错了吧。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2825 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 13:15 · PVG 21:15 · LAX 05:15 · JFK 08:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.