Search code examples
htmladblock

How to make links that get blocked by adblock


I'd like to know how I can have a link to an external page that is not visible to adblock users.

I have tried many things including giving it a div id="ad", and iframes. Is there maybe something I have missed?


Solution

  • Here is a very simple example. I display the GoogleAdsense logo outside of the screen. If the image has no height it was blocked -> there is a AdBlocker

    <html>
    <head>
        <title>AdBlock Detector</title>
        <script type="text/javascript">
             //Is there a AdBlocker?
             function isAdBlocker(){
                 var a = document.getElementById("adTest");
                 return a.offsetHeight==0;
             }
    
             //Hide all Links tagged with 'add="true"'
             function protectLinks(){
                 if(isAdBlocker()){
                      var links = document.getElementsByTagName("a");
                      for(var i=0; i<links.length; i++)
                           if(links[i].getAttribute("ad"))
                                links[i].style.display="none";
                 }
             }
        </script>
    </head>
    
    <body onload="protectLinks()">
    
    You can't see this link with enabled AdBlocker
    <a ad="true" href="http://google.de">Link to Google</a>
    
    <img id="adTest" style="position:absolute; left:-5000px" src="https://www.google.com/images/logos/adsense_logo_sm.png">
    </body>
    </html>
    

    Insert the little Script and the "adTest" div in your Blog and give all links you want to protect a ad="true" attribute.

    (And don't forgett to call the protectLinks() function after page is loaded.)