Microsoft Clarityで個人情報をマスクする
Microsoft Clarityの公式ドキュメント
https://learn.microsoft.com/en-us/clarity/setup-and-installation/clarity-masking#using-the-clarity-data-clarity-mask-api
に従って、個人情報をマスクするためのAPIに関する内容を、ウェブページの実装担当の方向けに説明いたします。
Clarityのマスキング機能について
Clarityは、ウェブサイト上のユーザーの行動を分析するツールであり、ユーザーの個人情報や機密データが記録されないよう、デフォルトでマスキング機能が有効になっています。
参考にさせていただいた記事
Clarityのマスク（マスキング）機能について
https://ppc-log.com/measurement_tools/microsoft-clarity/3887/
マスキングモードの種類
Clarityでは、以下の3つのマスキングモードが提供されています：
Strict（厳格）: ウェブサイト上のすべてのコンテンツがマスクされます。
Balanced（バランス）: 数値やメールアドレスなど、機密性の高いコンテンツのみがマスクされます（デフォルト設定）。
Relaxed（緩和）: コンテンツはマスクされませんが、入力ボックスやドロップダウンメニューの内容は引き続きマスクされます。
特定の要素をマスクまたはアンマスクする方法
ウェブサイト全体のマスキングモードに加えて、特定の要素を個別にマスクまたはアンマスクすることが可能です。これにより、DOM内の特定の要素やその子要素に対して、マスキング設定を上書きできます。
Clarityウェブサイト上での設定手順
マスキングモードの設定:
Clarityの管理画面で「設定」＞「マスキング」に移動します。
「マスキングモード」から、希望するモードを選択します。
要素ごとのマスキング設定:
「設定」＞「マスキング」で、「要素を追加」を選択します。
マスクまたはアンマスクしたい要素のCSSセレクターを入力し、「確認」をクリックします。
追加後、必要に応じてマスクとアンマスクを切り替えることができます。
HTML属性を使用した設定方法
HTMLの特定の要素に属性を追加することで、直接マスキング設定を行うことも可能です。
コンテンツをマスクする:
該当するHTML要素に
data-clarity-mask="true"属性を追加します。これにより、その要素とその子要素の内容がマスクされます。
コンテンツのマスクを解除する:
該当するHTML要素に
data-clarity-unmask="true"属性を追加します。これにより、その要素とその子要素の内容のマスクが解除されます。
具体例
入力フォームの要素
ユーザーの名前、メールアドレス、電話番号などの個人情報が入力されるフィールド。
<input type="text" name="username" data-clarity-mask="true"> <input type="email" name="email" data-clarity-mask="true">表示された個人情報を含む要素
ページに直接表示されている個人情報（名前や住所など）。
<span data-clarity-mask="true">山田 太郎</span> <p data-clarity-mask="true">東京都渋谷区○○○</p>カスタマイズされたコンテンツが含まれる要素
ウェブページに動的に表示されるデータやユーザー情報（例: ショッピングカートの商品情報やユーザープロファイル）。
<div data-clarity-mask="true"> ユーザー情報: 山田 太郎 </div>リンクやボタンに含まれる情報
ユーザーの個別IDや情報が含まれている場合。
<a href="/user/12345" data-clarity-mask="true">ユーザープロファイル</a>特定のクラスやIDを持つ要素
CSSセレクターを指定することで、同じ種類の要素を一括してマスキング可能。
<div class="user-details" data-clarity-mask="true">個人情報</div>
注意事項
マスキング設定の変更は、新しい記録に対して適用され、反映されるまでに最大1時間かかることがあります。既存の記録には遡及的に適用されません。
入力ボックス内のコンテンツやドロップダウンメニューの選択肢は、すべてのモードでデフォルトでマスクされ、カスタマイズはできません。
現在、Clarityはスタイルシートやstyleタグ内のコンテンツをマスクしないため、CSS内に機密情報を含めないことを推奨します。
これらの設定を適切に行うことで、ユーザーの個人情報を保護しながら、Clarityを活用してウェブサイトのユーザー行動を分析することができます。
