FR
Essai gratuit

Documentation

Tout ce qu'il vous faut pour déployer Consentio rapidement

Site personnalisé

Implémentation avancée de Consentio pour les développeurs

Implémentation de base

Pour l'implémentation de base, il suffit d'insérer une seule ligne de code :

HTML 
<script src="https://consentio.cz/widget/YOUR_SCRIPT_KEY/consentio.min.js" async></script>

Le widget s'initialise automatiquement et affiche le bandeau de cookies dès le premier chargement de la page. Vous trouverez votre SCRIPT_KEY unique dans le tableau de bord, sous Paramètres → Installation.

Astuce : l'identification du site fait partie de l'URL (SCRIPT_KEY), aucun attribut de données supplémentaire n'est donc nécessaire. La langue est détectée automatiquement à partir de l'attribut lang de l'élément <html> ou de l'en-tête Accept-Language du navigateur.

API JavaScript

Une fois le widget chargé, l'objet global window.Consentio est disponible pour un contrôle programmatique.

Méthodes disponibles

Méthode Description
show() Affiche le bandeau de cookies
hide() Masque le bandeau de cookies
showPreferences() Affiche les paramètres de préférences
getConsent() Renvoie l'état de consentement actuel
updateConsent(updates) Met à jour l'état de consentement
onConsentChange(callback) Enregistre un écouteur pour les changements de consentement
getBlockedScripts() Renvoie le nombre de scripts bloqués
getBlockedIframes() Renvoie le nombre d'iframes bloquées

Afficher le bandeau

JavaScript 
// Afficher le bandeau de cookies
Consentio.show()

// Masquer le bandeau de cookies
Consentio.hide()

// Afficher les paramètres de préférences
Consentio.showPreferences()

Récupérer l'état de consentement

JavaScript 
// Récupérer l'état de consentement actuel
const consent = Consentio.getConsent()
// { necessary: true, analytics: false, marketing: false, functionality: false }

// Vérifier une catégorie spécifique
if (consent.analytics) {
  // Exécuter les scripts analytiques
  loadGoogleAnalytics()
}

if (consent.marketing) {
  // Exécuter les scripts marketing
  loadFacebookPixel()
}

Mettre à jour le consentement

JavaScript 
// Mettre à jour des catégories spécifiques
Consentio.updateConsent({
  analytics: true,
  marketing: false
})

Écouteurs d'événements

Réagissez aux changements de consentement à l'aide d'écouteurs d'événements :

JavaScript 
// Option 1 : utiliser onConsentChange
Consentio.onConsentChange((consent) => {
  console.log('Consentement modifié :', consent)

  if (consent.analytics) {
    loadGoogleAnalytics()
  }

  if (consent.marketing) {
    loadFacebookPixel()
  }
})

// Option 2 : utiliser un écouteur d'événement window
window.addEventListener('consentio:consent', (event) => {
  const consent = event.detail
  console.log('Consentement modifié :', consent)
})

Google Consent Mode v2

Consentio prend en charge automatiquement Google Consent Mode v2. Pour garantir un fonctionnement correct, assurez-vous que le widget se charge avant Google Analytics et les autres scripts Google.

HTML 
<!-- 1. Consentio en premier -->
<script src="https://consentio.cz/widget/YOUR_SCRIPT_KEY/consentio.min.js" async></script>

<!-- 2. Puis la balise Google -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>

Correspondance entre catégories et Consent Mode

Catégorie Consentio Google Consent Mode
necessary functionality_storage, security_storage
analytics analytics_storage
marketing ad_storage, ad_user_data, ad_personalization
functionality personalization_storage

Blocage des scripts

Pour bloquer les scripts avant l'obtention du consentement, utilisez l'attribut type="text/plain" avec l'attribut de données data-category :

HTML 
<!-- Le script ne s'exécute qu'après le consentement analytique -->
<script type="text/plain" data-category="analytics">
  // Code Google Analytics
  gtag('config', 'G-XXXXXXX');
</script>

<!-- Le script ne s'exécute qu'après le consentement marketing -->
<script type="text/plain" data-category="marketing">
  // Code Facebook Pixel
  fbq('init', 'XXXXXXX');
</script>

<!-- Le script ne s'exécute qu'après le consentement fonctionnel -->
<script type="text/plain" data-category="functionality">
  // Code de personnalisation
  initPersonalization();
</script>

Catégories disponibles

Catégorie Description
necessary Cookies nécessaires (toujours autorisés)
analytics Cookies analytiques
marketing Cookies marketing
functionality Cookies fonctionnels pour la personnalisation

Bouton pour ouvrir les préférences

Placez un bouton sur votre site pour permettre la réouverture des préférences de cookies (exigé par le RGPD) :

HTML 
<!-- Dans le pied de page du site -->
<a href="#" onclick="Consentio.showPreferences(); return false;">
  Paramètres des cookies
</a>

<!-- Ou sous forme de bouton -->
<button onclick="Consentio.showPreferences()">
  Gérer les préférences de cookies
</button>
Astuce : le RGPD exige que les utilisateurs puissent modifier leurs préférences à tout moment. Placez un lien dans le pied de page du site ou dans votre politique de confidentialité.

Applications monopages (SPA)

Pour React, Vue, Angular et les autres frameworks SPA, le widget fonctionne automatiquement. Il détecte les changements d'URL et se met à jour en conséquence.

JavaScript 
// Exemple : vérifier l'état de consentement lors d'un changement de route (Vue Router)
router.afterEach(() => {
  if (window.Consentio) {
    const consent = Consentio.getConsent()
    if (consent.analytics) {
      // Les scripts analytiques sont autorisés
    }
  }
})
ShoptetGoogle Tag Manager