This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm whether you accept or reject these cookies being set.

A cookie will be stored in your browser regardless of choice to prevent you being asked this question again. You will be able to change your cookie settings at any time using the link in the footer.

Display alternate content when Adblock is in use
#1
Display alternate content when Adblock is in use
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.


.zip   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.


.zip   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>
Reply
Thanks given by: Me.B , Castey , TGates
#2
RE: Display alternate content when Adblock is in use
Not bad
No support using PM (Auto adding to IGNORE list!), use the forum. 
How to ask
Freelance AWS Certified Architect & SysOps// DevOps

10$ free to start your VPS
Reply
Thanks given by:
#3
RE: Display alternate content when Adblock is in use
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. Wink
-TGates - Project Council

SEARCH the Forums or read the DOCUMENTATION before posting!
Support Sentora and Donate: HERE

Find my support or modules useful? Donate to TGates HERE
Developers and code testers needed!
Contact TGates for more information
Reply
Thanks given by: pinguy


Forum Jump:


Users browsing this thread: 1 Guest(s)