Friday, August 30, 2013

Adblocking and the free web

Recently I was made aware of HeidiSQL, and besides being an awesome program, it had an even awesomer way to tackle adblockers. With your adblocker off, you see ads, with your adblocker on, it displays a message explaining how free things are powered by ads. I loved it, and asked the creator to tell me how, here's my version of his code.

  1. Find the DOM id of your ad, for me, that was 'aswift_0'
  2. insert a div before the ad
       <div id = "senseReplace" style="width:728px;" top="50%"> </div>  
  3. I also put a div around the ad that I resize to make space for the replacement message.
  4. Ad the following javascript (to your head):
     <script type="text/javascript">  
     <!--  
       function sensePage() {  
         if (!document.getElementById('aswift_0')) {  
           s = '<center><p class="senseText" style="border: 1px solid red; background: #cf9; padding: 1em; margin: 0; text-align:left; font-style:italic;">'+  
           'Adblocker activated? No problem. But please note that <b>pente.org</b> balances its '+  
           'expenses with ads. Perhaps you can consider making an exception for this site <b>or</b> <a href="/gameServer/donations">donate</a> instead?'+ '</p>'+ '</center>';   
           document.getElementById('senseReplace').innerHTML = s;  
           document.getElementById('bannerAd').setAttribute("style","width:1px; height:1px;");  
           document.getElementById('senseReplace').setAttribute("style","width:728px;");  
         } else {  
           document.getElementById('senseReplace').setAttribute("style","width:1px; height:1px;");  
           document.getElementById('bannerAd').setAttribute("style","width:728px; height:90px;");  
         }  
       }  
     //-->  
     </script>  
  5. I call my javascript function after the ad placement, but was told to call it with the  "window.onload" or "body.onload" event
Happy coding!