東京都府中市、九段下のWEB制作会社Maromaroのブログです

2022.11.14

Sasaki

無料の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の佐々木でした。