Comment configurer les règles de masquage d'élément

Le masquage d’élément vous permet de contrôler quelles parties d’une page sont visibles dans Session Replay sans changer le niveau de masquage pour l’ensemble de la page. Utilisez des sélecteurs CSS pour masquer ou démasquer un élément complet, un attribut, ou les deux.

Un élément masqué est retiré de la Session Replay et apparaît comme une boîte grise. La valeur d’un attribut masqué n’est pas collectée. Une règle de démasquage rend le contenu sélectionné visible lorsqu’il serait autrement masqué.

Avant de commencer

• Identifiez le contenu que vous souhaitez masquer ou démasquer.
• Demandez à votre équipe de dev de fournir un sélecteur CSS stable pour le contenu. Utilisez une classe ou un attribut descriptif qui est peu susceptible de changer lorsque la mise en page de la page est mise à jour.
• Les modifications des règles de masquage d’élément s’appliquent uniquement aux données nouvellement collectées et n’affectent pas les Session Replays historiques.
• Les règles de masquage d’élément ne sont pas prises en charge sur les pages de paiement Shopify.
• Il n’y a pas de limite au nombre de règles d’élément que vous pouvez créer pour un projet.

Comment créer une règle de masquage d’élément

Les règles de masquage d’élément sont gérées depuis la page des paramètres de Data Masking.

1. Cliquez sur l’icône de votre profil.
   

2. Cliquez sur Projets et utilisateurs.

   

3. Sélectionnez Masquage des données.
    

4. Faites défiler jusqu’à Règles d’élément et cliquez sur Voir.

   

5. Cliquez sur Créer une règle.
    
6. Saisissez un nom pour la règle.
    
7. Sélectionnez le type de règle :
   • Masquer cache l’élément ou l’attribuer sélectionné.
   • Afficher rend visible l’élément ou l’attribuer sélectionné.
      

8. Sous éléments et attributs, ajoutez les sélecteurs que vous souhaitez cibler :

   • Cliquez sur Ajouter un élément + pour ajouter un sélecteur d’élément.
   • Cliquez sur Ajouter un attribut + pour ajouter un sélecteur d’attribut.
      

   Avant d’ajouter des sélecteurs

   Décidez ce que vous souhaitez cibler : 

   • Un élément est un article complet sur la page, comme un récapitulatif de commande, une image ou un nom de produit.
   • Un attribut est un détail appartenant à un élément, comme un ID, une classe, une source d’image ou un ID de commande.
   • Un sélecteur CSS identifie le contenu que vous souhaitez cibler.

   Utilisez un sélecteur d’élément pour masquer ou afficher l’élément complet et son contenu imbriqué. Utilisez un sélecteur d’attribut pour cibler un attribut spécifique sans masquer l’élément complet. Vous pouvez également combiner un sélecteur d’attribut avec un sélecteur d’élément pour restreindre le domaine de la règle.
    

9. Sous Pages, choisissez où la règle s’applique :
   • Toutes : la règle s’applique à toutes les pages.
   • Certaines : la règle s’applique uniquement aux pages que vous spécifiez.
      
10. Cliquez sur Créer. La règle est créée en tant que brouillon.
    
    

11. Cliquez sur Enregistrer en haut de la page pour enregistrer vos modifications.

    
     

    Priorité de la règle

    Les règles au niveau de l’élément ont la priorité sur les paramètres de masquage global et au niveau de la page. Si deux règles se contredisent, Contentsquare applique la règle qui offre le plus haut niveau de confidentialité.  

Comment identifier un sélecteur CSS

Si vous n'êtes pas familier avec les sélecteurs CSS, demandez à votre équipe de dev d'identifier un sélecteur obsolète pour le contenu que vous souhaitez cibler.

Vous pouvez également utiliser Chrome DevTools :

1. Ouvrez la page concernée dans Chrome.
2. Faites un clic droit sur l'élément que vous souhaitez cibler et sélectionnez Inspecter.
3. Dans le panneau Elements, examinez les classes et attributs de l'élément.
4. Identifiez une classe ou un attribut descriptif qui est spécifique à l'élément et peu susceptible de changer.
5. Ajoutez le sélecteur à la règle de masquage d'élément.

Par exemple :

<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>

Dans cet exemple :

• Le récapitulatif complet de la commande est l'élément représenté par <div>.
• id, data-order-id, class, src, et alt sont des attributs.
• order-summary, ORD-12345, order-number, et /images/shoes.jpg sont des valeurs d'attribut.
• #order-summary identifie le récapitulatif complet de la commande.
• .order-number identifie l'élément du numéro de commande.
• [data-order-id] identifie un élément qui Contient l'attribut data-order-id.

Lors du choix des sélecteurs pour vos règles de masquage, priorisez les options descriptives et spécifiques plutôt que celles dépendantes de la position.

Exemple descriptif et spécifique :

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

Exemple dépendant de la position (à éviter de préférence) :

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

Contentsquare valide la syntaxe du sélecteur CSS avant l'enregistrement. Les champs de sélecteur vides ne peuvent pas être envoyés, et les sélecteurs non valides affichent une erreur.

Un sélecteur valide peut néanmoins correspondre à plus d'éléments que prévu. Vérifiez son domaine d'application à travers les templates de page et états de page concernés avant d'enregistrer la règle.

Comment modifier ou supprimer une règle

Pour modifier une règle :

1. Cliquez sur l'icône crayon à côté de la règle.

   

2. Effectuez vos modifications.
3. Cliquez sur Update.
4. Cliquez sur Save.

Pour supprimer une règle :

1. Cliquez sur l'icône poubelle à côté de la règle.

   

2. Cliquez sur Save.
    

Masquage d'éléments spécifiques dans votre code

En alternative à la page des paramètres de Masquage des données, Contentsquare prend également en charge le masquage d’éléments spécifiques directement dans le code de votre site web. Cette approche est généralement gérée par votre équipe de développement.

Consultez la Documentation d’implémentation technique pour plus de détails.

FAQ

Les règles de masquage des éléments s’appliquent-elles rétroactivement ?

Non. Les règles s’appliquent uniquement aux sessions collectées après leur enregistrement. Les replays de sessions passées ne sont pas affectés.

Pourquoi ne puis-je pas démasquer des éléments tels que les e-mails ou les champs de saisie ? 

La Rédaction automatique des données personnelles est intégrée dans le tag de suivi web pour rédiger certains types de données sensibles du navigateur avant de les envoyer aux serveurs Contentsquare. Cette protection obligatoire fonctionne parallèlement à vos paramètres de masquage et ne peut pas être désactivée. En savoir plus sur la collecte de données personnelles dans Contentsquare.

Pourquoi ne puis-je pas créer ou Modifier des règles de masquage d’éléments ?

La création, la modification et la suppression de règles nécessitent un accès Administrateur. Si vous avez une autre fonction, vous pouvez consulter les règles mais pas les modifier. Contactez l’Administrateur de votre projet si vous avez besoin d’un accès en modification.

Mon sélecteur CSS ne masque pas l’élément attendu — que dois-je vérifier ?

Tout d’abord, confirmez que le sélecteur est correct avec votre équipe de développement. Si vous avez plusieurs règles ciblant le même élément, elles peuvent être en conflit — vérifiez la présence de règles de Masquage et de Démasquage qui se chevauchent et ajustez vos sélecteurs pour qu’ils soient plus spécifiques si nécessaire.

Mes templates de masquage d’éléments CSTC existants fonctionneront-ils toujours ? (offres Pro et Enterprise)

Vos configurations CSTC existantes sont automatiquement visibles dans le tableau des règles de masquage d’éléments. Les templates de Masquage et de Démasquage d’éléments CSTC sont obsolètes — gérez vos règles à partir de la page des paramètres de Masquage des données à l’avenir.

Pourquoi le masquage d’éléments ne fonctionne-t-il pas sur mes pages de paiement Shopify ?

Les règles de masquage d’éléments ne sont pas prises en charge sur les pages de paiement Shopify

À lire ensuite

• Comment configurer et gérer le masquage des données
• Données personnelles et Contentsquare : ce que vous devez savoir
• Bonnes pratiques pour prévenir les fuites de données personnelles