Microsoftが提供している無料で使えるヒートマップ「Clarity」の導入から使い方を紹介します！
Microsoft Clarityでできること
Clarityは、レコーディング機能とヒートマップ機能があります。
また、フィルターを使って、PC、タブレット、モバイルや期間を絞って情報検索できます。
レコーディング機能
レコーディング機能は、ユーザーの動作を保存した動画データを見ることができる機能です。
ユーザー動作を保存した動画データはダウンロードもできます。
ヒートマップ機能
ヒートマップは、ユーザーがページをどこまでみたか、どこをクリックしたかがわかる機能です。
Clarityのヒートマップ機能には2つのヒートマップがあります。
| クリックヒートマップ | ユーザーがクリックしている場所を確認できる（リンクでない場所も含む） |
| スクロールヒートマップ | ユーザーがどこまでスクロールしているかを確認できる |
また、領域メニューを使って選択したエリア内のすべての要素の合計クリック数を確認できます。
※領域メニューは、クリック・スクロールヒートマップと同じところにあります。
Microsoft Clarityをサイトに導入する方法
Clarityは、Googleアカウントを使って簡単に登録して利用開始できます。
Clarityに登録する
Clarityにアクセスして「サインアップ」をクリックします。
サインイン先でGoogleを選択します。
サインインしたいメールアドレスを入力し、利用規約にチェックをいれて「Continue」をクリックします。
Clarityのプロジェクト作成画面になるので、「Name」、「Website」、「Site category」を選択して「Add new project」をクリックします。
Googleタグマネージャーを使ってClarityトラッキングコードを設定する
Clarityでヒートマップを使うには、ブログ（サイト）にClarityトラッキングコードの埋め込みが必要です。
Googleタグマネージャーを使っていれば、簡単にタグの設定ができます（事前にコンテナを作成してあるアカウントが必要です）。
以下、タグマネージャーを使って設定方法を紹介します。
「Google Tag Manager」をクリックします。
「Connect now」をクリックします。
Googleタグマネージャーを設定しているGoogleアカウントを選択して、アカウントへのアクセスを許可して続行します。
利用するアカウントとコンテナを選択して「Create and publish」をクリックします。
Clarityトラッキングコードを設定したタグを新規作成し、公開まで自動でやってくれます。
正常に公開できていれば、Googleタグマネージャーのタグに新しく「Clarity」のタグが作成されています。
Googleアナリティクスを連携する
Googleアナリティクスのデータを連携することで、Clarityの画面で「セッション数」や「人気上昇中のページ」などを確認できるようになります。
Googleアナリティクス設定の「Get started」をクリックします。
Googleアナリティクスを設定しているアカウントを選択して、アクセスを許可して続行すれば完了です。
自分のIPアドレスを除外する
自分の動きをヒートマップに保存されないようにIPアドレスを除外します。
「Settings」＞「IP blocking」＞「Block IP address」の順番でクリックします。
自分のIPアドレスの除外だとわかるように「Name」を入力し、「Block my current IP」にチェックをいれて「Add」ボタンをクリックすれば登録完了です。
ここまで設定できれば、あとは2時間ほど待つことでデータが収集され表示できるようになります。
【補足】設定にあるマスクについて
マスクを使うことで、Microsoftにサーバーデータを送信しないようにできます。
フォームなどで個人情報を入力してもらうときにそのデータを「●」で代替して表示されないようにできます。
「Settings」＞「Masking」で設定できます。
マスク表示モードは3つあります。
| Strict（厳密） | 全てのテキストが「●」でマスク表示されます。 |
| Balanced（バランス） | 一部の保護が必要なテキストが「●」でマスク表示されます。 |
| Relaxed（リラックス） | 全て通常表示されます。 |
【補足】Clarityの表示を日本語に設定変更する
Clarityは日本語表示にできます。
「右上のGoogleアカウント名」＞「Manage Account」をクリックします。
Preferencesの「Language」で「日本語」を選択すると変更できます。
Googleタグマネージャー以外のトラッキングコード設定方法
Googleタグマネージャーをブログやサイトで導入していない場合は、手動やWordPressプラグインを使ってトラッキングコードを設定できます。
手動でトラッキングコードを設定する場合
手動でタグを設定する場合は、「設定（Settings）」＞「セットアップ（Setup）」にあるClarityトラッキングコードをコピーして、headタグ内に追加します。
WordPressプラグインでトラッキングコードを設定する場合
WordPressの場合は、WordPressプラグインを使ってClarityトラッキングコードの設定ができます。
WordPressの左メニュー「プラグイン」＞「新規追加」からキーワード検索で「Microsoft Clarity」と検索します。
プラグインをインストールして有効化します。
プラグインのSettingsからプロジェクトIDを入力して、変更を保存します。
プロジェクトIDは、Clarityの「設定（Settings）」＞「概要（Overview）」にのっています。
Clarityの使い方
レコーディング機能の使い方
メニューから「レコーディング」をクリックします。
フィルターを使って、デバイス（PC、タブレット、モバイル）などの条件を設定でき、日付も指定できます。
フィルターの「エントリーURL」や「終了URL」などに確認したいページURLを入力すれば、ページの絞り込みができます。
左側のリストから、確認したいユーザーのユーザーの動きを選択すると再生が始まります。
画面下の「非アクティブをスキップ」にチェックを入れると、動きのない部分をスキップできます。
「詳細」を選択すると、保存した動画の「日付」、「クリック数」などを確認できます。
「クリック」を選択して、ページ内をマウスオーバーすると、範囲内でのクリック件数が表示されます。
「スクロール」を選択して、ページ内をマウスオーバーすると、マウスの位置までどのくらいの人が到達したかが表示されます。
「領域」を選択して、ページを確認すると、特定の範囲内のクリック件数を確認できます。
ヒートマップ機能の使い方
「ヒートマップ」を選択して、ヒートマップを確認したいページURLや日付を入力します。
デバイス（PC、タブレット、モバイル）を選択して、ヒートマップの種類を選択します。
「クリック」を選択すると、ページ内のクリックした位置や件数を確認できます。
「スクロール」を選択すると、ページ内でどのまでユーザーが到達したかが分かります。
「領域」を選択すると、クリックした範囲でのクリック数を確認できます。
よくある質問
Clarityのヒートマップデータが保存される期間
最大90日間分のヒートマップデータにアクセスできます。
Clarityのトラッキング上限
Clarityヒートマップのトラッキング上限は、ヒートマップごとに100,000ページビューまで。
レコーディングは、プロジェクトごとに1日あたり最大100,000セッションまで記録できます。
複数のブログやサイトを分析できる？
複数のブログやサイトの分析も可能です。
※上限の記載はありません（少なくとも10プロジェクトは作成できます）。
計測できていたのにエラーが表示されるようになった
接続がうまくいって、データが取得できていたのに「セッション指標の取得中に、エラーが発生しました」、「データの取得中に問題が発生しました」などのエラーが突然表示されることがあります。
そういう場合は、「右上のGoogleアカウント名」＞「サインアウト」して、再度サインインするとなおることがあります。
【まとめ】Clarityの導入から使い方
Clarityを使えば、無料でクリックヒートマップ、スクロールヒートマップが利用でき、さらにユーザーのウェブ上の動きもレコーディング機能で確認できます。
これらのデータは、ページ構成やボタン位置などの改善に役立てることができます。