- Microsoftにも Google Analytics のようなサービスがあります。
それが「Microsoft Clarity」です。 - 設定すると、ヒートマップやレコーディングなど、閲覧者の細かな操作まで分析できました。
1. Microsoft Clarityに出会う
先日、Microsoft Bing Webmaster Toolsを設定しました。
そこで、「Microsoft Clarity」というツールの表示を見かけました。

Microsoft Clarityは、要は Google Analytics みたいなウェブ分析ツールです。
ただ、分析できる内容は違っていて、「セッションの再生」や「ヒートマップ」、「インサイト」などできるようです。

とくに、これまで「ヒートマップ」は有料サービスに入らないと見られないと思っていたので、無料で試せるのはびっくりしました。
「clarity」は、「明らかにする」という英単語です。
2. Webmaster ToolsからClarityを始めた
さっそく、サービスの連携をします。

Clarityの「追跡コード」をサイトの <head> に貼ると、サイトでのデータ収集が開始します。

「続行」を押すと、Bing Webmaster Toolsアカウントへの Clarityのアクセス許可に進みます。

2-1. Clarityの追跡コード
サイトで集めたデータの計測先は、追跡コードにある10文字の識別コード(プロジェクトID)で指定しています。
<script type="text/javascript">
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "〜〜〜");
</script>
この追跡コードを後から確認するには、Clarityの管理ページの「セットアップ」にある「インストール方法」から取得します。

ちなみに、WordPressの Cocoonテーマでは、プロジェクトIDを入力するだけで、headに追跡コードを追加できました。

2-2. Clarityでの同意
ここからは、Bing Webmaster Tools から Clarity(clarity.microsoft.com)の画面に移動して手続きをします。
まずは、Clarity 使用条件を承諾します。

また、下に「プロジェクトにアクセスするにはメール検証が必要」というメッセージがありました。
「メールを送信」したのですが、実は メールボックスで探すのにちょっと戸惑いました。

この確認メールは「Verity email to access Clarity」という件名なのですが、なぜか「迷惑メールフォルダ」に入っていたのです。
同じ Microsoftの Outlook.com に送ったのですが……。
とはいえ、ここまででClarityの初期設定は完了です。
3. Microsoft Clarityのヒートマップ・レコーディング
Clarityのプロジェクト画面に入ることができました。
リアルタイムで何人見ているか、などが記録されています。

この辺は Analyticsの「リアルタイム」に似ていますね。
3-1. ヒートマップ
ちゃんとヒートマップも計測されていました。
ページごとに どの要素がよくクリックされているのか、クリック数と色で分析できます。

リンクや目次がどれだけクリックされているのか、視覚的にわかります。
3-2. レコーディング
もっと驚いたのが「レコーディング(セッションの再生)」です。
一人ひとり1のページ内でのスクロールやクリックを「ビデオのように」見ることができるのです。

もちろん、誰の操作か特定することはできないですし、ページの外はわかりません。
画面自体を記録するとデータサイズが大きくなるので、「操作タイミング」を記録しているだけなのだと思います。
しかし、ここまで訪問者の閲覧する様子がわかるのはびっくりしました。
いわば、店内カメラのような感じで、実際にどんなふうに読まれているのか把握することができます。

こんなにわかるんだね。
そりゃ、最近 プライバシーの同意が必要になるのもわかるね。

膨大なデータなので全部はとても見られません。
とりあえず、気ままにピックアップして見る感じですね。


