Guide 2026 : Créer un script Anti-AdBlock bienveillant sur Blogger (Vanilla JS)

 

Bonjour à tous, c'est Lucas Martin sur Cash Astuce. Si vous monétisez votre blog avec Google AdSense, vous avez probablement remarqué une baisse de vos revenus. La cause principale ? Plus de 40% des internautes utilisent un bloqueur de publicités (AdBlock) en 2026.

Dans notre catégorie Monétisation, nous n'allons pas bloquer l'accès à notre contenu (ce qui détruirait votre SEO et ferait fuir vos lecteurs). Nous allons plutôt coder un détecteur AdBlock intelligent et bienveillant en Vanilla JS. Ce script affichera un message élégant demandant au visiteur de soutenir votre travail, sans le forcer.

Pourquoi éviter les scripts Anti-AdBlock agressifs ?

De nombreux webmasters font l'erreur de flouter le texte ou de bloquer totalement le site si AdBlock est actif. C'est une très mauvaise pratique :

• Pénalité SEO (Google) : Les robots d'indexation (crawlers) et les algorithmes de Google détestent les pop-ups intrusives qui bloquent l'accès au contenu (Interstitial Penalty).
• Hausse du Taux de Rebond : Un visiteur bloqué fermera immédiatement l'onglet, envoyant un signal négatif aux moteurs de recherche.
• L'approche "Soft Ask" : Un message poli affiché discrètement en bas de l'écran convertit étonnamment bien et respecte les politiques de Google AdSense.

Tutoriel : Détecter AdBlock avec Vanilla JavaScript

Ce script est ultra-léger (< 1 Ko). Il crée un faux élément publicitaire invisible. Si le navigateur du visiteur le masque, le script sait qu'un AdBlock est actif.

Étape 1 : Le Design de la Bannière (CSS)

Ajoutez ce code CSS pour styliser notre bannière d'avertissement. Elle apparaîtra en douceur en bas de l'écran et s'adapte parfaitement au Dark Mode.

/* Notification Anti-AdBlock - Cash Astuce */
#ca-adblock-notice {
  position: fixed; bottom: -100px; left: 50%; transform: translateX(-50%);
  background: #dc3545; color: white; width: 90%; max-width: 600px;
  padding: 15px 20px; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  display: flex; align-items: center; justify-content: space-between;
  z-index: 9999; font-family: inherit; transition: bottom 0.5s ease-in-out;
  visibility: hidden;
}
#ca-adblock-notice.show { bottom: 30px; visibility: visible; }
.ca-adblock-text { flex: 1; margin-right: 15px; font-size: 15px; line-height: 1.5; }
.ca-adblock-text strong { display: block; font-size: 18px; margin-bottom: 5px; }
.ca-adblock-btn {
  background: white; color: #dc3545; border: none; font-weight: bold;
  padding: 10px 15px; border-radius: 5px; cursor: pointer; transition: background 0.3s;
}
.ca-adblock-btn:hover { background: #f8f9fa; }

/* Dark Mode (Optionnel, si votre thème le gère) */
[data-theme="dark"] #ca-adblock-notice { background: #b02a37; }

Étape 2 : Le Script de Détection (JavaScript)

Placez le code suivant juste avant la balise </body> de votre modèle Blogger. Il est conçu pour ne pas ralentir le chargement de votre page (exécution asynchrone).

<!-- Script Anti-AdBlock par Cash Astuce -->
<script>
//<![CDATA[
document.addEventListener('DOMContentLoaded', function() {
  // 1. Création du HTML de la notification
  const noticeHTML = `
    

      

        Vous utilisez un bloqueur de publicités 🛑
        Cash Astuce survit grâce aux revenus publicitaires. Pour nous soutenir et continuer à lire nos tutoriels gratuits, merci d'ajouter notre site à votre liste blanche.
      
      
    
  `;
  document.body.insertAdjacentHTML('beforeend', noticeHTML);

  // 2. Détection de l'AdBlock
  setTimeout(function() {
    // On crée un élément "appât" avec des classes souvent bloquées
    const bait = document.createElement('div');
    bait.className = 'adsbox ad-banner ad-placement doubleclick';
    bait.style.height = '10px';
    bait.style.position = 'absolute';
    bait.style.top = '-9999px';
    document.body.appendChild(bait);

    // Si l'élément est masqué ou supprimé, AdBlock est actif
    if (bait.offsetHeight === 0 || window.getComputedStyle(bait).display === 'none') {
      const notice = document.getElementById('ca-adblock-notice');
      notice.classList.add('show');
      
      // Fermeture de la notification
      document.getElementById('ca-adblock-close').addEventListener('click', function() {
        notice.classList.remove('show');
      });
    }
    
    // Nettoyage de l'appât
    bait.remove();
  }, 1500); // Délai de 1.5s pour laisser l'AdBlock agir
});
//]]>
</script>

Conclusion

Avec ce script, vous ne pénalisez pas l'expérience utilisateur et vous restez dans les bonnes grâces de Google. La transparence paie : en expliquant calmement à vos visiteurs que les publicités vous permettent de maintenir la qualité de vos articles, une bonne partie d'entre eux désactiveront leur AdBlock volontairement.

🚀 Optimisez vos revenus et votre SEO

Maintenant que vous protégez vos revenus AdSense, pourquoi ne pas optimiser la structure technique de votre blog pour attirer encore plus de trafic ? Découvrez nos guides incontournables :

• 💻 SEO Technique : Générer un Sommaire Automatique (Table of Contents) pour booster votre CTR sur Google
• 🤖 IA et Automatisation : Intégrer un Chatbot IA (Gemini) sur Blogger pour retenir vos visiteurs plus longtemps