search

Home  >  Q&A  >  body text

javascript - 百度统计--链接点击图 是如何实现的？

http://tongji.baidu.com/web/5473605/custom/pageclk/view?type=link&siteId=1942168&pageClkId=249099

页面里用iframe嵌套了一个完整页面，并在上面覆盖每个可点击链接的点击数等相关数据。 有没有人知道这是如何实现的，以及还有没有类似的例子？

----add----------------
我可能没表述清楚，我想问的是：页面的每个链接对应的点击数都已经有了，存在一组json里，然后这个页面是怎么生成的，就是在iframe里怎么嵌入一个完整的页面，以及为每个链接添加上面的遮罩层

----add----------------
还有没有别的同学有想法？欢迎回答。。：）

高洛峰高洛峰2902 days ago246

reply all(1)I'll reply

  • 巴扎黑

    巴扎黑2017-04-10 12:48:59

    你指的应该是类似这样的页面叠加吧

    这个有两个问题：监控统计鼠标的点击事件、生成点击热图或者页面叠加

    1. 监控统计鼠标的点击事件

    这个功能应该是通过JS实现的，这方面不太了解，链接里有篇文章，可以看下。

    http://www.biaodianfu.com/how-to-make-heatmap.html

    2. 生成点击热图或者页面叠加

    生成热图

    http://www.labsmedia.com/clickheat/index.html

    页面叠加的话，开源的统计系统——piwik中是这样实现的

    <iframe id="Overlay_Iframe" src="index.php?module=Overlay&amp;action=startOverlaySession&amp;idsite=1&amp;period=month&amp;date=today#http://bbs.jconline.cn/" frameborder="0" style="height: 392px; width: 1134px;"></iframe>

    可以看到这里引用的不是原来的页面，而是一个经过服务端处理的页面

    展开iframe

    可以看到在原有的html代码之外，加入了大量的如下代码

    <p class="PIS_LinkTag" style="display: none;"><span>0.4%</span></p>

    也就是说，服务端首先读取你要查看的页面，然后在获取的页面中添加统计数据的html和js等相关代码，然后返还给浏览器。

    百度的实现应该类似。

    希望能帮到你:)

    reply
    0
  • Cancelreply