免费的网站热力图工具Microsoft Clarity安装及使用教程

在讲网站数据分析时，我多次提到了热力图分析工具，比如hotjar，CrazyEgg、Smartlook、Ptengine，但是这些工具往往都要收费。

上面这些付费软件虽然有免费版本，但是永久免费版本功能太少，付费的版本的试用期又太短，在你网站没多少流量的情况下，很难去充分利用并尝试这些功能。

鉴于这些因素，网站数据分析的新手们可以先从免费的热图工具，微软旗下的clarity开始尝试。

传统的安装方式一般都是安装全站代码，如果你的网站已经安装了Google分析师，那么就可以采用集成的方式来配置，就不需要再安装clarity的全站代码了。

因为我的网站是通过Google Tag manager配置所有代码，并采用了GA4的配置，所以如下教程也是以这个为前提来进行的设置的。如果你没有使用Google Tag manager，那么你的设置过程和我的就不太一样，具体的GA4和UA集成教程可以参考clarity的官方GA集成教程。

Microsoft Clarity基本功能

首先Clarity的确是永久免费，因为微软也希望收集更多的互联网数据，这才是他免费的真实动机之一。有了这个前提，所以你不用担心流量限制或被强升级到付费版本。

热图软件的只要功能是帮助您查看网站上最受欢迎的页面，以及用户如何点击，滚动和与这些页面交互。Microsoft Clarity 最重要的功能是其数据可视化，包括点击跟踪，热图报告，历史和实时的会话视频等。因为可以集成Google analytics，所以你也可以在clarity的dashboard中看到来自GA统计到的部分数据。

在dashboard上你还可以看到dead click（无效点击数量，用户以为可以点了跳转到没有没有跳转的次数；也可能是无意的点击行为）， 和rage clicks（指无效连接让用户疯狂点击的数量），quick backs（用户快速返回到前一个页面），JS报错。

这些都有视频录制，你可以观看来查看用户的点击行为。

Calrity的热度地图上，有点击热度、滚动热度，区域热度。热图地图带有过滤功能，可对指定的流量进行分析查看，热图地图是我们使用Clarity的主要功能模块。

录制则是对用户的访问进行视频录制，左侧是视频列表，可以看到用户在指定页面上的访问页面数量、时长、来源、设备和操作系统；

右侧则是视频播放区域，用户是触摸了屏幕哪个位置进行下滑都可以在视频中看到。

如何安装Clarity

第一步：访问clarity官网注册账户后，选择安装方式为“在第三方平台上安装”

接着，选择google tag manager

在弹出的界面上选择“立即连接”， 之后就是一些账户授权的申请，选择同意下一步就好了。

第二步：配置GTM和Google analytics

在弹出的GTM容器选择中，选择你当前要追踪的网站，就可以完成Google Tag manager的连接。

接着，就开始去集成Google analytics了，点击“完成设置”，会弹出你GA下的所有账户。

选择账户的时候需要注意，你要集成的是GA4还是UA，如果你目前使用的是UA，那么直接选择不带(GA 4)结尾的网站即可。点击保存，集成就完成了。

需要注意的是，当你刚集成完毕的时候，你还无法使用热度地图和Google analytic，可以看到下图中这2个功能导航还是灰色的。因为刚配置完，数据还没传输过来，所以这个时候，你可以多等一段时间等有数据了，比如一个星期后再来时使用clarity。

Clarify部分功能使用说明

使用热力地图分析页面

当你进入这个页面的时候，页面是空的，你需要搜索并选择一个页面。我搜索的是域名词，yaosocial，在右侧就弹出了访问量最大的几个页面。

注意，Clarity默认的是过去3天的数据，你可以点击时间控件（Last 3 days那个位置）或filter去选择你想要分析的时间段、设备、操作系统、浏览器、国家、行为、来源、等多个过滤筛选条件。Clarity提供的筛选过滤还是非常强大的。

选择的其中一个页面，view heatmap查看。

左侧是数据统计栏，切换下图所示的click、scroll、和area可以看到不同的数据结果；右侧则是直观的页面热力图展示，采用不同的颜色区分热度。

点击Scroll，你就可以看到经常在百度谷歌上看到那种五颜六色的图了～

点击area，你可能在左侧只看到一个默认的area，由于分析的网站是wordpress博客，所以在area中，默认的分析区域就只是文章的正文区域，如果你要分析更多的区域，可以点击edit，增加其他的分析区域。

下图中就是我在写文章时临时增加了一个area，可以看到不同的区域也是用不同的颜色区分开来了。

查看dead clicks

你可以从dashboard的dead clicks的入口去进入到以下页面，在左侧列出的都是包含了

dead clicks的视频列表，同样也是过去3天的用户访问数据。

也可以从录制的导航入口进入，然后筛选你查看的页面、类型等，也是有强大的筛选功能。

查看JS报错、rage clicks的视频也可以采用这样的方式查看。

有些视频比较长，你可以将视频直接拖到包含了dead clicks的地方，如下图箭头所指，观看视频就可以知道，用户到底点击了什么地方。

当我看完这段视频后，我才知道，这个视频dead clicks其实是来源于用户的无意识点击，有些用户，甚至包括我自己在看较长内容的网页时，也会无意识地去点击页面的空白区域或不可跳转的区域。

翻看左侧列表，我发现录制出来的这些视频，时长都很长，最短的是5-8分钟，最长的甚至长达1个多小时，大概率是由于人们在接触新概念和新知识会产生的烦躁感导致的。

查看实时视频

Clarity支持查看实时用户的访问记录和视频，同样也是以用户为单位去查看视频。

当然查看这个的前提是当前有用户正在访问你的网站。个人觉得除非是在新活动页面刚刚上线，我特别关注用户行为和页面反馈时才会盯着每个用户的视频，否则谁没事去查看每一个用户的访问视频呀～

整体来说，实时视频是一个炫酷但是使用频次比较低的功能。

和HotJar的功能对比

HotJar是独立站数据分析时经常会提到的软件，在这里，我们就软件的主要三大功能做以下对比。

热力图功能

视频录制

谷歌分析师数据集成

如果你之前从来没有用过热力图分析工具，那么我会建议你从Microsoft Clarity开始用起，毕竟他也可以满足热力图分析的大部分需求了。