WordPressのヒートマップを知りたいときに使えるサービスのひとつに、Microsoft Clarityがあります。使ってみてやめることもできます。インストール方法をまとめてみます。
Microsoft Clarityとは
Microsoft Clarityは、ウェブサイトのユーザー行動を分析するための無料ツールです。以下の主な機能があります。
ヒートマップ機能
ユーザーがどこをクリックしたか分かります。また、スクロールをどこまでしたかや移動の様子が分かります。コピーするのにダブルクリックしたとか、細かな挙動を知ることができます。
セッションレコーディング
実際のユーザーセッションを動画で再生できます。ユーザーがどのようにページをナビゲートしているかを確認することで、サイト改善に役立ちます。
インサイトとフィルター
特定の行動や属性に基づいてデータをフィルターし、分析を行うことができます。例えば、特定のページの閲覧の様子について知ることができます。
その他
エラーとバグの検出ができます。JavaScriptエラーやデッドリンクなど、遅延など、ユーザー体験に影響を与える問題を検出します。
また、Googleアナリティクスや他の一般的なウェブ分析ツールと簡単に連携できます。上記の様子とその他の機能を統合して分析できます。
利用方法
ログインとトラッキング対象の選定
まずは、Microsoft Clarityのトラッキングコードを設置します。

こちらから同じ画面に入れます。

「使い始める」をクリックしましょう。

サインアップを求められます。どれか好きなものを選んで進んでください。

今回はMicrosoft IDで行っています。
メール確認画面が来ますので、Continueで進みましょう。

次に、ウェブサイト名とそのURLを入力します。

今回はWordPressに入れるので、「View all platform」で進みましょう。

次の画面にWordPressを選ぶところがあります。
WordPressを選んで進みます。

トラッキングコードの設置
次にトラッキングコードを設置します。
プラグインの追加画面に行きましょう。

検索で「Microsoft Clarity」と入れます。
インストールしたらアクティブ(有効)にしておきます。

Microsoft Clarityの設定からサインインをしましょう。

サインインをしたら、先程作成したプロジェクトを選びます。

これで完了です。
WordPressではこのようになります。データ蓄積まで時間がかかります。

録画例
ヒートマップも見れますが、挙動を知ることもできます。
先ほど作成した画面で、「Clarityの詳細を見る」をクリックしましょう。

こちらでヒートマップを見ることができます。

また、使い方を知ることもできます。

要らなくなったらアンインストールももちろんできます。
マーケティング分析などで必要なときに検討してみてください。
【編集後記】
YouTubeの撮影。撮影自体はそれほど時間がかからないですね。その前後はもう少し短くするべく取り組んでいます。
【運動記録】
ストレッチ○
【子育て日記(息子7歳0ヶ月、息子3歳6ヶ月)】
上の子が漢検のやり直し中です。やり直しはなんとなく気が乗らないものですね。気持ちがよく分かるので、ちょっとずつ日や時間を小分けにして取り組んでみています。