Display alternate content when Adblock is in use

[pinguy]

Not sure if this guide fits here or not. If it doesn't just delete it.

More and more users are starting to use Adblockers.

Adblockers are great for sites that use lots of popups and have videos playing when you load a page, but most sites don't use obtrusive ads and you should whitelist these.

Many sites depend on ad revenue to stay afloat. The issue is most users that use Adblocker just enable it and never add any sites to the whitelistings.

For website publisher's there are a few options. You can detect Adblock on the visitor’s computer and hide your content if the ads are being blocked (that’s going too far if you ask me), or you could display alternate content reminding users who are blocking the ads to add your site to the whitelistings.

To display alternative content we can use a bit of JavaScript.

If you haven't done this already, make sure you are using async ads.

Here is an example of a responsive leaderboard/horizontal async ad unit.

Code:

<!-- Begin: google -->
<style type="text/css">
.adslot_1 {
width: 320px;
height: 50px;
}
@media (min-width:500px) {
.adslot_1 {
width: 468px;
height: 60px;
}
}
@media (min-width:800px) {
.adslot_1 {
width: 728px;
height: 90px;
}
}
</style>
<ins class="adsbygoogle adslot_1" style="display:inline-block;" data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot="yyyyyyyyyy"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
<!-- End: google -->

Here is an example of a box/rectangle async ad unit.

Code:

<!-- Begin: google -->
<style type="text/css">
.adslot_2 {
width: 125px;
height: 125px;
}
@media (min-width:500px) {
.adslot_2 {
width: 180px;
height: 150px;
}
}
@media (min-width:800px) {
.adslot_2 {
width: 200px;
height: 200px;
}
}
@media (min-width:1440px) {
.adslot_2 {
width: 250px;
height: 250px;
}
}
</style>
<ins class="adsbygoogle adslot_2" style="display:inline-block;" data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot="yyyyyyyyyy"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
<!-- End: google -->

Once you have done that make sure jQuery is in use on your site.
http://www.w3schools.com/jquery/jquery_get_started.asp

Next download theses images (or create your own) and place them in the root of your website.


  adblock.zip (Size: 41.3 KB / Downloads: 3)

Here is an example of what it will look like:

   

Or you could use these banners instead.


  adblock2.zip (Size: 41.26 KB / Downloads: 5)

Example:

   

Now place this code into the footer of your site (I have also added support for CloudFlare to the code).

Code:

<script data-cfasync="false" async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script data-cfasync="false" language="javascript">
window.onload = function() {
    setTimeout(function() {
var ad = document.querySelector("ins.adsbygoogle");
if (ad && ad.innerHTML.replace(/\s/g, "").length == 0) {

jQuery(".adsbygoogle").each(function() {

if (jQuery(this).width() == '728') {
jQuery(this).after('<a href="//www.google.com/contributor/welcome/?utm_source=publisher&utm_medium=BADGE&utm_campaign=ca-pub-xxxxxxxxxxxxxxxx" target="_blank"><img src="adblock.png" alt="This website is funded by ads and donations." width="728" height="90" style="width:728px;height:90px;"/></a>');
}

if (jQuery(this).width() == '468') {
jQuery(this).after('<a href="//www.google.com/contributor/welcome/?utm_source=publisher&utm_medium=BADGE&utm_campaign=ca-pub-xxxxxxxxxxxxxxxx" target="_blank"><img src="adblock2.png" alt="This website is funded by ads and donations." width="468" height="60" style="width:468px;height:60px;"/></a>');
}

if (jQuery(this).width() == '320') {
jQuery(this).after('<a href="//www.google.com/contributor/welcome/?utm_source=publisher&utm_medium=BADGE&utm_campaign=ca-pub-xxxxxxxxxxxxxxxx" target="_blank"><img src="adblock3.png" alt="This website is funded by ads and donations." width="320" height="50" style="width:320px;height:50px;"/></a>');
}

});
}
    }, 500);
};
</script>

What this will do is display the Google Contributor banner in place of the ads when the script detects that the ads are being blocked.

Demo: http://forum.pinguyos.com/Thread-How-to-...-is-in-use
Load the page with and without Adblocker enabled to see the differences.

---

To use text instead of an image you will need to add:

Code:

ad.style.cssText = 'display:block !important';

Here is an example.

Code:

<script>
// this line executes the entire code once page is loaded
window.onload = function(){

setTimeout(function() {

// here we are searching for first adsense code available on page
var ad = document.querySelector("ins.adsbygoogle");

// If ad contains no innerHTML, adblocker is working
if (ad && ad.innerHTML.replace(/\s/g, "").length == 0) {

ad.style.cssText = 'display:block !important';

// here you can put any html code to show as alternative
jQuery(".adsbygoogle").after('Your html alternative content here');

}
}, 1000);
};
</script>

[Me.B]

Not bad

[TGates]

I use something similar in all my projects that I build.
Sites with Adblock checking: (Enable/Disable your adblocker as needed to view header notice.)
http://www.mach-hosting.com/
http://www.supersimplecms.tk/
http://translate.supersimplecms.tk/

adblock_detector.css:

Code:

/* AdBlock Check */

#tester

{
    display: none;
    color: #ffffff;
}

#blocker_alert

{
    text-align: center;
    color: #F00;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    background-color: #FF0;
}

#blocker_ok

{
    text-align: center;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    background-color: #093;
}

adblock_detector.js:

Code:

document.write('<div id="tester">test advertisement</div>');

index.php:

Code:

<!-- [START] - adblock check -->
<script type="text/javascript" src="assets/adblock_detector.js"></script>
<script type="text/javascript">
    if (document.getElementById("tester") != undefined) {
        //document.write('<div id="blocker_ok">No <strong>AdBlocker</strong> detected! Thanks for truly supporting our site!</div>');
        } else {
        document.write('<div id="blocker_alert">We have detected that you have an ad blocker enabled! Please disable it and help support our work!</div>');
    }
</script>
<!-- [END] - adblock check -->

You can easily customize it to use different text or other banners or images.