Adblock Detection - Good Use Case

I added adblock detection to index page of this website. If a visitor does not have an adblock installed the following message shows up:

⚠ Your browser is not using an ad blocker!
This makes your browser slower and hurts your privacy. For the best web
experience, you should install an adblocker.

The glorious Web is Fucked article was an impulse to implement this feature. At first I wanted to use adblockbar but I found a simpler solution.

Implementation

I found some information how to detect adblocker on detectadblock.com. Not sure if my use case was author’s intention 🤣.

I created doubleserve.js bait file that creates hidden div if loaded.

var e=document.createElement('div');
e.id='WwdqGQlxDMSy';
e.style.display='none';
document.body.appendChild(e);

This js file is linked at the end of body of index template:

<script src="/doubleserve.js" type="text/javascript"></script>

In the index template I added the banner:

<div id="warn" class="adblock">
    <h2>⚠ Your browser is not using an ad blocker!</h2>
    <p>This makes your browser slower and hurts your privacy. For the best web experience, you should <a href="https://ublockorigin.com/">install an adblocker</a></p>
</div>

It’s hidden by default:

.adblock {
    display: none;
}

Last piece of the puzzle is JS snippet that checks if div from doubleserve.js is present in the DOM. If so then it switches display of the banner.

<script src="/doubleserve.js" type="text/javascript"></script>
<script type="text/javascript">
if(document.getElementById('WwdqGQlxDMSy')){
  document.getElementById("warn").setAttribute("style","display:block");
}
</script>

Pros and cons

• Cons
  • uBlock will show blocked elements on index page, the visitor might think I use tracking

    Blocked on this page: 1 (6%)

  • JS was required 🤢
• Pros
  • it feels like right thing to do
  • learned how basic adblock detection works
  • promote uBlock Origin - the best adblock plugin currently available

Temporarily disabled because it stopped working for me 😥.