# Intégration Vanilla JavaScript
## Installation
### Via CDN (le plus simple)
```html
Mon Site
```
### Téléchargement local
1. **Télécharger le fichier**
```bash
# Via npm
npm install @synapxlab/cookie-consent
# Ou téléchargement direct
wget https://cdn.jsdelivr.net/npm/@synapxlab/cookie-consent@2.1.3/dist/cookie.min.js
```
2. **Inclure dans votre HTML**
```html
```
## Configuration basique
### Sans configuration (par défaut)
```html
```
### Avec Google Analytics
```html
```
### Avec plusieurs services
```html
```
## Lien de gestion des cookies
Ajoutez ce code dans votre footer :
```html
```
Le clic sur `#openpolitecookie` ouvrira automatiquement le panneau de préférences.
## Interactions programmatiques
### Ouvrir la bannière manuellement
```javascript
// Bouton personnalisé
document.getElementById('mon-bouton').addEventListener('click', function() {
window.CookieConsent.open(true); // true = affiche directement les préférences
});
```
### Écouter les changements de consentement
```javascript
document.addEventListener('cookieConsentChanged', function(event) {
console.log('Nouvelles préférences:', event.detail.preferences);
console.log('Loggé sur serveur:', event.detail.logged);
// Charger vos scripts personnalisés
if (event.detail.preferences.statistics) {
loadMyCustomAnalytics();
}
if (event.detail.preferences.marketing) {
loadMyCustomAds();
}
});
function loadMyCustomAnalytics() {
// Votre code analytics personnalisé
console.log('Analytics activé');
}
function loadMyCustomAds() {
// Votre code publicitaire personnalisé
console.log('Publicité activée');
}
```
### Vérifier le consentement avant chargement
```javascript
// Attendre que Cookie Consent soit prêt
document.addEventListener('DOMContentLoaded', function() {
// Vérifier si les statistiques sont acceptées
if (window.CookieConsent.hasConsent('statistics')) {
loadGoogleAnalytics();
}
// Vérifier si le marketing est accepté
if (window.CookieConsent.hasConsent('marketing')) {
loadFacebookPixel();
}
});
function loadGoogleAnalytics() {
// Charger GA manuellement si besoin
console.log('GA autorisé');
}
function loadFacebookPixel() {
// Charger FB Pixel manuellement si besoin
console.log('FB Pixel autorisé');
}
```
### Réinitialiser le consentement
```javascript
// Bouton "Réinitialiser mes préférences"
document.getElementById('reset-cookies').addEventListener('click', function() {
window.CookieConsent.reset(); // Efface et rouvre la bannière
});
```
## Blocage automatique des scripts tiers
### Scripts externes bloqués automatiquement
Cookie Consent **bloque automatiquement** tous les scripts tiers détectés :
```html
```
### Comment ça marche ?
1. **Scan au chargement** : Détecte tous les `
```
## Personnalisation CSS
### Variables CSS
```html
```
### Thème sombre
```html
```
## Multilingue
### Détection automatique
La langue est détectée automatiquement via `navigator.language`.
Langues supportées : **FR, EN, ES, DE, IT, NL, PT**
### Forcer une langue
```html
```
### Ajouter une langue personnalisée
```javascript
import t from '@synapxlab/cookie-consent/translat';
t.add('ja', {
title: "クッキー同意",
message: "最高のエクスペリエンスを提供するため...",
acceptAll: "すべて受け入れる",
denyAll: "すべて拒否",
viewPrefs: "設定を管理",
savePrefs: "設定を保存",
// ... autres traductions
});
t.setLocale('ja');
```
## Débogage
### Mode debug
```javascript
// Activer les logs console
window.CookieConsent.init({
debug: true, // Active les logs détaillés
statistics: {
google_analytics_key: 'G-XXX'
}
});
```
### Vérifier le stockage
```javascript
// Dans la console du navigateur
console.log(localStorage.getItem('politecookiebanner'));
// Résultat :
// {
// "data": {"cookies": true, "statistics": false, "marketing": true},
// "timestamp": 1704067200000,
// "expiresAt": 1719619200000
// }
```
### Forcer l'affichage de la bannière
```javascript
// Effacer les préférences
localStorage.removeItem('politecookiebanner');
// Recharger la page
location.reload();
```
## Exemples complets
### Site vitrine simple
```html
Mon Site Vitrine
Contenu de la page...
```
### Site e-commerce avec tracking avancé
```html
Ma Boutique
```
## Compatibilité
- ✅ Chrome/Edge (dernières versions)
- ✅ Firefox (dernières versions)
- ✅ Safari (dernières versions)
- ✅ Mobile (iOS/Android)
- ⚠️ IE11 (nécessite polyfills)
## Résolution de problèmes
### La bannière ne s'affiche pas
**Vérifications :**
1. Le script est bien chargé ?
```javascript
console.log(window.CookieConsent); // Doit afficher un objet
```
2. Pas d'erreur JS dans la console ?
3. Le localStorage n'a pas déjà un consentement ?
```javascript
localStorage.removeItem('politecookiebanner');
location.reload();
```
### Les scripts tiers ne se chargent pas
**Vérifications :**
1. Consentement donné ?
```javascript
console.log(window.CookieConsent.getPreferences());
```
2. Configuration correcte ?
```javascript
console.log(window.CookieConsent.getConfig());
```
3. Script bien détecté ?
- Ouvrir l'inspecteur réseau
- Recharger la page après consentement
- Vérifier que les scripts tiers se chargent
### Le logging échoue
**Vérifications :**
1. Clé API correcte ?
2. Endpoint accessible ?
3. CORS configuré ?
4. Voir les logs console
## Support
- 📧 contact@synapx.fr
- 🐛 [GitHub Issues](https://github.com/synapxLab/cookie-consent/issues)
- 📚 [Documentation complète](../configuration.md)