Many of your site visitors would be using AdBlock, the popular advertisement blocker plug-in for browsers. It helps them to stay away from annoying ads and banners.
On the other hand, it is definitely undesirable for webmasters. If you are using some advertisement network like Google AdSense or BuySellAds, you will be loosing the revenue if ads are not shown.
There is a little workaround for this problem. Though you can’t display ads if they are censored by AdBlock, but you can place some other alternate contents to attract visitors.
How AdBlock Works?
Once a web page is loaded, AdBlock compares all the page elements with their own stored ad element patterns. Once it matches, they modify the DOM content to hide the banners.
How to Place Alternate Content
Place this JavaScript code before the the </body> tag closes. The code calls a function showAdblockImage() 3 seconds after the page get loaded. The function in-turn, finds all the AdSense elements on the page and modify their inner content if those are blocked by ad blocker.
<script>
window.onload = function(){
setTimeout(showAdblockImage, 3000);
};
function showAdblockImage(){
//get all google ad elements
var adsList = document.querySelectorAll("ins.adsbygoogle");
if(!adsList){ return;}
for(var i=0; i<adsList.length;i++){
if(adsList[i].innerHTML.replace(/\s/g, "").length != 0){
//AdBlock is not active, hence exit
break;
}
//apply inline css to force display
adsList[i].style.cssText = 'display:block !important';
//modify html content of element
adsList[i].innerHTML='<img src="imageurl/img_1.jpg" />';
}
}
</script>
Modifying the Code
Customize the code to suite your needs :
- In line number 7, you can modify the selector to match your advertisement network.
- Content to be placed can be modified in line no 17. You may place YouTube videos, FB Like box or Twitter widget in that place.