在上一篇文章中向大家介绍了著名的Hotjar,不知道大家是否用过了?客观评价,Hotjar确实好用,但它的免费版每天可记录的数量有限,得到的数据不全面。为弥补这个缺陷,今天为大家介绍另一款热力图神器——Clarity——微软家出品的永久免费工具。
优点和缺点
根据我的使用体验,与Hotjar相比,
Clarity的突出优点:
①可以无限记录访客的浏览录像
②可观看访客实时浏览录像(并非完全实时,有几分钟的时差)
③筛选功能免费且强大
④可搭配官方浏览器插件,直接在自己网站页面上查看该页的热力图
Clarity的缺点:
①录屏记录的信息不直观
②无法在播放录屏过程中打标签和备注,后续查找不方便
③无法删除记录——你在白嫖微软的工具,微软在白嫖你的数据
④没有趋势分析、feedback和调查问卷等功能
注册Clarity & 安装代码
第一步:
打开官网:https://clarity.microsoft.com/,选择任一方式注册,本教程以谷歌账号绑定注册为例。
![注册Clarity](https://xn--5hq58jg23b.com/wp-content/uploads/2023/01/1.注册Clarity.png)
第二步:
同意账号关联后来到网站绑定环节,填写项目名称和咱们的网站url,完成网站添加。
![绑定网站](https://xn--5hq58jg23b.com/wp-content/uploads/2023/01/2.绑定网站.png)
第三步:
又是熟悉的环节,选择使用Google Tag Manager安装的方式。点击 开始设置
,在右侧的弹窗中点击 立即连接
。
![选择使用GTM安装](https://xn--5hq58jg23b.com/wp-content/uploads/2023/01/3.选择使用GTM安装.png)
第四步:
关联Clarity和谷歌GTM,勾选全部选项框。
![完成关联](https://xn--5hq58jg23b.com/wp-content/uploads/2023/01/4.完成关联.png)
第五步:
选择GTM的账户和容器,点击下方的 创建和发布
按钮,完成代码部署。
![选择GTM账户、容器](https://xn--5hq58jg23b.com/wp-content/uploads/2023/01/5.选择GTM账户、容器.png)
设置Clarity
排除内部IP
依旧是排除所有内部的IP,防止记录无效数据。
![排除内部IP](https://xn--5hq58jg23b.com/wp-content/uploads/2023/01/6.排除内部IP.png)
设定录屏的屏蔽等级
它有三种模式:严格、平衡、放松。默认为“平衡”,我喜欢设置为“放松”。当然,用户输入的信用卡、地址等私人信息肯定是自动被系统屏蔽的,有歪脑筋的人还是省省吧。
![屏蔽等级设置](https://xn--5hq58jg23b.com/wp-content/uploads/2023/01/7.屏蔽等级设置.png)
关联Google Analytics
关联之后,我们可以直接在Clarity网站查看部分GA数据。
![关联GA](https://xn--5hq58jg23b.com/wp-content/uploads/2023/01/8.关联GA4.png)
安装Microsoft Clarity Live浏览器插件
在chrome应用商店中查找安装。
![Clarity插件](https://xn--5hq58jg23b.com/wp-content/uploads/2023/01/9.Clarity插件.png)
安装以后,当我们访问咱们的网站时,页面的右上角会出现悬浮工具栏,这样我们就能在网页上直接查看网站的热力图、播放录屏。这个功能我愿意用coooool来形容!
![悬浮工具栏](https://xn--5hq58jg23b.com/wp-content/uploads/2023/01/10.悬浮工具栏.png)
Clarity功能介绍
筛选器
这个功能特别强大,微软提供了众多详细的参数供我们筛选。可以将筛选设置应用到仪表盘、录制、热力图等不同的数据集。
![筛选器](https://xn--5hq58jg23b.com/wp-content/uploads/2023/01/11.筛选器.png)
区段
当我们选择了常用的筛选项后,可以利用这个功能将筛选设置保存下来,方便下次使用。只需要点击 另存为区段
按钮即可。
![保存筛选条件](https://xn--5hq58jg23b.com/wp-content/uploads/2023/01/12.保存筛选条件.png)
以上两个功能为数据分析提供了极大的便利!
录制
它的录制界面左边为记录列表,右侧为播放区域。老实说,个人更喜欢hotjar的那种展示形式,会更加清晰。
![录屏记录](https://xn--5hq58jg23b.com/wp-content/uploads/2023/01/13.录屏记录.png)
热力图
这个功能不做赘述。可切换设备类型以及热力图类型。
![热力图](https://xn--5hq58jg23b.com/wp-content/uploads/2023/01/14.热力图.png)
Clarity的筛选和无限录屏这两项功能,我是很喜欢的,虽然功能上较hotjar有稍许差距,但是免费的还要啥自行车。建议大家自行安装体验。
提醒:不建议同时使用hotjar和clarity。虽然GTM中的代码是异步加载的,但是对网页加载速度依然是有影响的,所以没必要的跟踪代码尽量不安装。
好了,微软Clarity的安装教程和功能介绍到此结束。