How to Defeat Ad Blockers by Substituting Affiliate Links

While everyone hates sites bristling with ads and popups, ad blockers are causing legitimate web content creators to suffer more and more lost income each day.

Many of the traditional tactics to defeat adblockers, including putting up a paywall, hiding the site content until blockers are turned off, or just begging people to turn off blockers, have been proven to be pretty ineffective in most cases.

In this article, I’ll describe a way to detect ad blockers and replace Google Adsense ads with your affiliate links.

The Basis

Back in 2014, Amit Agarwal wrote about a way to detect ad blockers and if present, to display alternate content for the blocked Adsense ads on his Digital Inspiration blog.

I modified Amit’s code to work with more ad blockers and made some discoveries about image file naming that will help your affiliate ads show up against more blockers. In the end, it now works for most ad blockers I tried, but not all.

Please note that this method does not restore your Adsense ads in the presence of ad blockers. Instead, it allows to you serve alternate ads or affiliate links. Static affiliate ads may not have the same click-through rate as dynamic ads. However, you could customize the code to serve up different ads for different pages; the possibilities are only limited by your imagination.

I like the fact that, unlike other attempted solutions to defeat ad blockers, this method is completely automatic and transparent to the user, with no demanding, asking, or begging that blockers be disabled required.

I use Google Adsense, so my examples will utilize that. However, the concepts are applicable to other ad networks.

Which Ad Blockers I Tested

I tested these techniques with Adblock, Adblock Plus, uBlock Origin, and Avast Online Security & Privacy with “Prevent tracking on all websites” set to “On”, which effectively blocks website ads.

Interestingly, uBlock Origin proved to be the toughest to detect and defeat, with only partial success there.

Ad Blocker Detection

Amit’s original code detects ads by checking if any content has been added to the Adsense “adsbygoogle ” container as follows:

var ad = document.querySelector("ins.adsbygoogle");

if (ad && ad.innerHTML.replace(/\s/g, "").length == 0)...

If the container is empty two seconds after the page is fully loaded, it means an ad blocker is at work.

I found that this didn’t work with uBlock Origin because that leaves some content inside of the “adsbygoogle” container. However, if you look for “display:none” on the ad, you can detect uBlock Origin. Here’s the new detection code:

var top_ad = document.querySelector(".top-box");


if (ad && ( ad.innerHTML.replace(/\s/g, "").length == 0 || window.getComputedStyle(ad).display == "none") )...

This method successfully detects the presence of the four ad blockers I tested!

Inserting Your Affiliate Ads

After an ad blocker is detected, the next step is to insert your own ad into the ad container. To do this, wrap your Adsense code in a div with an ID or class. Here’s a sample of my ad code wrapped in a div with class “top-box”:

<div class="top-box">
<!-- YOUR AD CODE HERE -->
</div>

Obviously, you should substitute your own Adsense code into this example. And, don’t use CSS class names that sound like ads, like “google-ad”, because they will be blocked with “display:none;” by ad blockers.

The Final Code

Once your ad slots are wrapped, you’ll need to add the JavaScript code to detect the ad blockers and swap in your affiliate ad content. Here’s the completed code to do that:

<script>

  // Run after all the page elements have loaded
  window.onload = function(){

    // This will take care of asynchronous Google ads
    setTimeout(function() {

      // Find the ad container
      var top_ad = document.querySelector(".top-box");
      var ad = top_ad.querySelector("ins.adsbygoogle");

      // If the ad contains no innerHTML, ad blockers are at work
      if (ad && ( ad.innerHTML.replace(/\s/g, "").length == 0 || window.getComputedStyle(ad).display == "none") ) {

        // You can put any text, image or even IFRAME tags here
        top_ad.innerHTML = '<!-- YOUR ALTERNATE AD CODE HERE -->';

      }

    }, 2000);

  };

</script>

This code runs after the page is fully loaded, then waits two more seconds for any Google ads to load. Then, it tests the ad container to see if it was blocked. If so, it swaps in your ad content into the container. Obviously, insert your own ad content into this code. And, add the appropriate CSS to center your ads and carve out a min-height so there is no cumulative layout shift (CLS) when your ad appears.

If you are using WordPress, you use an action hook to add the code to your site’s footer. Here’s the code to add to your child theme’s functions.php file (insert the code from above where indicated):

// ==================================================================
// ADD CODE TO END OF BODY

// ==================================================================
function add_body_content() {
    ?>
    <script>
    // INSERT PREVIOUS JS CODE HERE
    </script>
<?php
}
add_action('wp_footer', 'add_body_content');

Defeating Image Blocking

After you swap in your affiliate ad code snippet and test it with an ad blocker, you may find that your affiliate ad image doesn’t show up because the ad blocker is still blocking it. I found the best way to get around this problem is to upload the affiliate ad image to your server and serve it from there instead.

If your ad image still isn’t showing up, take a look at the ad image filename. I had one image that was being blocked which contained the string “300×250” in the filename. As soon as I removed that part of the filename, it showed up. So, make sure your ad image filename doesn’t contain any common ad strings.

Testing

Remember to test on a variety of ad blockers. Test both for the appearance of the ad image, and test that the link works when clicked. And whatever you do, remember also to test without any ad blockers. It would be terrible if there was a bug and you overwrote legitimate Adsense ads!

The Results

With these tweaks, I had my ads appearing with each of the four ad blockers that I tested on my Chrome browser. The only problem was that with uBlock Origin, most of my ad links were redirected to uBlock’s intermediate page, which looks like this:

I wasn’t able to get around this, even by using a URL shortnener or redirect page. It seems that, true to its name, uBlock Origin blocks these URLs completely, even if you type it into the browser bar!

The link to one of my ads did work; I assume its URL just hasn’t been added to uBlock’s blacklist yet.

I’m not sure if there is a solution to this problem other than for the affiliates to keep changing URLs. But, on the bright side, I got affiliate links completely working on the other three ad blockers that I tested!

But of course, you don’t need to add affiliate links! You could add a custom ad, donation request form, or any other content you want!

The Battlefield is Constantly Changing

Keep in mind that these solutions worked for me when I wrote this article, but the war against ad blockers is ongoing and continually evolving, with each side constantly trying to outsmart the other. So these solutions may need tweaking by the time you read this.

Did this work for you? Please leave a comment or question below! – Brian