無料のMicrosoft Clarityを導入してヒートマップを使う！

こんにちは、Maromaroの佐々木です。
今回は無料でヒートマップなどが利用できる「Microsoft Clarity」のご紹介です。

ヒートマップを本格的の利用となると・・・有料ツールが多かったですが、大手が無料で提供してくれるのは嬉しいです！

早速、解説と使い方です。

Microsoft Clarityでできること

ヒートマップの解析

Microsoft Clarity　ヒートマップの参考画像

見やすく色分けされ、視覚的によく見られている箇所などがわかります。

タップ、スクロール、クリック領域で解析が可能です。
また、パソコン、タブレット、スマホで切り替えが可能です。

セッション単位のレコーディング解析

Microsoft Clarityレコーディング機能を用いた参考画像

セッション単位でユーザーの動きを観測することが可能です。
軌跡を追うことで見えることもあると思います。
※一部のテキストや個人情報などは、Clarityが判断し、自動的にマスクがかかるようになっています。
　プライバシーの配慮のようです。

各種分析

ヒートマップ以外に利用できる分析も、Google Analyticsを使うより簡単に状況が把握でき便利です。
イライラしたクリックなど、ユーザーの行動に基づいた分析なども表示され面白いです。

まずはサインアップする

サインアップには、下記のアカウントでログインができます。

• Microsoftアカウント
• Facebookアカウント
• Googleアカウント
  

新しいプロジェクトを追加する

Microsoft Clarity 新しいプロジェクトを追加する参考画像

ログインをしたら、左上にある「新しいプロジェクト」から新たなWebサイトを登録します。
※初ログインだと、大きな画面でプロジェクト登録を促されるかもしれません。（ちょっと記憶が・・・）

続いて、任意の名称とWebサイトURLを追加しましょう。

Microsoft Clarityをサイトに設定する

Microsoft Clarity を設定する参考画像

HTMLコードに直接設置する場合は左の「手動でインストールする」を選択します。

今回の参考では「Google Tag Manager」を利用している（前提）のため中央の「サード パーティのプラットフォームにインストールする」を選択します。
他にもWordPressなどにも対応していて便利です！

次に、Google Tag Managerのアカウントとコンテナーを選択し、「作成と発行」を押せば完了です！

設定が完了した後、しばらくするとダッシュボードに情報が表示されます。

その他機能

• GoogleAnalyticsとの連動
• チーム管理
• IPブロック
• マスクの設定（自動で個人情報がマスクされる機能の調整）

抜粋してこういった機能があります。
セキュリティ面での配慮もされているので、企業導入のハードルもクリアしやすいんじゃないでしょうか。

以上、Maromaroの佐々木でした。