在我的网站上检测 Adblock 然后显示横幅？

Question

If 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 searched the web for a while and have found nothing but the code below and it still isn't working. How could I show ads and if its blocked show a banner telling the users to turn it off?

Like this website: http://www.gamesbox.com/search-results/1802436/drunk-spiderman

<div class="myTestAd" style=" text-align:center;margin:10px">

    <iframe src="http://cdn1.adexprt.com/exo_na/sky1.html" width="120" height="600" frameborder="0" scrolling="no"></iframe>

</div>


<script type="text/javascript">

function TestPage() {
    if ($('.myTestAd').height() == 0)
        alert("You are blocking my beautiful adverts, you swine!");
}

$(TestPage);

</script>

Answer 1

Conveniently enough, ad blockers usually alter the CSS instead of the HTML. So, we can use JavaScript (preferably jQuery) to check if the CSS has been modified.

Here's an example in jQuery.

(function( $ ){
    $.fn.adblocked = function() {
        if($(this).css('display') == 'none' || $(this).css('height') == 0) { // etc
            return true;
        }
        return false;
    }; 
})( jQuery );

Usage:

if( $('#myImage').adblocked() ) {
    alert('wow');
}

Answer 2

First you need to give a chance for your ads to load. After some timeout (in my case 10s) query all your components that contain your ads (in my case elements have tag "my-horizontal-ad") and check if any has a height larger than 'not loaded' (my ads are horizontal). That height might differ due to your site's CSS (in my case not loaded horizontal ads have height 44px).

setTimeout(() => {
const myAds = document.querySelectorAll('my-horizontal-ad > div');
const areAdsAvailable = Array.from(myAds).some(ad => ad.clientHeight > 50);
console.log('areAdsAvailable',areAdsAvailable);
}, 10000);