TechVigil Logo

Display Image/Video in Place of AdBlock Censored Ads

uncategorized

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.

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.
Sandeep Kumar

Sandeep Kumar

Founder & Editor-in-Chief | Software Architecture & System Design

About Sandeep →

Electronics engineer and tech enthusiast specializing in software architecture, system design, and building scalable tech solutions. Passionate about sharing real-world engineering experiences, practical lessons, and tech insights.