Détection de bloqueur de publicité AKA Adblock Plus
Après une recherche de quelques heures sur Google et Stackoverflow, je ne trouvais pas de solution… .. Ce que j'essaie de faire est de détecter Adblock plus et d’afficher un simple message pour le moment.
Ce que je veux faire est de détecter Adblock plus sans en utilisant un fichier JavaScript ou jQuery . La plupart des adblock plus détectent les scripts utilisant un fichier, par exemple "show_ads.js" hébergé sur son propre domaine avec une ligne pour la définir "adblock = false;"
Le problème avec l'utilisation d'un fichier JavaScript, les utilisateurs peuvent liste blanche ce fichier JavaScript et il ne le détectera plus. Ce que je recherche, c’est un code JavaScript chargé directement dans le code HTML permettant de détecter si une personne utilise un bloqueur de publicité sans utiliser de fichier.
Exemple ci-dessous:
<script type="text/javascript">
// line of code that detects if using ad blocker
if so display message
</script>
La raison derrière cela est qu’aucun bloqueur d’annonces ne peut mettre en liste blanche le fichier JavaScript sur votre serveur. Oui, je sais qu'il existe d'autres méthodes pour résoudre ce problème avec les addons NoScript, mais j'ai déjà une solution à cela. J'ai une bonne idée qui n'a jamais été tentée et les bloqueurs de publicités ne peuvent pas la bloquer une fois que j'en ai fini.
Toutes les suggestions et les exemples seront grandement appréciés.
Vous n'avez pas besoin d'un plugin pour détecter adblock, utilisez simplement ceci:
<script type="text/javascript">
var adblock = true;
</script>
<script type="text/javascript" src="adframe.js"></script>
<script type="text/javascript">
if(adblock) {
//adblock is installed and enabled on this site :-D
}
</script>
Contenu de adframe.js:
adblock = false;
Mise à jour: Adblock Plus bloque certaines requêtes ou cache certains éléments en fonction des modèles existants. L’un de ces modèles est le suivant (dans patterns.ini):
[Filter]
text=/adframe.
hitCount=843
lastHit=1456391595626
qui bloque toute URL comportant /adframe..
Mise à jour du 25 août 2018
Adblock plus a modifié la façon dont il trouve la liste et bloque les annonces. Il a beaucoup de listes appelées abonnements qui sont utilisés pour le blocage. Par exemple celui qui est celui par défaut:
https://easylist-downloads.adblockplus.org/easylist.txt
Vous pouvez utiliser les règles de ce fichier pour trouver un nom de fichier à utiliser. Par exemple, vous pouvez utiliser seo-ads.js
P.S pour les développeurs: Pour une raison quelconque, je n'ai pas pu faire en sorte que ABP bloque ces fichiers dans un environnement local.
P.S: ABP est mon bloqueur de publicité préféré :-D
Utilisez mon plugin "FuckAdBlock", il peut facilement détecter AdBlock: https://github.com/sitexw/FuckAdBlock
Exemple :
fuckAdBlock.on(true, function() {
alert('AdBlock detected !');
}).on(false, function() {
alert('AdBlock is not detected =)');
});
Exemple en ligne: http://fuckadblock.sitexw.fr/
Ce que j'ai vu sur le terrain utilise une image d'arrière-plan derrière l'annonce. Si adblock n'est pas actif, l'annonce sera affichée sur l'image d'arrière-plan (ce qui rend l'image d'arrière-plan non visible). Si adblock est actif, la publicité est bloquée et l'utilisateur voit à la place l'image d'arrière-plan.
<div id="ad-container">
<img src="../ad/ad.png" id="ad">
</div>
Avec CSS:
#ad-container {
background-image: url( http://domain.com/pleasedonotuseadblocker.png );
height: 200px;
width: 200px;
}
#ad {
height: 200px;
width: 200px;
}
Si vous souhaitez que les annonces soient diffusées, même lorsque AdBlock est actif, vous devez comprendre ce qu’AdBlock est capable de faire.
- AdBlock peut bloquer le chargement des ressources
- AdBlock peut masquer des éléments spécifiques dans le DOM.
Bien qu'il soit dit que AdBlock puisse également modifier CSS, je ne trouve aucune documentation à ce sujet autre que le masquage et la réduction d'éléments.
Alors, que pouvez-vous faire exactement pour être "plus intelligent" que AdBlock?
Vous pouvez masquer votre demande de manière à ce qu'elle ne puisse jamais être "juxtaposable" (par exemple, http://domain.com/ae9a70e0a.png, où le nom de l'image sera aléatoire chaque fois et sans préfixe commun). Autant que je sache, une règle dans AdBlock ne peut pas contenir de regex. Une règle ne correspondrait à aucune annonce ou à trop de ressources. Il serait possible de réécrire une telle URL sur le serveur pour pointer vers votre annonce.
Toutefois, même si AdBlock peut ne pas empêcher le chargement de votre annonce, il peut tout de même le cacher. Il n'y a pas de véritable moyen de contourner cela. Il y aura toujours un sélecteur CSS intelligent qui sélectionnera votre élément. Vous pouvez cependant ajouter une image de fond avec du contenu. Ceci n'est pas utile pour une annonce (non cliquable), mais peut vous aider à afficher un autre message. L'inconvénient est que si quelqu'un décide de bloquer cette image d'arrière-plan gênante, votre contenu sera également masqué.
En ce qui concerne un script, vous pourrez peut-être charger l'annonce avec une requête ajax. Je suppose (mais je ne peux pas tester) que cela produira une erreur si la ressource ne peut pas être chargée (car elle était bloquée). ($.ajax( request ).error( function() { ... } ); en jQuery ou un équivalent en javascript). Vous pouvez l'utiliser pour faire autre chose. Vous pouvez l'inclure dans le document lui-même, au lieu d'une ressource externe, pour vous assurer qu'il sera toujours exécuté (si javascript est activé). Même dans ce cas, vous ne pouvez pas être sûr que «quoi que vous fassiez» sera toujours affiché de manière visible. En dernier recours, vous pouvez créer une window.alert( ... ). Supposons qu’en moins de 3 pages, vos visiteurs ne reviendront jamais si vous l’utilisez.
Une autre façon dont je peux penser, est de créer une Websocket sur le serveur (autant que cela ne puisse pas être bloqué par AdBlock). Côté serveur, vous devrez vérifier si les pages d’annonces ne sont pas chargées lors du chargement d’une page donnée. Ces informations peuvent être envoyées via le socket, qui peut être utilisé dans votre script pour "faire quelque chose". Cela, cependant, semble fou compliqué et représente une surcharge significative pour "juste" un script qui détecte AdBlock.
Un simple appel à Ajax fait le travail:
var xmlhttp = new XMLHttpRequest()
xmlhttp.onreadystatechange = function() {
if( xmlhttp.readyState == XMLHttpRequest.DONE ){
if( xmlhttp.status !== 404 ){
console.log("Blocking ads")
}else{
console.log("Not blocking ads")
}
}
}
xmlhttp.open("GET", "/498100ffe815d700cd838d1/ads/showad.js", true)
xmlhttp.send()
Ou mieux encore, sans surcharge HTTP supplémentaire:
var adBlockTester = document.createElement('div');
adBlockTester.innerHTML = ' ';
adBlockTester.className = 'adsbox';
document.body.appendChild(adBlockTester);
window.setTimeout(function() {
if( adBlockTester.offsetHeight === 0 ){
console.log("Blocking ads")
}else{
console.log("Not blocking ads")
}
document.body.removeChild(adBlockTester);
}, 60);
Voici le code pour détecter adblock. Vous pouvez apprendre comment fonctionne le code ici
function detect()
{
//create a iframe. Append the iframe to the body. And then after 100ms check if their offsetHeight, display or visibility is set such a way that user cannot see them.
//In the URL use the words specific to advertising so that Adblock can do string matching.
var iframe = document.createElement("iframe");
iframe.height = "1px";
iframe.width = "1px";
iframe.id = "ads-text-iframe";
iframe.src = "http://domain.com/ads.html";
document.body.appendChild(iframe);
setTimeout(function()
{
var iframe = document.getElementById("ads-text-iframe");
if(iframe.style.display == "none" || iframe.style.display == "hidden" || iframe.style.visibility == "hidden" || iframe.offsetHeight == 0)
{
alert("Adblock is blocking ads on this page");
iframe.remove();
}
else
{
alert("Adblock is not detecting ads on this page");
iframe.remove();
}
}, 100);
}
L'extrait suivant détectera à peu près tous les bloqueurs de publicité. Requiert jQuery.
(function(){
var bait = 'http://googleads.g.doubleclick.net/pagead/gen_204?id=wfocus&gqid=advertisment&advert=ads';
$.ajax({ url: bait, dataType: "script"})
.fail(function () { alert('ad blocked'); })
.abort(function () { alert('ad blocked'); });
})();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Elle est encapsulée dans une fonction anonyme qui s’exécute automatiquement afin de ne pas interférer avec les autres vars ou codes du site.
La bait utilise le réseau de diffusion d’annonces le plus populaire (le double-clic de Google) et inclut quelques autres paramètres de requête utilisés par easylist et d’autres.
Les méthodes fail() et abort() sont toutes les deux obligatoires, mais seules l'une ou l'autre seront invoquées.
Ne pas mettre le code dans adblocker.js ou similaire car ces sortes de noms de fichiers sont bloqués lors du chargement. Intégrez-le ou incluez-le dans un nom de fichier aléatoire/arbitraire ou combinez-le dans le fichier JS de votre site principal.
Pour moi, aucun des trucs n'a fonctionné, quelque chose que je faisais mal. mais c'est un moyen très spécifique à mettre en œuvre pour les annonces google.
window.onload = function() {
if (document.getElementsByClassName('google-auto-placed').length == 0){
// Adblock Detected
}
}
Si vous avez un autre système publicitaire comme Amazon, recherchez son nom/identifiant de classe générique en inspectant la page.
Si vous envisagez de placer ce code dans un fichier .js séparé, assurez-vous que le nom de fichier ne contient pas le mot "Ad", . il suffit de le nommer magic.js
Si Google décidait de changer de nom de div, cette méthode échouerait. mais cela semble peu probable.
Détection simple javascript/jQuery qui fonctionne bien:
$('body').append('<div id="ad-container" style="position:absolute;"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" id="ad"></div>');
var ad_container = $('body').children('#ad-container');
if(!ad_container.is(":visible")) {
// Add your warning and/or adblock detection logic here.
}
ad_container.remove();
Dans mon cas, ADB cachait le contenu même s’il n’y avait pas d’annonces. (Simplement parce que le mot ad était présent dans de nombreuses URL, car c’était le type slug du message ..)
Mais j'ai remarqué qu'ils ne suppriment pas le contenu, appliquant simplement l'affichage: aucun au corps
Donc, comme une solution supplémentaire,
Je viens de remarquer que l’application display: block! Important; de corps, empêche de cacher le contenu par Adblock plus
<body style="display: block !important;">
<img src="url-containg-ad-ads-Word.jpg" alt="you should see this anyway" >
</body>
Le Smartest} et le moyen le plus simple que j'ai trouvé est:
1) ajoutez ce code html quelque part dans votre balisage probablement au-dessus.
<div id="bait" class="pub_300x250" style="color: #fff">.</div>
Les bloqueurs de publicité détectent généralement les tailles de publicité de (pub_300x250) comme indiqué dans Easylist et les bloquaient, ce qui est déclenché par "l'appât".
2) puis ajoutez ce code js dans votre fichier script.
if (document.getElementById("bait").offsetHeight === 0) {
// function code or alert (whatever) here.
alert("Ad-Blocker DETECTED");
}
Notre script détecte si cette balise existe dans la version html actuelle en vérifiant l'identifiant "appât".
Cela fonctionne pour moi avec Adblock, AdBlock-Plus & uBlock Origin sur chaque site de chaque navigateur.
Voici le moyen le plus simple de le gérer (pas de iframe, pas de jquery):
var elem = document.createElement('div');
elem.className = 'adclass';
document.body.appendChild(elem);
window.setTimeout(function () {
var isAdblockEnabled = !(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
if (isAdblockEnabled) {
// Adblock is enabled
}
}, 0);
C'est une course aux armements, bien sûr, et j'appuie le droit de quiconque de bloquer des publicités, mais également des sites Web qui dépendent des revenus publicitaires pour convaincre les utilisateurs, ou peut-être les persuader de s'abonner ou de faire un don pour compenser la perte de revenus publicitaires . Je n'approuve pas les sites qui essaient de forcer les utilisateurs à voir des annonces, mais un message poli est acceptable.
Quoi qu’il en soit, pour le moment, il convient de noter qu’il existe de nombreuses extensions/plugins adblocking, et qu’elles peuvent toutes avoir différentes façons de le faire, et que cela varie parfois aussi entre les systèmes d’exploitation et les navigateurs. J'ai constaté que pour les besoins actuels, ce sélecteur jQuery est suffisant pour au moins savoir si AdBlock ou AdBlockplus est utilisé, multiplate-forme, sur au moins Chrome et Firefox:
if($("div[id^=google_ads_iframe_] iframe:visible").length == 0) {
// pop up a message or whatever
}