Microsoft Clarityの使い方

2021/07/12 2021/07/13

サイノア

Micorsoft製のヒートマップツールClarityをインストールしたので、実際に使ってみます。詳しいことはよくわかっていないので、細かいことはご容赦を。

なお、インストール編はこちらです。

ダッシュボードを開く
ヒートマップを見る
訪問者の行動を再現する
エラー対処
- アイスクリームを落としたの図
- ヒートマップ画面が見えない
おわりに

ダッシュボードを開く

Microsoft Clarityを開きます。

目的のプロジェクト（サイト）をクリックするとダッシュボードが開きます。

様々な分析結果が並んでいますが、とりあえずおいておきます。

左上のところ、FiltersとしてLast 3 days（過去三日間）が設定されています。これをクリックすると、フィルタの設定画面が開きます。

フィルタも様々なものがあることがわかります。ここでは、試しにUser infoのTime frameを変えてみます。

Last 7 daysを選んでみました。これで過去七日間が分析対象になります（もちろん、Clarityをサイトに設置してからです。設置前の期間は分析できません）。

右上にある「Apply」を押せばフィルタが確定します。

ダッシュボードの一覧画面に戻ります。

ヒートマップを見る

では、ヒートマップ、つまり、ページのどこがクリックされているかの分析画面を開いてみます。ページの分析ですので個別ページのURLを指定します。

どのページでもいいのですが、実際にアクセスされていないとクリックされているわけはないので、ここではPopular pages（アクセスが多いページ）の一覧から指定することにします。

各ページのURLが並んでいます。炎（？）のアイコンをクリックするとそのページのヒートマップを表示してくれます。

クリック分析

実際のページとともに、クリックされている場所が丸で示されます。丸の色はクリックの多寡を示しています。

赤クリックが多いことを表します。

※補足※

上の図ではテキストが伏せ字だらけになっています。これは、当初、マスキングの設定をBalancedにしていたためです。この設定をRelaxedに変更したところ、下のように伏せ字は解消されました。

この方がずっとわかりやすいです。ですので、特段の事情がない限りは、マスキングの設定はRelaxedをおすすめします。詳しくは「インストール編」をご覧下さい。

※補足ここまで※

こうしてみると、目次って思った以上にクリックされていることがわかります。また、なぜか、記事タイトルもよくクリックされているようです。

ここには二つのブログカードがありますが、下の方がよくクリックされていることがわかります。

また、テキストも思いの外、よくクリックされているようです。テキストが伏せ字になってしまっています。元の文章はこうなっています。

なんとも判断が難しですがクリックされているのは「拡張できます」のあたりでしょうか？

こちらの文章では「基本的な使い方」や「こちらの記事」でしょうか？

これらはいずれもテキストリンクでもないのにクリックされているということです。気になった言葉があったらクリックしてみるという行動を取る人が多いのかなと思います（ちょっと驚き）。ということは、関連する記事があればどんどんリンク（内部リンク）にするのもいいのかもしれません。

ここでは、AdSenseのバナーがクリックされていることもわかります。

また、こちらではテキストが伏せ字になっていないのでどこがクリックされたかがよりハッキリわかります。先程の推測のように「説明」とか「こちらの記事」という「ひょっとしたらテキストリンクかも」と思ってしまいそうな文字がクリックされているようです。

記事本文が伏せ字になってしまい分析しづらいことがわかったので、マスキングの設定はRelaxedにしておくのが良いのかもしれません。

ここまではPCからのアクセスの分析でしたが、上の方にあるTablet、Mobileをクリックすればそれぞれのデバイスからのアクセスの分析に切換えられます（そのデバイスでアクセスされていれば）。

スクロール分析

続いて、ベージのどこまでスクロールされたかを見てみます。

矢印のところ「Scroll」をクリックすると画面が切り替わります。

ページの上の方はほとんど100%の訪問者が到達しています（当たり前ですが）。ページの下の方肉ほど、到達率が下がることがわかります。

記事本文の最後のあたりでは25%程度の訪問者が到達しているようです。

記事本文の下に広告があって、さらにその下にシェアボタンを置いているのですが、ここには6%ほどの人しか到達していません。その前にページから離脱しているということです。ということは、ここにシェアボタンを置いてもほとんどの人の目には触れていないことですね。

この分析は「そこまで到達したか」であって、「読んだか（精読率）」ではありません。しかし、到達しないことには読まれているわけもないので、ある程度の目安にはなるだろうと思います。

ダッシュボードに戻る

上の方にあるDashboardタブをクリックすればダッシュボードに戻ります。

しかし、この状態では先ほどまでヒートマップを見ていたページだけというフィルタが掛かっています。これを解除してサイト全体を対象とするには、ページ指定のフィルタを解除します。

矢印のところのURLのそばの×印をクリックすればOKです。

これでサイト全体の画面に戻りました。

訪問者の行動を再現する

Microsoft Clarityのもう一つの分析機能「Recordings」を使ってみます。こちらは、訪問者がどのように行動したか、つまり、スクロールやマウスの動き、クリックと言った動作を実際に再現してみることができるものです。訪問者の画面をあたかも撮影したかのようにビデオ再生できます。

では、その方法です。先ほどと同じように、Popular pagesの一覧から選ぶことにします。

これまたよくわからないアイコンですが、ビデオカメラのつもりでしょうか？ともかく、これをクリックするとそのページの記録を見られます。

左にセッション（アクセス）が一覧表示されます。セッションごとにどのページから入ってどのページでサイトから離脱したか、その日時、アクセスページ数、滞在時間、クリック数などが表示されています（日時は日本時間のようです）。この中から見たいものを選びます。

これを選んでみることにします。2ページアクセスし、5分56秒滞在し、2クリックしています。これ（この大きな枠）をクリックすれば右側に再生画面が現れます。実際の様子が下の動画です。

※なぜかYouTubeを上手く埋め込めないのでブログカード形式で貼っておきます。

YouTube

Microsoft Clarity recordings

https://youtu.be/OzJW2luW5U8

Microsoft Clarityのrecordingsの例

なお、これは4倍速で再生しています。再生速度は、画面の下の方に選択があります。

0.25倍速（1/4倍速）から12倍速まで選べます。さっと見られるで便利です。

このページの滞在時間は5分56秒となっていましたが、ビデオの記録時間は10分23秒と表示されています。この差は、別のサイトを見に行ってこのサイトが見れられていない時間です（よそは分析できませんから）。Skip inactiveにチェックを入れておくと、その時間は再生がスキップされます（逆にチェックしておかないと、動きが何もないまま、ずっと待たされます）。

再生画面の下にプログレスバー（再生の進捗状況）があります。丸印が動いていくので再生されている場所（時間）だろうなということはわかるかと思います。その他、縦棒はクリックされた場所のようです。詳しいことは、画面右下の「！」にマウスカーソルを持っていくと表示されます。

エラー対処

アイスクリームを落としたの図

Microsoft Clarityはリリースされてまだあまり日にちが経っていないためか、動作が不安定なところが残念ながらあります。

この画面（多分、アイスクリームを落としてしまったの図）が出たら、「Reload now」を押せば画面を再読込みしてくれます。

それで治ることもありますが、直らないこともあります。一旦は再読込みするものの、再びアイスクリームを落としてしまうということを繰り返してしまいます。その場合は、以下のようにやてみて下さい。

まず、「Reload now」を押します。再読込みが始まりますので、すぐにDashboardタブを押します。

ダッシュボードに戻ったら直ぐにClearを押します。再読込みしている最中に押すのがポイントです（そうしないとアイスクリーム落としちゃった画面がまた出ます）。

これでフィルタ条件がクリアされ、デフォルト状態のダッシュボードが表示されるはずです。

ヒートマップ画面が見えない

ヒートマップ分析画面を開いたら、こうなってしまうことがときどきあります。

全体がふせられて何も見えない状態です。マウスホイールを回すとこの下でスクロールしていることはわかるのですが、上にこれが乗った格好になってしまっているので、何も見えません。

これはGoolge AdSenseの全面広告を記録してしまったものと思われます。最近、PCのWebブラウザの全体を覆うAdSense広告が出ることがあります。あれって閉じるボタンもなく、非常に厄介で迷惑です（表示サイズを縮小すると最初の画面からは見えない位置に閉じるボタンがあることがあるのがわかるのですが…）。自動広告の設定で回避できるのかもしれませんが未調査です。おそらく、あの広告フォーマットは評判が悪すぎで、その内なくなるような気もします。わかりませんけど。

おわりに

以上、二回に渡ってMicrosoft Clarityのインストールと使い方を説明しました。ここで紹介したのはこのツールの機能のほんの一部だと思いますが、これだけでもページアクセスの状況を掴むことができます。画面が英語なのでとっつきにくいところはありますけど、ここで説明した範囲ならそれほど苦労せずに使えるかと思います。

これほどのツールが無料で利用できるのですから、使わない手はありません。ページの収益化向上のために、大いに活用させてもらいましょう。

なお、Microsoft Clarityの公式ドキュメントはこちらです。全部英語ですが。