Saviez-vous qu'environ 30 % des internautes utilisent un adblocker ? Si vous utilisez des publicités sur votre site Web pour couvrir les coûts de fonctionnement, vous risquez de perdre des revenus.
La solution ? Vous ne pouvez pas empêcher vos visiteurs d'utiliser un adblocker mais vous pouvez leur demander poliment d'inscrire votre site sur la liste blanche.
Placez le code JS ci-dessous dans votre fichier JS ou sur la page sur laquelle vous souhaitez afficher la popup.
fetch('http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js').catch(() => {
let adp_underlay = document.createElement('div');
adp_underlay.className = 'adp-underlay';
document.body.appendChild(adp_underlay);
let adp = document.createElement('div');
adp.className = 'adp';
adp.innerHTML = `
<h3>Ad Blocker Detected!</h3>
<p>We use advertisements to keep our website online, could you please whitelist our website, thanks!</p>
<a href="#">Okay</a>
`;
document.body.appendChild(adp);
adp.querySelector('a').onclick = e => {
e.preventDefault();
document.body.removeChild(adp_underlay);
document.body.removeChild(adp);
};
});
En utilisant la méthode fetch, nous pouvons récupérer le script Google AdSense, la plupart des adblockers bloquent ce script car il s'agit de la ressource la plus courante pour les publicités. L'instruction catch callback vérifie si la réponse HTTP a échoué, ce qui signifie que la ressource a été bloquée par un adblocker.
Si le chargement de la réponse a échoué, le code ajoutera la boîte popup au document, n'hésitez pas à modifier le message et le titre.
Le code CSS (à ajouter à votre feuille de style) :
.adp {
display: flex;
box-sizing: border-box;
flex-flow: column;
position: fixed;
z-index: 99999;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 400px;
background-color: #ffffff;
padding: 20px;
border-radius: 5px;
}
.adp h3 {
border-bottom: 1px solid #eee;
margin: 0;
padding: 15px 0;
}
.adp p {
flex-grow: 1;
}
.adp a {
display: block;
text-decoration: none;
width: 100%;
background-color: #366ed8;
text-align: center;
padding: 10px;
box-sizing: border-box;
color: #ffffff;
border-radius: 5px;
}
.adp a:hover {
background-color: #3368cc;
}
.adp-underlay {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 99998;
}
Le résultat ressemblera à ce qui suit si l'utilisateur a activé son Adblock :
Conclusion
Voilà comment créer un popup de base pour les utilisateurs d'Adblock, n'hésitez pas à utiliser le code sur votre site Web et/ou vos projets, mais n'oubliez pas de ne pas renommer le nom de la classe en quelque chose comme "adbanner" ou "adblock" car certains bloqueurs de publicité sont capables de le détecter et de les cacher à l'utilisateur.
Si vous avez apprécié cet article, n'oubliez pas de le partager avec vos amis et de laisser un commentaire ci-dessous. Si vous êtes intéressé par la programmation, consultez nos autres articles.