网页热图就是将网页以热力图的方式来呈现出访客对所在页面位置区域的热衷程度。网页热图研究是交互体验当中非常重要的部分，以最贴近我们生活的例子来说，你会发现不同电商购物网站首页和产品页在呈现上，包括目录，标题，首图，附图的分布设计都有共同之处。
热力图大致分为视觉（鼠标移动）热力图，点击热力图和滚动热力图
- 视觉热力图通过鼠标移动来查看访问者正在关注的地方以及他们正在阅读的哪些部分。研究表明，鼠标移动和眼睛的运动高度相关。
- 点击热力图是发现访问者用鼠标点击了什么，不管是按钮、链接、图片还是他们希望成为链接的文本。
- 滚动热力图是显示访问者在网站页面上向下滚动的幅度，找出访问者关注到页面的哪个部分（中间或者底部），从中发现页面上放置最重要内容的位置：例如“购买”按钮或特殊折扣横幅。
有个热图研究工具，叫hotjar，它不仅仅可以得到网站热图，你还可以观看视频的方式查看访客在你网站的行为与轨迹。刚好，我前几天建好的一个shopify网站被客户弃单了，我需要知道弃单原因并对网站进行优化。对于购物网站弃单的原因，可以参考这篇文章https://zhuanlan.zhihu.com/p/14662018，主要有以下原因：
- 客户真的不想买了
- 交互体验不好，客户必须注册账户才能进行结账，太麻烦
- 运费贵，不想要了
- 货币或者支付方式不对
- 网站没有安全标识
- 没有售后服务或者运输政策
所以，我开始为我的网站安装hotjar了，进入https://apps.shopify.com/，找到hotjar
下一步安装的时候发现shopify应用商品已经不支持hotjar。还好，凭着这一大把年纪的生活经验，我马上换了个思路，我跳转并登陆谷歌账户，用谷歌账户注册hotjar（和shopify店铺同一个gmail邮箱），注册好之后输入shopify网址并继续，
然后到这一步，选择安装的方法，我不得不通过手动安装代码，因为：
Shopify doesn’t allow third-party scripts in their built-in Checkout
You can only track your Storefront and your “Order Confirmation” page with Hotjar, because Shopify’s default checkout pages blocks Hotjar and other third-party scripts.
Shopify 不允许在其内置 Checkout 中使用第三方脚本
您只能使用 Hotjar 跟踪店面和“订单确认”页面，因为 Shopify 的默认结帐页面会阻止 Hotjar 和其他第三方脚本
所以，复制这个代码，并 将 Hotjar 代码粘贴到希望跟踪用户和收集反馈的每个页面的 <head> 中。 然后验证安装
回到 Shopify 仪表板中，单击在线商店。
然后单击模板，并选择右侧编辑代码
选择theme.liquid，并向下滚动找到 </head>，将刚才复制的黏贴到</head>之前。
Hotjar 跟踪代码现在已经安装在你的店铺上。要同时跟踪订单确认，您需要在另一部分安装跟踪代码。进入shopify管理后台，进入设置-结账，向下滚动，直到订单状态页面，将刚才复制的添加并保存。
Hotjar 跟踪代码现在已经安装在你的订单确认页面上了。然后你回到hotjar管理后台，找到site dashboard，你可以发现hotjar的跟踪代码已经成功安装到你的shopify网站，大约第二天就可以看数据了。（wordpress后台安装hotjar就更简单了，这里不再赘述，只要在wordpress后台找到插件-安装插件-hotjar就可以安装）
PS：把hotjar结合 google analytics后台的行为-行为流，你可以得到更准确的判断
第二天上班后，我打开hotjar，并找到右侧的访客行为记录Video，并点击play播放，开始观看客户访问记录
看完这个，我惊出一身冷汗，之前网站建好之后，总是自我感觉良好，以为没有什么大问题。从访客视角看了网站之后，才知道原来：下方有个无用的弹窗总是出现、带有新客20%code的聊天机器人窗口没有成功启用、部分商品的价格数字部分被隐藏….. 这要是不弃单才怪，赶紧优化去。
所以，
真正以客户为中心，一定不是说说而已。
永远保持像水一样甘于居下的谦虚态度。
自己的感觉判断一定需要得到有效验证。
切记，切记！
附：
道德经第八章
上善若水。水善利万物而不争，处众人之所恶（wù），故几（jī）于道。居善地，心善渊，与善仁，言善信，正善治，事善能，动善时。夫唯不争，故无尤。
