Alert AdBlock users about adblock extension
#6
(2015-11-19, 09:55 AM)pinguy Wrote: 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
Reply


Messages In This Thread
RE: Alert AdBlock users about adblock extension - by dmilasin - 2017-02-18, 07:10 PM

Forum Jump:


Users browsing this thread: 1 Guest(s)