要素のマスキングルールの設定方法

要素のマスキングでは、ページ全体のマスキングレベルを変更せずに、Session Replayで表示されるページの部分を制御できます。CSSセレクタを使用して、要素全体、属性、またはその両方をマスクまたはアンマスクします。

マスクされた要素はSession Replayから除外され、灰色のボックスとして表示されます。マスクされた属性値は収集されません。アンマスクルールは、通常マスクされるコンテンツを選択的に表示可能にします。

始める前に

• マスクまたはアンマスクしたいコンテンツを特定します。
• 開発チームに安定したCSSセレクタを提供してもらいます。ページレイアウトが更新されても変更されにくい説明的なクラスや属性を使用してください。
• 要素マスキングルールの変更は新たに収集されるデータにのみ適用され、過去のSession Replayには影響しません。
• Shopifyの決済ページでは要素マスキングルールはサポートされていません。
• プロジェクトで作成できる要素ルールの数に制限はありません。

要素マスキングルールの作成方法

要素マスキングルールは、Data Maskingのsettingsページから管理します。

1. プロファイルアイコンをクリックします。
   

2. Projects and usersをクリックします。

   

3. Data Maskingを選択します。
    

4. Element rulesまでスクロールし、Viewをクリックします。

   

5. Create ruleをクリックします。
    
6. ルールの名前を入力します。
    
7. ルールタイプを選択します:
   • Maskは選択した要素またはattributeを非表示にします。
   • Unmaskは選択した要素またはattributeを表示可能にします。
      

8. 要素とattributeの下に、対象にしたいセレクタを追加します:

   • Add element +をクリックして要素セレクタを追加します。
   • Add attribute +をクリックしてattributeセレクタを追加します。
      

   セレクタを追加する前に

   対象にしたいものを決めてください: 

   • 要素は、注文要約、画像、プロダクト名など、ページ上の完全な項目です。
   • attributeは、ID、クラス、画像ソース、注文IDなど、要素に属する詳細です。
   • CSSセレクタは、対象にしたいコンテンツを識別します。

   要素セレクタを使用して、完全な要素とそのネストされたコンテンツをマスクまたはアンマスクします。attributeセレクタを使用して、完全な要素をマスクせずに特定のattributeを対象にできます。また、attributeセレクタと要素セレクタを組み合わせてルールの範囲を絞ることも可能です。
    

9. ページの下で、ルールの適用範囲を選択します:
   • All: ルールはすべてのページに適用されます。
   • Some: ルールは指定したページのみに適用されます。
      
10. Createをクリックします。ルールはドラフトとして作成されます。
    
    

11. ページ上部の保存をクリックして、変更を保存します。

    
     

    ルールの優先順位

    要素レベルのルールは、グローバルおよびページレベルのmasking設定よりも優先されます。もし2つのルールが矛盾する場合、Contentsquareはより高いレベルのプライバシーを提供するルールを適用します。

CSSセレクタの特定方法

CSSセレクタに慣れていない場合は、ターゲットにしたいコンテンツの古いセレクタを特定するために、開発チームに依頼してください。

また、Chrome DevToolsを使用することもできます：

1. Chromeで該当のページを開きます。
2. ターゲットにしたい要素を右クリックし、「検証」を選択します。
3. Elementsパネルで、要素のクラスと属性を確認します。
4. 要素に特有で変更されにくい説明的なクラスまたは属性を特定します。
5. そのセレクタを要素のmaskingルールに追加します。

例：

<div id="order-summary" data-order-id="ORD-12345" class="order-summary">
 <span class="order-number">ORD-12345</span>
 <img src="/images/shoes.jpg" alt="Shoes">
</div>

この例では：

• 注文概要全体は<div>で表される要素です。
• id、data-order-id、class、src、altは属性です。
• order-summary、ORD-12345、order-number、/images/shoes.jpgは属性値です。
• #order-summaryは注文概要全体を特定します。
• .order-numberは注文番号の要素を特定します。
• [data-order-id]はdata-order-id属性を含む要素を特定します。

maskingルールのセレクタを選ぶ際は、位置依存のものよりも説明的で特定的なオプションを優先してください。

説明的で特定的な例：

.order-summary
.order-summary .order-number
[data-order-id]

位置依存の例（避けることを推奨）：

body > main > div:nth-child(2) > section > div

Contentsquareは保存前にCSSセレクタの構文を検証します。空のセレクタフィールドは提出できず、無効なセレクタはエラーを表示します。

有効なセレクタでも意図したより多くの要素にマッチする場合があります。ルールを保存する前に、該当するページテンプレートやページ状態でそのscopeを確認してください。

ルールの編集または削除方法

ルールを編集するには：

1. ルールの横にある鉛筆アイコンをクリックします。

   

2. 変更を行います。
3. Updateをクリックします。
4. Saveをクリックします。

ルールを削除するには：

1. ルールの横にあるゴミ箱アイコンをクリックします。

   

2. Saveをクリックします。 

コード内の特定要素のmasking

Data Masking 設定ページの代替として、Contentsquare はウェブサイトのコード内で特定の要素を直接マスキングすることもサポートしています。この方法は通常、開発チームが担当します。

詳細は技術的実装ドキュメントをご覧ください。

よくある質問

要素マスキングルールは遡及的に適用されますか？

いいえ。ルールは保存後に収集されたセッションにのみ適用されます。過去のセッションリプレイには影響しません。

なぜメールや入力フィールドなどの要素のマスク解除ができないのですか？

自動個人データ編集はウェブトラッキングタグに組み込まれており、特定の種類の機密ブラウザデータをContentsquareサーバーに送信する前に編集します。この必須の保護はマスキング設定と並行して動作し、オフにすることはできません。Contentsquareにおける個人データ収集について詳しくはご覧ください。

なぜ要素マスキングルールの作成や編集ができないのですか？

ルールの作成、編集、削除には管理者アクセスが必要です。異なる役割の場合、ルールの閲覧はできますが変更はできません。編集アクセスが必要な場合はプロジェクトの管理者にお問い合わせください。

CSSセレクタが期待した要素をマスクしていません。何を確認すべきですか？

まず、セレクタが正しいか開発チームに確認してください。同じ要素を対象とする複数のルールがある場合、競合している可能性があります。マスクとアンマスクのルールが重複していないか確認し、必要に応じてセレクタをより具体的に調整してください。

既存のCSTC要素マスキングテンプレートは引き続き使用できますか？（ProおよびEnterpriseプラン）

既存のCSTC構成は自動的に要素マスキングルールのテーブルに表示されます。CSTCの要素マスキングおよび要素アンマスキングテンプレートは非推奨となっており、今後はData Masking設定ページからルールを管理してください。

Shopifyの決済ページで要素マスキングが機能しないのはなぜですか？

Shopifyの決済ページでは要素マスキングルールはサポートされていません。

次に読むべき記事

• データマスキングの設定と管理方法
• 個人データとContentsquare：知っておくべきこと
• 個人データ漏洩を防ぐベストプラクティス