Blocage de scripts

Agreely propose trois couches de blocage complémentaires. Chacune s'applique à un cas d'usage différent.

#1. Blocage déclaratif : type="text/plain"

Convertissez vos balises de script tierces en remplaçant type="text/javascript" (ou en l'absence du type) par type="text/plain" et en ajoutant l'attribut data-agreely-category :

<!-- Avant (script exécuté immédiatement) -->
<script src="https://www.google-analytics.com/analytics.js"></script>

<!-- Après (script bloqué jusqu'à l'accord de la catégorie "analytique") -->
<script type="text/plain"
        data-agreely-category="analytics"
        src="https://www.google-analytics.com/analytics.js"></script>

La bannière remplace type="text/plain" par type="text/javascript" quand le visiteur accorde la catégorie correspondante, ce qui déclenche l'exécution du script. Elle préserve les nonces existants lors du déblocage.

#Valeurs de catégorie

Valeur data-agreely-category	Catégorie Agreely
analytics	Analytique
marketing	Marketing
functional	Fonctionnel

Les scripts strictly_necessary n'ont pas besoin de cet attribut - ils s'exécutent normalement sans blocage.

#Exemples de balises fréquentes

<!-- Google Analytics (GA4 via gtag) -->
<script type="text/plain"
        data-agreely-category="analytics"
        src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>

<!-- Meta Pixel -->
<script type="text/plain"
        data-agreely-category="marketing">
  !function(f,b,e,v,n,t,s) { /* code Meta Pixel */ }(window, ...);
</script>

<!-- Hotjar -->
<script type="text/plain"
        data-agreely-category="analytics">
  (function(h,o,t,j,a,r){ /* code Hotjar */ })(window, ...);
</script>

<!-- Intercom (fonctionnel) -->
<script type="text/plain"
        data-agreely-category="functional">
  window.intercomSettings = { app_id: "XXXXXXXX" };
</script>

Conseil : la page d'installation dans le tableau de bord Agreely génère automatiquement les réécritures de vos balises à partir du balayage de votre site (les témoins détectés sont catégorisés et les balises correspondantes sont proposées en remplacement).

#2. Espaces réservoirs d'iframes

Pour les iframes tiers (vidéos YouTube, widgets de carte, etc.), utilisez data-agreely-src à la place de src. La bannière affiche un espace réservatoire bilingue avec une invite d'acceptation par catégorie jusqu'à ce que le visiteur accorde la catégorie :

<!-- Avant -->
<iframe src="https://www.youtube.com/embed/XXXXXXX"
        width="560" height="315"></iframe>

<!-- Après -->
<iframe data-agreely-src="https://www.youtube.com/embed/XXXXXXX"
        data-agreely-category="marketing"
        width="560" height="315"></iframe>

L'espace réservatoire reprend les dimensions de l'iframe et propose le libellé bilingue de la catégorie. Quand le visiteur accepte, l'iframe se charge normalement.

#3. Garde d'injection dynamique

Pour les scripts injectés par programmation (via appendChild, insertBefore, etc.) depuis des hôtes de suivi connus, la bannière intercepte l'insertion dans le DOM et la neutralise jusqu'à l'accord de la catégorie. Cette garde est installée de façon synchrone dans le chargeur, avant même que la configuration soit récupérée, afin de neutraliser les injections pendant le temps de chargement.

La garde est applicable à une liste de base intégrée incluant les hôtes fréquents (google-analytics.com, googletagmanager.com, connect.facebook.net, doubleclick.net, hotjar.com, clarity.ms, etc.) et la complète avec les hôtes détectés par le balayage de votre site.

Limite honnête. La garde d'injection intercepte les méthodes DOM standard. document.write est hors de portée ; Consent Mode v2 en refus par défaut est le filet de sécurité pour ce cas.