Alert AdBlock users about adblock extension

[dthiago]

Alert to Adblock Users to deactivate extension.
YOu can insert this code on your HEADERINCLUDE --> load every page or on your HEADER / HEADER_GUEST...or INDEX --> Only main page

I'm not a programmer, I just gathered a few pieces around

<div class="YOUR_CLASS">Alerts!&nbsp;</div> // - You can remove this
<script>
(function() {
    var message = "Your Message to AdBlock Users!";
    var tryMessage = function() {
            setTimeout(function() {
                if(!document.getElementsByClassName) return;
                var ads = document.getElementsByClassName('YOUR_CLASS'),
                    ad  = ads[ads.length - 1];
  if(!ad
                    || ad.innerHTML.length == 0
                    || ad.clientHeight === 0) {
                    alert(message);
                 //window.location.href = 'http://comunidade.bf4brasil.com.br/member.php?action=register'; "//"  Redirect users to where you want - You need to remove "//"
                } else {
                    ad.style.display = 'none';
                }

            }, 1800);
        }
        if(window.addEventListener) {
            window.addEventListener('load', tryMessage, false);
        } else {
            window.attachEvent('onload', tryMessage);
        }
})();
</script>

[fma965]

Thanks, i do this a different way.

[Claraviolet]

How do you select certain usergroups to bypass these alerts...like V.I.P members?

[ReYoN]

This user has been denied support.

Using php template conditional would be great way of doing it.

[pinguy]

I do this a bit differently.

Here is how I do it.

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.

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

<!-- 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 -->

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


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

Here is an example of what it will look like:

   

Or you could use these banners instead.


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

Example:

   

Now place this code into the footer template (I have also added support for CloudFlare to the 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="images/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="images/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="images/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:

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

Here is an example.

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

[dmilasin]

I do this a bit differently.

Here is how I do it.

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.

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

<!-- 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 -->

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



Here is an example of what it will look like:



Or you could use these banners instead.



Example:



Now place this code into the footer template (I have also added support for CloudFlare to the 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="images/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="images/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="images/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:

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

Here is an example.

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

Where you place all that code

---

nvm i got it

[skrilaxrev]

I do this a bit differently.

Here is how I do it.

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.

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

<!-- 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 -->

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



Here is an example of what it will look like:



Or you could use these banners instead.



Example:



Now place this code into the footer template (I have also added support for CloudFlare to the 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="images/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="images/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="images/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:

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

Here is an example.

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

Thank you for this code!

How can I get query for width AND height like this:

if (jQuery(this).width() == '300' AND height() == '600') {

[DevLife]

What is the code or Php code to exclude VIP members? let's say Ad block detected if you don't want this ad please become our premium member once they are Premium they won't see this message or ads