How to detect Adblock on my website?

问题:

I would like to be able to detect if the user is using adblocking software when they visit my website. If they are using it, I want to display a message asking them to turn it off in order to support the project, like this website does.

If you enter to that site and your browser has some kind of adblock software enabled, then the site instead of showing the actual ads shows a little banner telling the users that the ad revenue is used for hosting the project and they should consider turning Adblock off.

I want to do that on my website, I'm using adsense ads on it, How can I do that?

回答1:

My solution is not specific to a certain ad network and is very lightweight. I've been running it in production for a few years. AdBlock blocks all URLs containing the word "ads". So this is what I did:

I added a small js file to my webroot with the name ads.js

This is the only line of code in that file

var canRunAds = true; 

Then somewhere in my page:

Files like ads.js are blocked by at least these adblockers on Chrome:

• AdBlock
• Adblock Plus
• Adblock Pro

(Yes, these are completely different browser extensions)

This does not work with:

• Ghostery (Only blocks actual doubleclick/appnexus urls)

回答2:

Not a direct answer, but I'd put the message behind the ad to be loaded... rather that trying to detect it, it'd just show up when the ad doesn't.

回答3:

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

With jQuery:

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

Of course, you would need to have a landing page for AdblockNotice.html, and the .myTestAd class needs to reflect your actual ad containers. But this should work.

EDIT

As TD_Nijboer recommends, a better way is to use the :hidden (or :visible, as I use below) selector so that display: none is also checked:

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...     } } 

Of course, both of these could be combined into one if block if desired.

Note that visibility: hidden will not be captured by either as well (where the layout space stays, but the ad is not visible). To check that, another filter can be used:

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

Which will give you an array of ad elements which are "invisible" (with any being greater than 0 being a problem, in theory).

回答4:

No extra requests. No external libraries. Just plain, simple JavaScript:

• You create an element with the class adsbox (as defined as a removable element in the definition file of AdBlock Plus)
• You add it to the document and after a short while you read its offsetHeight
• If AdBlock is installed, the element won’t have any height.

Credit to Christian Heilmann's post, I think it's by far the best solution for detecting AdBlock.

回答5:

Most ads are dynamically loaded in javascript. I just used the onerror event to detect whether the ad script could be loaded or not. Seems to work.

Example with GoogleAds:

This can be used on other elements as well to see if an ad blocker is blocking the content. This method can produce false positives if the remote elements doesn't exist or cannot be reached.

回答6:

To detect if the user is blocking ads, all you have to do is find a function in the ad javascript and try testing for it. It doesn't matter what method they're using to block the ad. Here's what it looks like for Google Adsense ads:

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

This method is outlined here: http://www.metamorphosite.com/detect-web-popup-blocker-software-adblock-spam

回答7:

I know there are already enough answers, but since this question comes up on Google searched for "detect adblock" at the topic, I wanted to provide some insight in case you're not using adsense.

Specifically, with this example you can detect if the default Adblock-list provided by Firefox Adblock is used. It takes advantage that in this blocklist there is an element blocked with the CSS id #bottomAd. If I include such an element in the page and test for it's height, I know whether adblocking is active or not:

The rest is done via the usual jQuery suspect:

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

As can be seen, I'm using setTimeout with at least a timeout of 1ms. I've tested this on various browsers and most of the time, directly checking for the element in ready always returned 0; no matter whether the adblocker was active or not. I was having two ideas about this: either rendering wasn't yet done or Adblock didn't kick in yet. I didn't bother to investigate further.

回答8:

My easiest solution with jquery is:

$.ajax({     url: "/scripts/advertisement.js", // this is just an empty js file     dataType: "script" }).fail(function () {     // redirect or display message here }); 

advertisement.js just contains nothing. When somebody uses adblock, it fails and the function gets called.

回答9:

They're utilizing the fact that Google's ad code creates an iframe with the id "iframe". So as long as you don't already have something on your page with that ID, this'd work for you too.

"); } -->

回答10:

I noticed previous comments uses google adsense as object to test. Some pages don't uses adsense, and using adsense block as test is not really a good idea. Because adsense block may harm your SEO. Here is example how I detect by adblocker simple blocked class:

Html:

Jquery:

$(document).ready(function() {    if(!$("#ablockercheck").is(":visible"))    {      $("#ablockermsg").text("Please disable adblocker.").show();    } }); 

"ablockercheck" is an ID which adblocker blocks. So checking it if it is visible you are able to detect if adblocker is turned On.

回答11:

My advice is: don't do it!

Any scenario where you treat people as "wrongdoers" is going to result in them fighting back.

Here's my proposal.

Put a small unobtrusive message at the top of the page (regardless of whether ads are being blocked) with the text I *totally* respect your right to block ads and a link to another page/pop-up entitled Read more ....

On the other page, make it clear that you understand it's their computer and they are free to use ad blocking.

Also make it clear in a non-accusatory way that the use of these blockers makes it more difficult for you to deliver great content (explaining why in detail) and that, while you'd prefer the ad blocking to not happen on your site, it's totally their decision. Focus on the positives of turning off blocking.

Those who are vehemently opposed to ads will ignore this but you never stood a chance of convincing them anyway. Those who are indifferent may well be swayed by your appeal since you're not doing the whole "let me get my way or I'll take my ball and go home" thing that honestly should be the exclusive domain of five year old children.

Remember, no-one held a gun to your head and forced you to put your stuff on the net. Treat your readership/users with respect and you'll probably find a good number of them will reciprocate.

回答12:

AdBlock seems to block the loading of AdSense (etc) JavaScript files. So, if you are using asynchronous version of AdSense ads you can check if adsbygoogle is an Array. This must be checked after few seconds since the asynchronous script is... asynchronous. Here is a rough outline:

window.setTimeout(function(){     if(adsbygoogle instanceof Array) {         // adsbygoogle.js did not execute; probably blocked by an ad blocker     } else {         // adsbygoogle.js executed     } }, 2000); 

To clarify, here is an example of what the AdSense asynchronous ads code looks like:

Notice that adsbygoogle is initialized as an Array. The adsbygoogle.js library changes this array into Object {push: ...} when it executes. Checking the type of variable after a certain time can tell you if the script was loaded.

回答13:

Just add small script on your site:

var isAdsDisplayed = true; 

With name adsbygoogle.js

Then do following:

Found this solution here

回答14:

This approach I use on my site, maybe you will find it helpful. In my opinion, it's the simpliest solution.

AdBlocker blocks specific classes and html elements, by inspecting these selectors of any blocked ads in developer console (they are all listed) you can see which elements will be always blocked.

E.g. just inspect this question page on stackoverflow and you will see bunch of blocked ads.

For example, any element with bottom-ad class is automatically blocked.

1. I created a non-empty div element with bottom-ad class:
   HI
2. After page loads just check if this element is hidden. I used jQuery, but feel free to use javascript: $('.bottom-ad').css('display') == "none" or even better by using $('.bottom-ad').is(':visible')

If value is true, then AdBlocker is active.

回答15:

You don't need an extra HTTP request , you may simply calculate the height of a fake add.

By the way, here is a full list matching the elements that adblockers avoid rendering.

window.adBlockRunning = function() {     return (getComputedStyle(document.getElementById("detect"))["display"] == "none") ? true : false;   }()  console.log(window.adBlockRunning);

#detect {   height: 1px;   width: 1px;   position: absolute;   left: -999em;   top: -999em }

回答16:

the safe way is to wrap your ads inside

and check the height

 /* your ads code */ 
  setTimeout(function(){   if(document.getElementById("check-ab").offsetHeight === 0){     console.log("ads blocked");   }   else{     console.log("ads running");   } }, 100); 

it work with adblock plus and bluehell firewall.

回答17:

If using the new AdSense code, you can do an easy check, with out resorting to content or css checks.

Place your ads as normal in your markup:

Then you call the adsense code at the bottom of your page (note do not use the "async" flag when calling the adsbygoogle.js script):

Then add this little snippit of code below that:

AdSense always creates/sets the flag adsbygoogle.loaded to true when the ads are loaded, You could place the check in a setTimeout function to delay the check by a few seconds.

回答18:

An efficient way to check if there is an adblock: Simply check if there is adblock enabled by trying to trigger the URL of google ads. If yes then run the callback_has_adblock, if not then run the callback_no_adblock. This solution costs one request more but at least it works:

var hasAdBlock = function (callback_has_adblock, callback_no_adblock) {      $.getScript( "http://pagead2.googlesyndication.com/pagead/show_ads.js" )         .done(function( script, textStatus ) {             callback_no_adblock();         })         .fail(function( jqxhr, settings, exception ) {             callback_has_adblock();     }); }; 

This solution works for all kind of ads, not only google adsense.

回答19:

Despite the age of this question, I recently found it very useful and therefore can only assume there are others still viewing it. After looking here and elsewhere I surmised that the main three client side checks for indirectly detecting an ad blocker were to check for blocked div/img, blocked iframes and blocked resources (javascript files).

Maybe it's over the top or paranoid but it covers for ad blocking systems that block only one or two out of the selection and therefore may not have been covered had you only done the one check.

On the page your are running the checks add: (I am using jQuery)

and add the following anywhere else on the page:

I used a div with a bait name as well as an externally hosted image with the text "Advert" and in dimensions used by AdSense (thanks to placehold.it!).

In advertisement.js you should append something to the document which we can check for later. Although it seems like you're doing the same as before, you are actually checking for the file (advertisement.js) itself being loaded, not the output.

$(document).ready( {      $("body").append("
check
");  }); 

And then the ad blocker detection script which combines everything

$(document).ready(function() {     var ifr = '';     $("body").append(ifr); });  $(window).on("load",function() {      var atb = $("#myTestAd");     var atb2= $("#myTestAd2");     var ifr = $("#adServer");      setTimeout(function()     {          if( (atb.height()==0) ||             (atb.filter(":visible").length==0) ||             (atb.filter(":hidden").length>0) ||             (atb.is("hidden")) ||             (atb.css("visibility")=="hidden") ||             (atb.css("display")=="none") ||             (atb2.html()!="check") ||             (ifr.height()!=300) ||             (ifr.width()!=300) )         {             alert("You're using ad blocker you normal person, you!");         }      },500);  }); 

When the document is ready, i.e. the markup is loaded, we add the iframe to the document also. Then, when the window is loaded, i.e. the content incl. images etc. is loaded, we check:

• The dimensions and visibility of the first test div.
• That the content of the second test div is "check", as it would have been if the advertimsent.js was not blocked.
• The dimensions (and I guess visibility, as a hidden object has no height or width?) of the iframe

And the styles:

div#myTestAd, iframe#adServer {     display: block;     position: absolute;     left: -9999px;     top: -9999px; }  div#myTestAd2 {     display: none; } 

Hope this helps

回答20:

I know this is already answered, but I looked at the suggested sample site, and I see they do it like this:

"); };