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>

Quand le visiteur accorde la catégorie correspondante, la bannière recrée le script sans type="text/plain" (avec ses autres attributs et son contenu), ce qui déclenche son exécution. 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éservés d'iframes

Pour les iframes tiers (vidéos YouTube, widgets de carte, etc.), utilisez data-agreely-src à la place de src. Tant que le visiteur n'a pas accordé la catégorie, la bannière masque l'iframe et affiche à sa place un espace réservé, dans la langue de la bannière, avec une invite d'acceptation pour cette 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éservé est un bloc inséré juste avant l'iframe masquée ; il porte la classe agreely-embed-ph, que vous pouvez styler (dimensions comprises) dans votre propre CSS. Il nomme la catégorie et offre un bouton pour l'accepter. Accepter depuis cet espace enregistre une décision de consentement pour cette catégorie, comme dans la bannière, puis 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.