ユーザビリティ調査を実施しています。お時間あればご協力お願いします。

無料で使えるヒートマップ「Microsoft Clarity」の導入から使い方を紹介

2022年5月18日

Microsoftが提供している無料で使えるヒートマップ「Clarity」の導入から使い方を紹介します!

Microsoft Clarityでできること

Clarityは、レコーディング機能とヒートマップ機能があります。

また、フィルターを使って、PC、タブレット、モバイルや期間を絞って情報検索できます。

レコーディング機能

レコーディング機能は、ユーザーの動作を保存した動画データを見ることができる機能です。

ユーザー動作を保存した動画データはダウンロードもできます。

ヒートマップ機能

ヒートマップは、ユーザーがページをどこまでみたか、どこをクリックしたかがわかる機能です。

Clarityのヒートマップ機能には2つのヒートマップがあります。

クリックヒートマップ ユーザーがクリックしている場所を確認できる(リンクでない場所も含む)
スクロールヒートマップ ユーザーがどこまでスクロールしているかを確認できる

また、領域メニューを使って選択したエリア内のすべての要素の合計クリック数を確認できます。
※領域メニューは、クリック・スクロールヒートマップと同じところにあります。

Microsoft Clarityをサイトに導入する方法

Clarityは、Googleアカウントを使って簡単に登録して利用開始できます。

Clarityに登録する

Clarityにアクセスして「サインアップ」をクリックします。

Microsoft Clarityはこちら

【Microsoft Clarityに登録する方法】サインアップをクリックする

サインイン先でGoogleを選択します。

【Microsoft Clarityに登録する方法】サインイン先でGoogleを選択する

サインインしたいメールアドレスを入力し、利用規約にチェックをいれて「Continue」をクリックします。

【Microsoft Clarityに登録する方法】メール認証を行う

Clarityのプロジェクト作成画面になるので、「Name」、「Website」、「Site category」を選択して「Add new project」をクリックします。

【Microsoft Clarityに登録する方法】Clarityで使うヒートマッププロジェクトを作成する

Googleタグマネージャーを使ってClarityトラッキングコードを設定する

Clarityでヒートマップを使うには、ブログ(サイト)にClarityトラッキングコードの埋め込みが必要です。

Googleタグマネージャーを使っていれば、簡単にタグの設定ができます(事前にコンテナを作成してあるアカウントが必要です)。

以下、タグマネージャーを使って設定方法を紹介します。

「Google Tag Manager」をクリックします。

【Microsoft Clarityトラッキングコードを設定】Setupで「Google Tag Manager」をクリックする

「Connect now」をクリックします。

【Microsoft Clarityトラッキングコードを設定】「Connect now」をクリックする

Googleタグマネージャーを設定しているGoogleアカウントを選択して、アカウントへのアクセスを許可して続行します。

【Microsoft Clarityのトラッキングコードを設定】Googleタグマネージャーを設定しているアカウントを選択して利用規約に同意して続行する

利用するアカウントとコンテナを選択して「Create and publish」をクリックします。

Clarityトラッキングコードを設定したタグを新規作成し、公開まで自動でやってくれます。

【Microsoft Clarityのトラッキングコードを設定】Googleタグマネージャーで利用するアカウントとコンテナを選択する

正常に公開できていれば、Googleタグマネージャーのタグに新しく「Clarity」のタグが作成されています。

Googleアナリティクスを連携する

Googleアナリティクスのデータを連携することで、Clarityの画面で「セッション数」や「人気上昇中のページ」などを確認できるようになります。

Googleアナリティクス設定の「Get started」をクリックします。

【Microsoft ClarityとGoogleアナリティクスを連携】「Get started」をクリックする

Googleアナリティクスを設定しているアカウントを選択して、アクセスを許可して続行すれば完了です。

【Microsoft ClarityとGoogleアナリティクスを連携】Googleアナリティクスを設定しているアカウントを選択してアクセスを許可して続行する

自分のIPアドレスを除外する

自分の動きをヒートマップに保存されないようにIPアドレスを除外します。

「Settings」>「IP blocking」>「Block IP address」の順番でクリックします。

【Microsoft Clarityで自分のIPを除外する設定】「Settings」>「IPblocking」>「Block IP address」をクリックする

自分のIPアドレスの除外だとわかるように「Name」を入力し、「Block my current IP」にチェックをいれて「Add」ボタンをクリックすれば登録完了です。

【Microsoft Clarityで自分のIPを除外する設定】Block my current IPをクリックする

ここまで設定できれば、あとは2時間ほど待つことでデータが収集され表示できるようになります。

【補足】設定にあるマスクについて

マスクを使うことで、Microsoftにサーバーデータを送信しないようにできます。

フォームなどで個人情報を入力してもらうときにそのデータを「●」で代替して表示されないようにできます。

「Settings」>「Masking」で設定できます。

マスク表示モードは3つあります。

Strict(厳密) 全てのテキストが「●」でマスク表示されます。
Balanced(バランス) 一部の保護が必要なテキストが「●」でマスク表示されます。
Relaxed(リラックス) 全て通常表示されます。

【補足】Clarityの表示を日本語に設定変更する

Clarityは日本語表示にできます。

「右上のGoogleアカウント名」>「Manage Account」をクリックします。

Preferencesの「Language」で「日本語」を選択すると変更できます。

Googleタグマネージャー以外のトラッキングコード設定方法

Googleタグマネージャーをブログやサイトで導入していない場合は、手動やWordPressプラグインを使ってトラッキングコードを設定できます。

手動でトラッキングコードを設定する場合

手動でタグを設定する場合は、「設定(Settings)」>「セットアップ(Setup)」にあるClarityトラッキングコードをコピーして、headタグ内に追加します。

【Microsoft Clarityをマニュアルインストールする方法】設定>セットアップに表示されているClarityタグをコピーしてheadタグ内に追加する

WordPressプラグインでトラッキングコードを設定する場合

WordPressの場合は、WordPressプラグインを使ってClarityトラッキングコードの設定ができます。

WordPressの左メニュー「プラグイン」>「新規追加」からキーワード検索で「Microsoft Clarity」と検索します。

プラグインをインストールして有効化します。

【Microsoft ClarityをWordPressにインストールする方法】プラグイン追加でMicrosoft Clarityを検索してインストールする

プラグインのSettingsからプロジェクトIDを入力して、変更を保存します。

【Microsoft ClarityをWordPressにインストールする方法】SettingsでプロジェクトIDを登録する

プロジェクトIDは、Clarityの「設定(Settings)」>「概要(Overview)」にのっています。

【Microsoft ClarityのプロジェクトIDを確認する方法】設定の概要に記載されている

Clarityの使い方

レコーディング機能の使い方

メニューから「レコーディング」をクリックします。

フィルターを使って、デバイス(PC、タブレット、モバイル)などの条件を設定でき、日付も指定できます。

フィルターの「エントリーURL」や「終了URL」などに確認したいページURLを入力すれば、ページの絞り込みができます。

【Microsoft Clarityのレコーディングの使い方】レコーディングを選択し、フィルターや日付で条件を設定できる

左側のリストから、確認したいユーザーのユーザーの動きを選択すると再生が始まります。

画面下の「非アクティブをスキップ」にチェックを入れると、動きのない部分をスキップできます。

【Microsoft Clarityのレコーディングの使い方】左側のリストから保存されたユーザーの動きを選ぶ

「詳細」を選択すると、保存した動画の「日付」、「クリック数」などを確認できます。

【Microsoft Clarityのレコーディングの使い方】保存した動画の詳細を確認できる

「クリック」を選択して、ページ内をマウスオーバーすると、範囲内でのクリック件数が表示されます。

【Microsoft Clarityのレコーディングの使い方】ユーザーのクリックを確認できる

「スクロール」を選択して、ページ内をマウスオーバーすると、マウスの位置までどのくらいの人が到達したかが表示されます。

【Microsoft Clarityのレコーディングの使い方】ユーザーのスクロールを確認できる

「領域」を選択して、ページを確認すると、特定の範囲内のクリック件数を確認できます。

【Microsoft Clarityのレコーディングの使い方】ユーザーのクリックしたおおまかな件数を確認できる

ヒートマップ機能の使い方

「ヒートマップ」を選択して、ヒートマップを確認したいページURLや日付を入力します。

デバイス(PC、タブレット、モバイル)を選択して、ヒートマップの種類を選択します。

「クリック」を選択すると、ページ内のクリックした位置や件数を確認できます。

【Microsoft Clarityのヒートマップの使い方】ユーザーのクリックを確認できる

「スクロール」を選択すると、ページ内でどのまでユーザーが到達したかが分かります。

【Microsoft Clarityのヒートマップの使い方】ユーザーのスクロールを確認できる

「領域」を選択すると、クリックした範囲でのクリック数を確認できます。

【Microsoft Clarityのヒートマップの使い方】ユーザーのクリックしたおおまかな件数を確認できる

よくある質問

Clarityのヒートマップデータが保存される期間

最大90日間分のヒートマップデータにアクセスできます。

Clarityのトラッキング上限

Clarityヒートマップのトラッキング上限は、ヒートマップごとに100,000ページビューまで。

レコーディングは、プロジェクトごとに1日あたり最大100,000セッションまで記録できます。

複数のブログやサイトを分析できる?

複数のブログやサイトの分析も可能です。

※上限の記載はありません(少なくとも10プロジェクトは作成できます)。

計測できていたのにエラーが表示されるようになった

接続がうまくいって、データが取得できていたのに「セッション指標の取得中に、エラーが発生しました」、「データの取得中に問題が発生しました」などのエラーが突然表示されることがあります。

そういう場合は、「右上のGoogleアカウント名」>「サインアウト」して、再度サインインするとなおることがあります。

【まとめ】Clarityの導入から使い方

Clarityを使えば、無料でクリックヒートマップ、スクロールヒートマップが利用でき、さらにユーザーのウェブ上の動きもレコーディング機能で確認できます。

これらのデータは、ページ構成やボタン位置などの改善に役立てることができます。

-ヒートマップ
-