前端埋点系统之鉴权登录页面如何做热力图（三）

Hello，大家好。上次我们介绍了，如何利用heatmap.js来画网页热力占比图，今天我们来讲一下怎么解决鉴权页面的热力图问题。

在不需要登录的网页（如：官网）上画热力图比较方便，热力数据直接覆盖就行了。但是当网页需要鉴权的时候，如：需要登录。那么打开页面的时候，网页就是会因为需要鉴权而自动跳转到登录页，这样热力图数据就完全失效了。如图所示：

关于这个问题，可以通过一下集中方案进行解决：

想看实际效果的同学可以来看看我们的Demo效果，Webfunny前端埋点系统DEMO

一、保持域名相同

通过保持相同的域名，就可以让埋点系统和iframe之间共享cookie里的token数据，从而通过页面的鉴权机制。

优缺点：虽然这种方式效果最好，但是在实际操作中，还是比较困难的；因为埋点属于第三方系统，大部分场景下都不太容易保证跟业务的域名一致。

不推荐这种方式。

二、手动设置cookie

通过配置X-Frame-Options请求头，允许被埋点系统的域名嵌套，然后手动设置下cookie里的token完成登录状态，就可以了。

ctx.set('X-Frame-Options', 'ALLOW-FROM https://cloud.xxx.com/');
或
ctx.set('X-Frame-Options', 'ALLOWALL');

这个设置有一定风险，如果是敏感页面，不建议这样做，而且操作比较复杂，对大部分人来说比较难理解。

不推荐这种方式。

三、通过上传截图方式

以上两种方式都是要在埋点系统里通过iframe加载第三方页面，多多少少都会带点骇客的方式，而且一般操作都比较复杂，所以我们最终采用了截图的方式来解决这个问题。

第一种，通过手动截图，然后上报给埋点系统，作为热力图的背景

如上图所示，用截图做热力背景，非常的高清，效果也很好。我们利用截图工具随手就截了一张图，上传就可以了，操作也非常简单。

就在我认为已经找到了最佳解决方案的时候，发现了另一个让我头疼的问题。网页的高度是不固定的，正常情况下一屏的高度是无法完全展示出来的，如果是很长的商品页就更高了，怎么截图？

虽然肯定有截图工具可以做到截长图，但是得找专业工具才行啊，至少到目前为止，我的脑海里还是没有浮现出哪款工具可以做到截长图，这就让使用成本大大增加了。

所以，我想到了另一个思路...

第二种，利用技术手段实现网页的截屏

我采用的是html2canvas这个开源库来进行截图，利用webfunny埋点系统的可视化圈选能力，可以实时开关截屏按钮，操作门槛很低。

如图所示，立即canvas截图，虽然可以把整个网页截图下来，但是这个插件存在一定的兼容问题，对于一些动图和新的css效果，截图效果并不是很好。但是已经能够满足大部分热力图的场景了。

总结，手动截图，效果高清，但是不方便截长图；canvas截图，效果差点，可以把整个网页截图下来；大家可以在使用的时候，根据情况自己做选择吧。

好了，关于如何在需要鉴权登录页面上做热力图介绍完了，有什么问题可以给我留言。