Comment détecter AdBlock dans Webflow et afficher un message ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment détecter si un visiteur utilise un bloqueur de publicités sur votre site Webflow et afficher un message adapté.

Exemple

Comprendre le principe

Les bloqueurs de publicités (uBlock Origin, AdBlock Plus...) utilisent des listes de filtres pour masquer les éléments dont le nom de classe ou l'ID ressemble à une publicité. La technique du "bait" consiste à créer un élément invisible avec des classes typiques des pubs (adsbox, ad-banner...). Si AdBlock le bloque, l'élément a une taille nulle : on peut alors détecter la présence d'un bloqueur.

1. Créez le message à afficher dans Webflow

Créez un Div avec l'ID adblock-message contenant votre message. Mettez-le en display: none par défaut dans vos styles. Ce Div sera affiché uniquement si AdBlock est détecté.

2. Ajoutez le script dans Footer code

(function() {
  var bait = document.createElement('div');
  bait.className = 'adsbox ad-banner pub_300x250';
  bait.style.cssText = 'position:absolute;left:-9999px;width:1px;height:1px;';
  document.body.appendChild(bait);
  setTimeout(function() {
    var blocked = bait.offsetHeight === 0 || bait.offsetWidth === 0 || !bait.offsetParent;
    bait.remove();
    if (blocked) {
      var msg = document.getElementById('adblock-message');
      if (msg) msg.style.display = 'block';
    }
  }, 100);
})();

3. Adaptez le message

Le contenu du Div adblock-message est libre. Exemples de messages efficaces : une bannière discrète demandant de whitelister votre site, une modale expliquant l'impact sur votre contenu gratuit, ou un message informatif sans jugement.

Conclusion

La détection d'AdBlock permet d'adapter votre contenu ou de sensibiliser vos visiteurs. Cas d'usage :

• Sites de contenu gratuit financés par la publicité
• Médias et blogs avec modèle freemium
• Affichage d'une alternative (abonnement, don) aux utilisateurs avec AdBlock

Résultat de la détection sur votre navigateur actuel

Détection en cours...