PrivacyKit
FonctionnalitésDémarrage rapideTarifs

<compliance-monitor>

Compliance Monitor surveille les requêtes sortantes et valide la couverture des gardes de consentement sur votre site en ligne, en détectant les traceurs non gérés et les régressions introduites par les modifications du site. Inactif par défaut, il reste invisible pour les visiteurs et peut être inclus en production sans risque.

Attributs
AttributTypeValeur par défaut / ObligatoireDescription
debugbooleanfalseActive le panneau Compliance Monitor au chargement de la page. Pour les environnements de développement uniquement.
delaynumber5000Fenêtre d'observation réseau (en millisecondes) avant que Compliance Monitor commence à valider l'utilisation des endpoints et la couverture des gardes de consentement.
ignore-first-party-subdomainsbooleantrueLorsque true, les requêtes vers des sous-domaines du domaine actuel sont ignorées silencieusement.
fab-positionleft | rightrightDétermine le côté du viewport auquel le FAB de Compliance Monitor est épinglé.

Exemple

HTML
<compliance-monitor debug delay="5000" ignore-first-party-subdomains="true" fab-position="left"></compliance-monitor>

Compliance Monitor reste caché aux visiteurs même lorsqu'il est inclus dans le bundle de production. La méthode recommandée pour l'activer sur un site en ligne est d'ajouter ?privacykit=monitor à l'URL — cela active le moniteur uniquement pour cette session de navigateur, sans affecter l'expérience des visiteurs.

Activer de manière programmatique :

TypeScriptRéférence de l'API
window.PrivacyKit?.toggleComplianceMonitor();

Extraits CSS

Évitez les clignotements avant le chargement complet des web components. Sans cet extrait, le HTML slotté ou protégé peut apparaître brièvement lorsque :

  1. consent-dialog peut clignoter brièvement si vous utilisez des éléments slottés et qu'ils sont rendus avant le chargement de la définition du composant.
  2. consent-guard peut clignoter brièvement s'il est utilisé pour du HTML conditionnel et que le contenu est rendu avant que le composant ne s'active.
  3. consent-missing peut clignoter brièvement s'il est utilisé comme contenu de repli et qu'il est rendu avant que le composant ne s'active.

Ajoutez des styles dans votre light DOM pour éviter ces clignotements.

NPM
CSS
consent-dialog:not(:defined) [slot] {
  display: none;
}

consent-guard:not([active]) {
  display: none;
}

consent-missing:not([active]) {
  display: none;
}
Si vous utilisez du contenu avec slot ou des consent-guards avec du HTML, incluez cet extrait dans votre feuille de style globale ou dans une balise <style> exécutée avant le rendu des web components PrivacyKit.