Intégration du SDK Ad Sentinelle

Ce guide détaille toutes les méthodes d'intégration du SDK Ad Sentinelle selon votre stack technique.

Architecture du SDK

Le SDK Ad Sentinelle est conçu pour être léger et performant :

• Taille : < 15 KB (gzippé)
• Dépendances : Aucune (Vanilla JavaScript)
• Chargement : Asynchrone, non-bloquant
• Compatibilité : Tous navigateurs modernes

Méthode recommandée : Loader dynamique

La méthode recommandée utilise notre loader dynamique qui charge automatiquement la configuration depuis votre dashboard :

<script src="https://adwall-backend-xxxxx.run.app/v1/loader/SITE_ID.js" async></script>

Avantages

• ✅ Configuration centralisée (modifiable sans redéploiement)
• ✅ Mise à jour automatique du SDK
• ✅ Optimisé pour la performance
• ✅ Cache intelligent

Guides par framework

Choisissez votre framework pour un guide détaillé :

Framework	Guide
HTML / Vanilla JS	Intégration HTML →
React / Next.js	Intégration React →
Vue.js / Nuxt	Intégration Vue →

Options de configuration

Le SDK peut être configuré avec des options avancées :

<script>
  // Configuration globale (optionnel)
  window.ADWALL_CONFIG = {
    debug: false,           // Active les logs de debug
    delay: 0,               // Délai avant affichage (ms)
    cookieDomain: null,     // Domaine pour les cookies
  };
</script>
<script src="https://adwall-backend-xxxxx.run.app/v1/loader/SITE_ID.js" async></script>

Options disponibles

Option	Type	Défaut	Description
debug	boolean	false	Active les logs dans la console
delay	number	0	Délai avant détection (millisecondes)
cookieDomain	string	null	Domaine pour les cookies (sous-domaines)
onDetected	function	null	Callback quand adblock est détecté
onConverted	function	null	Callback après conversion

Événements JavaScript

Le SDK émet des événements que vous pouvez écouter :

// Écouter la détection d'adblock
window.addEventListener('adwall:detected', (event) => {
  console.log('Adblock détecté !', event.detail);
});

// Écouter l'affichage du wall
window.addEventListener('adwall:displayed', (event) => {
  console.log('Wall affiché', event.detail);
});

// Écouter la conversion
window.addEventListener('adwall:converted', (event) => {
  console.log('Utilisateur converti !', event.detail);
});

Liste des événements

Événement	Déclencheur
adwall:init	SDK initialisé
adwall:detected	Adblock détecté
adwall:displayed	Wall affiché
adwall:closed	Wall fermé (mode soft)
adwall:converted	Conversion validée
adwall:error	Erreur survenue

Single Page Applications (SPA)

Pour les SPA (React, Vue, Angular), le SDK gère automatiquement les changements de route. Aucune configuration supplémentaire n'est nécessaire.

Si vous souhaitez re-vérifier manuellement :

// Re-vérifier l'adblock après navigation
window.Ad Sentinelle?.check();

Content Security Policy (CSP)

Si votre site utilise une CSP stricte, ajoutez les directives suivantes :

script-src 'self' https://adwall-backend-xxxxx.run.app;
connect-src 'self' https://adwall-backend-xxxxx.run.app;
style-src 'self' 'unsafe-inline';

Test en environnement local

Pour tester en local (localhost), ajoutez localhost à la liste des domaines autorisés dans votre dashboard.

Attention

N'oubliez pas de retirer localhost avant de passer en production.

Vérification de l'intégration

Consultez notre guide de vérification pour vous assurer que l'intégration est correcte.