🔍

Azure Static Web AppsにClarityを導入する

2024/10/23に公開

Clarity とは

Clarity は Microsoft が提供している Web サイト・モバイルアプリのヒートマップツールです。
Clarity を使うことで、Web サイト上のユーザーの操作を追跡し、ヒートマップの作成やセッションレコーディングなどの機能を利用できます。

https://clarity.microsoft.com/lang/ja-jp

Clarity のプロジェクトの作成

今回は、事前に Azure Static Web Apps のデプロイ済みの Web サイトを対象とします。

プロジェクト作成後に手動でインストールするの「追跡コードを取得する」を選択します。

JavaScript コードが表示されるので「クリップボードにコピー」を選択し、控えておきます。

Azure Static Web Apps への導入

Azure ポータルで Static Web Apps のリソースに移動します。
サイドバーの「スニペット」を選択します。

上部の「追加」ボタンを押下し、コード部分に先ほど Clarity の JavaScript コードを貼り付け保存します。

これで Static Web Apps への導入は完了です。

Clarity のプロジェクトの確認

スニペット追加後に、Static Web Apps でデプロイされているサイトにアクセスしておきます。
その状態で Clarity のプロジェクト画面で「レコーディング」を選択します。

スニペットがきちんとロードされていれば、少なくとも 1 人のライブユーザーが存在しています。

Clarity のレコーディングでは、ユーザーのサイト上でのマウスの移動やスクロール、クリックなどの操作をリプレイしながら確認できます。

スニペット追加直後は見ることができませんが、24 時間程度経過すると、Clarity では「ダッシュボード」、「ヒートマップ」に情報が表示されます。

ダッシュボードの「デッドクリック」などの情報とレコーディング情報を参照することで、実際のユーザーの操作を見ながら Web サイトの改善ポイントやバグなどを確認するといったことが可能です。
ヒートマップでは、Web サイト上でどの部分が多くクリックされているかなどの情報を視覚的に確認できます。

Clarity 導入時の注意点

Clarity は導入が簡単で利用しやすいツールですが、ユーザーの操作を記録するという特性上、Web サイト側ではプライバシーへの配慮が必要です。
この点については、公式ドキュメントでも推奨されています。

https://learn.microsoft.com/en-us/clarity/setup-and-installation/privacy-disclosure

実際に運用しているサイトに導入する際は、ユーザーに対し Clarity を利用していることを開示するようにしておくのが良いでしょう。
フォームなどのユーザーからの入力が存在するサイトでは、それらの入力値が Clarity 上でどのように記録されているかや「マスク」の設定などにより一層、注意を払う必要があります。
可能であれば、検証用の環境を用意し、収集している情報を整理した上で導入するのが良いでしょう。

まとめ

本記事では、Azure Static Web Apps に Clarity を導入する方法を紹介しました。

Clarity を使うことで Web サイトのユーザーの操作を記録し、サイトの改善ポイントを発見するのに役立てることができます。
特に開発者目線ではレコーディング機能によって、ユーザーの操作を簡単に確認できるのでバグなどのデバッグ作業の負担軽減にもなります。

Web サイトのホストに Static Web Apps を使っている場合は、スニペット機能で簡単に導入できるので試してみてはいかがでしょうか。

参考情報

https://learn.microsoft.com/ja-jp/clarity/setup-and-installation/about-clarity

https://learn.microsoft.com/en-us/clarity/heatmaps/heatmaps-overview

https://learn.microsoft.com/en-us/clarity/session-recordings/recordings-overview

https://learn.microsoft.com/en-us/clarity/insights/dashboard-features

Discussion