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つのマスキングモードが提供されています：

ウェブサイト全体のマスキングモードに加えて、特定の要素を個別にマスクまたはアンマスクすることが可能です。これにより、DOM内の特定の要素やその子要素に対して、マスキング設定を上書きできます。

マスキングモードの設定:
- Clarityの管理画面で「設定」＞「マスキング」に移動します。
- 「マスキングモード」から、希望するモードを選択します。
要素ごとのマスキング設定:
- 「設定」＞「マスキング」で、「要素を追加」を選択します。
- マスクまたはアンマスクしたい要素のCSSセレクターを入力し、「確認」をクリックします。
- 追加後、必要に応じてマスクとアンマスクを切り替えることができます。

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>

これらの設定を適切に行うことで、ユーザーの個人情報を保護しながら、Clarityを活用してウェブサイトのユーザー行動を分析することができます。