Advertisements are very important for any post published in internet. This is what decides the person’s revenue. But, recently adblocker system is killing revenue of the publisher because of which it also effects the creativity of that person. Today, I am providing a simple new solution for those depressed and effected persons of adblocking system. Here is a simple javascript to be included along with your website code to either hide the content of your website or show a pop-up or alert message to remove the viewers adblock plugin. Any blogger or any website management can use this code to improve your revenue of your website. This code is mainly designed for Google Adsense.
Download Script 
Live DemoGoogle Adsense
You have to include onerror event to the script tag, this will trigger adBlockFunction() Javascript function.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" onerror="adBlockFunction();"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:600px"
data-ad-client="ca-pub-XXXXXXXXXXXXX"
data-ad-slot="XXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:600px"
data-ad-client="ca-pub-XXXXXXXXXXXXX"
data-ad-slot="XXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Ad Blocker Function
This contains very simple JavaScript code, this will replace article content part with ad blocker message. If you are Google Blogger user don't change the class name post-body-n. This function helps you to track ad blocker usesr count with Google Analytics.
<script>
function adBlockFunction()
{
// Google Analytics Tracking
setTimeout(function() {
ga('send', 'event', 'Blocker', 'click','Blocker');
},2000);
// Google Analytics End
// Website Users
document.getElementById('contentDivName').innerHTML = 'Please disable your ad blocker for yourwebitename.com';
// Google Blogger Users
document.getElementsByClassName('post-body-n')[0].innerHTML = 'Please disable your ad blocker for yourwebitename.com';
}
</script>
function adBlockFunction()
{
// Google Analytics Tracking
setTimeout(function() {
ga('send', 'event', 'Blocker', 'click','Blocker');
},2000);
// Google Analytics End
// Website Users
document.getElementById('contentDivName').innerHTML = 'Please disable your ad blocker for yourwebitename.com';
// Google Blogger Users
document.getElementsByClassName('post-body-n')[0].innerHTML = 'Please disable your ad blocker for yourwebitename.com';
}
</script>
Google Analytics Result
For more information read this article Google Analytics Custom Dashboards for Websites
Sample Website HTML Code
//HTML Code
<div id="container">
<div id="contentDivName">
Article Content Part // This will replace with ad blocker message
</div>
<div id="sidebar">
Google Adsense Code
</div>
</div>
<div id="container">
<div id="contentDivName">
Article Content Part // This will replace with ad blocker message
</div>
<div id="sidebar">
Google Adsense Code
</div>
</div>
Ad Blocker Function for Alert Bar like 9lessons.info
<script>
function adBlockFunction()
{
// Google Analytics Tracking
setTimeout(function() {
ga('send', 'event', 'Blocker', 'click','Blocker');
},2000);
// Google Analytics End
document.getElementById('ab-message').style.display = 'block';
}
</script>
function adBlockFunction()
{
// Google Analytics Tracking
setTimeout(function() {
ga('send', 'event', 'Blocker', 'click','Blocker');
},2000);
// Google Analytics End
document.getElementById('ab-message').style.display = 'block';
}
</script>
HTML Code
Include the ad-message div tag after the tag <body>
<style>
#ad-message{
text-align: center;
background-color: #E23C3C; color: #ffffff;
font-weight: bold; font-family: Arial;
border-bottom: solid 1px #333333;
}
</style>
//HTML Code
<body>
<div id='ad-message' style='display: none;'>
Please disable your ad blocker for yourwebitename.com
</div>
.....
.....
#ad-message{
text-align: center;
background-color: #E23C3C; color: #ffffff;
font-weight: bold; font-family: Arial;
border-bottom: solid 1px #333333;
}
</style>
//HTML Code
<body>
<div id='ad-message' style='display: none;'>
Please disable your ad blocker for yourwebitename.com
</div>
.....
.....
Awesome, thank you so much!
ReplyDeletecan be easily defeated by this rule.
ReplyDelete@@||pagead2.googlesyndication.com/pagead/js/adsbygoogle.js$domain=
your solution needs to be smarter.
Can anyone tell me how to get auto get location in ecommerce, once its askes select the city, then based on city have to show the products in that city in their website?
ReplyDeletehi SRINIVAS ... it's not work properly ... i see "Thank you for not using Ad Blocker" as i already turn it on !
ReplyDeletenotes :
in article there is some miss typo ..
interent >> internet
Today, am >> Today , I am
have a nice day bro
Thanks, turn it on and refresh the page.
DeleteFor Wordpress users :-) Responsive Adblock Notification Message Bar for Wordpress version - https://github.com/mskian/Responsive-Adblock-Notification-Message-Bar-for-Wordress thanks to 9lessons.info
ReplyDeleteI am not so familiar with javascript, i added whole codes into my template but it doesn't work. Where should I add them, in head section or in body section?
ReplyDeleteThis is quite the best information you have. I took advantage of it.
ReplyDeletehi, how you use ad block notification tab that is shown on top bar can you share the code with us. and if this top bar would be sticky it would be great.
ReplyDeleteThanks in advance...