422 votes

Comment détecter Adblock sur mon site web ?

J'aimerais pouvoir détecter si l'utilisateur utilise un logiciel de blocage des publicités lorsqu'il visite mon site web. S'il l'utilise, je voudrais afficher un message lui demandant de le désactiver afin de soutenir le projet, par exemple ce site web fait.

Si vous entrez sur ce site et que votre navigateur est équipé d'un logiciel de blocage des publicités, le site, au lieu d'afficher les publicités proprement dites, affiche une petite bannière indiquant aux utilisateurs que les revenus publicitaires sont utilisés pour l'hébergement du projet et qu'ils devraient envisager de désactiver Adblock.

Je veux faire cela sur mon site web, j'y utilise des annonces adsense, comment puis-je faire cela ?

2 votes

6 votes

Pour les utilisateurs à la recherche d'une solution plus récente, sachez qu'il existe une solution complète enfichable disponible à l'adresse suivante github.com/sitexw/BlockAdBlock

7 votes

Certaines personnes n'aiment tout simplement pas être analysées et faire l'objet de publicité sur le web. Certains sites que j'ai visités, qui nous disent que les revenus soutiennent leur projet, sont tellement encombrés de publicités que cela en devient ridicule.

478voto

timing Points 872

Ma solution n'est pas spécifique à un certain réseau publicitaire et est très légère. Je l'utilise en production depuis quelques années. AdBlock bloque toutes les URL contenant le mot "ads" ou "prebid". Voici donc ce que j'ai fait :

J'ai ajouté un petit fichier js à mon webroot avec le nom prebid-ads.js

C'est la seule ligne de code dans ce fichier. Mise à jour 2022-04-26 Appelez cette variable autrement, voir ci-dessous !

var canRunAds = true;

Puis, quelque part dans votre page :

<html>
  <head>
    <script src="/js/prebid-ads.js"></script>
  </head>
  <body>
    <script>
      if( window.canRunAds === undefined ){
        // adblocker detected, show fallback
        showFallbackImage();
      }
    </script>
  </body>
</html>

Mise à jour 2022-04-26 uBlock Origin charge son propre ads-prebid.js qui renverse l'astuce décrite dans cette réponse (fier !), leur fichier contient ce qui suit :

(function() {
    'use strict';
    window.canRunAds = true;
    window.isAdBlockActive = false;
})();

Comme solution, il suffit de renommer votre canRunAds à quelque chose d'amusant, comme window.adsAreWithUs o window.moneyAbovePrivacy .

Découverte et solution de contournement par Ans de Nijs . Merci !

Extensions d'appui

Les fichiers comme ads.js sont bloqués par au moins ces bloqueurs de publicité sur Chrome :

  • AdBlock
  • Adblock Plus
  • Adblock Pro
  • Ghostery

Ne fonctionne pas avec :

Blaireau d'intimité

2 votes

Pouvez-vous donner le lien complet de js/ads.js s'il vous plaît ? comme je suis sur blogger je devais télécharger le .js quelque part (comme:Google Drive) et le lien dans ce cas ne contient pas de ads . Il serait vraiment utile que vous donniez le lien de votre fichier.

121 votes

Le fichier ne contient que les mots "var canRunAds = true ;", il suffit donc de le créer vous-même.

8 votes

Certains bloqueurs de publicité semblent ne pas bloquer le fichier ads.js, comme pour moi, simple adblock pour chrome.

143voto

mavrck Points 1061

Ce n'est pas une réponse directe, mais je mettrais le message derrière la publicité à charger... plutôt que d'essayer de le détecter, il s'afficherait simplement lorsque la publicité ne le fait pas.

6 votes

Les utilisateurs peuvent toujours bloquer ces annonces bloquées à l'aide d'Adblock : c'est la seule faille que je connaisse.

26 votes

C'est peut-être facile mais ce n'est pas la bonne façon de procéder. Si votre mise en page est déformée ou si la publicité se charge lentement, l'utilisateur peut entrevoir une erreur qui ne le concerne pas. Sachez également qu'Adblock prend des mesures pour bloquer les messages intrusifs destinés aux utilisateurs d'ABP. Si vous voulez demander à l'utilisateur de débloquer son compte, faites-le par le biais d'un message simple et masquable qui se trouve en dehors de la mise en page (et qui ne repousse pas les autres éléments). Regardez duckduckgo.com/?q=foo+bar avec adblock activé.

1 votes

@Xeevis -- Qu'est-ce que je cherche ? -- Je pense qu'AdBlock+ bloque déjà ce que fait duckduckgo.

106voto

Jared Farrish Points 26391

http://thepcspy.com/read/how_to_block_adblock/

Avec jQuery :

function blockAdblockUser() {
    if ($('.myTestAd').height() == 0) {
        window.location = 'http://example.com/AdblockNotice.html';
    }
}

$(document).ready(function(){
    blockAdblockUser();
});

Bien sûr, vous devrez avoir une page de destination pour AdblockNotice.html, et la classe .myTestAd devra refléter vos conteneurs publicitaires réels. Mais cela devrait fonctionner.

EDITAR

Comme le recommande TD_Nijboer, une meilleure solution consiste à utiliser la fonction :hidden (ou :visible comme je l'utilise ci-dessous) de façon à ce que display: none est également vérifié :

function blockAdblockUser() {
    if ($('.myTestAd').filter(':visible').length == 0) {
        // All are hidden, or "not visible", so:
        // Redirect, show dialog, do something...
    } else if ($('.myTestAd').filter(':hidden').length > 0) {
        // Maybe a different error if only some are hidden?
        // Redirect, show dialog, do something...
    }
}

Bien sûr, les deux peuvent être combinés en un seul. if si vous le souhaitez.

Notez que visibility: hidden ne sera pas non plus capturé par l'un ou l'autre (où l'espace de mise en page reste, mais la publicité n'est pas visible). Pour vérifier cela, un autre filtre peut être utilisé :

$('.myTestAd').filter(function fi(){
    return $(this).css('visibility') == 'hidden';
})

Ce qui vous donnera un tableau d'éléments publicitaires qui sont "invisibles" (tout élément étant supérieur à 0 étant un problème, en théorie).

17 votes

La redirection dans ce cas est une mauvaise idée. Si votre service de publicité tombe en panne, todo les visiteurs pourraient être redirigés vers cette page. Je recommande également d'utiliser l'événement window onload plutôt que document ready.

1 votes

Une meilleure méthode de détection serait $('.myTestAd').is(":hidden") ; comme le précise le manuel, elle détecte également si la largeur/hauteur est de 0 et si l'affichage = none.

7 votes

Redirecting in this case is a bad idea. If your advertising service goes down, all visitors could be redirected to that page. En effet. Sans compter qu'il leur suffirait de lancer un simple script pour déjouer la contre-mesure. En outre, pensez-vous vraiment qu'en étant agressif et énergique, les utilisateurs seront motivés pour désactiver leurs bloqueurs de publicité ? Non, tout ce que vous feriez serait de les énerver et de les monter contre votre site. La plupart des sites choisissent d'afficher simplement un message plutôt que de se montrer hostiles.

20voto

Beau Points 855

Pour détecter si l'utilisateur bloque les publicités, il suffit de trouver une fonction dans le javascript de la publicité et d'essayer de la tester. La méthode qu'il utilise pour bloquer la publicité n'a pas d'importance. Voici à quoi cela ressemble pour les annonces Google Adsense :

if(!window.hasOwnProperty('google_render_ad') || window.google_render_ad === undefined) { 
    //They're blocking ads, display your banner
}

Cette méthode est décrite ici : http://www.metamorphosite.com/detect-web-popup-blocker-software-adblock-spam

9 votes

Google_render_ad est maintenant indéfini à tout moment, typeof(window.google_jobrunner) != 'object' fonctionne pour moi.

5 votes

Puisque ce n'est pas du code que vous contrôlez, je pense que c'est une mauvaise idée de compter sur cela, puisqu'une refactorisation de la bibliothèque fera que votre script détectera le blocage de la publicité pour tous les utilisateurs.

2 votes

typeof est une surcharge si vous vérifiez la propriété de l'objet. Utilisez de simples === undefined .

10voto

mark Points 1689

Je sais qu'il y a déjà suffisamment de réponses, mais comme cette question apparaît dans les recherches Google sur le thème "détecter adblock", je voulais vous donner un aperçu au cas où vous seriez ne pas utiliser adsense .

Plus précisément, avec cet exemple, vous pouvez détecter si la liste Adblock par défaut fournie par Firefox Adblock est utilisée. Il tire parti du fait que dans cette liste de blocage, il y a un élément bloqué avec l'id CSS #bottomAd . Si j'inclus un tel élément dans la page et que je teste sa hauteur, je sais si le blocage des publicités est actif ou non :

<!-- some code before -->
<div id="bottomAd" style="font-size: 2px;">&nbsp;</div>
<!-- some code after -->

Le reste se fait via le suspect habituel de jQuery :

$(document).ready( function() {
  window.setTimeout( function() {
    var bottomad = $('#bottomAd');
    if (bottomad.length == 1) {
      if (bottomad.height() == 0) {
        // adblocker active
      } else {
        // no adblocker
      }
    }      
  }, 1);
}

Comme on peut le voir, j'utilise setTimeout avec au moins un délai d'attente de 1ms. J'ai testé ceci sur différents navigateurs et la plupart du temps, la vérification directe de l'élément dans le champ ready renvoie toujours 0, que l'adblocker soit actif ou non. J'avais deux idées à ce sujet : soit le rendu n'était pas encore terminé, soit Adblock n'était pas encore actif. Je n'ai pas pris la peine de chercher plus loin.

0 votes

J'aime beaucoup cette réponse parce qu'elle n'implique pas de requêtes supplémentaires. Y a-t-il des inconvénients à cette approche plutôt qu'aux fausses requêtes ads.js ?

0 votes

Au lieu de tester la longueur et la hauteur, ne pouvez-vous pas simplement utiliser if ( $("#bottomAd").is(':hidden') ) ... ?

0 votes

@EvanLanglois, je sais que vous avez posé la question il y a deux ans, mais votre question m'a en fait intéressé, alors je me suis mis à chercher des informations à ce sujet. Apparemment, c'est le .is(":hidden") dépend du fait que la hauteur et la largeur sont toutes deux égales à zéro. Si vous définissez simplement la hauteur à 0, mais que la division occupe toujours une largeur, elle n'est pas considérée comme "cachée" par jQuery. Donc, si vous pouvez dire , .is(":hidden") dépend en quelque sorte de la façon dont le bloqueur de publicité décide de redimensionner/masquer le contenu.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X