Ohhh no AdBlocker, your revenue as a publisher is in danger! Your website is just getting so many pageviews and you don’t see any revenue in return. You decided to fight back with AdBlockers! Stay with MAN (MyAdviseNow) and we show you some techniques to fight back users with Adblock Plus.
What is the Effect of Adblocker on publisher?
Adblockers are extensions that can be installed on the user’s browser. These extensions can block advertisements on websites and help users to consume less data and load the pages faster. Though it helps the front users, it kills the revenue of publishers. Publishers mostly rely on the income of ads and if they don’t deliver any click or impression, they will not be paid. That’s why most publishers are searching for Scripts and Plugins to detect adblocker and notify Adblock users.
Ad blockers effect on advertising ecosystem and publishers revenue.
MAN
How to detect adblocker s and show them a custom message:
There are many ways to show a custom notification to website users. Webmasters who use WordPress as their CMS can easily install plugins. but they can do it with some proper scripts.
2 Best Free Anti-Adblock Plugins for WordPress:
If you are using WordPress you can easily install the plugins from the given links. (click on them, they navigate you to plugin homepage in WordPress.org.
I prefer AdBlocker Notify Lite as it has a dismissible option. This means the users will not be able to use your site if they don’t turn their AdBlock off or white list your domain address. DeAdblocker shows just a simple notification with a custom message which can be easily ignored by users. It cants hide your content from users who are using adblockers.
How to show a custom message to AdBlock users by scripts?
Well, it sounds better. The custom script will not slowdown your webpage.
Creating a custom notification for AdBlock users and ask them to turn off their adblocker with the close button:
This type of notification doesn’t affect your users much. They easily close and dismiss the message. It cants force them to turn-off the adblocker or white list your domain. It simply shows your custom message to visitors who use adblocker.
Step one:
Copy the below code and save it as adframe.js
var adblock = false;than upload it to your root folder of your host. (by using WebFTP or FileZilla.)
Step two:
Copy the below code and add it to your header section of your site. Between <header></header>.
<script type="text/javascript">
var adblock = true;
</script>
<script type="text/javascript" src="adframe.js"></script>
<script type="text/javascript">
if(adblock)
{
alert("You should disable your adblock");
document.getElementById("wrapper").style.display="none";
}
</script>You can change the alert message by changing ” You should disable your AdBlock “. just change the text in the quotation mark. It will show your custom message to users with adblockers.
Creating a custom notification for AdBlock users and FORCE them to turn off their adblocker WITHOUT the close button:
It is painful when you visit a website and it forces you to turn off or whitelist their domain address from adblocker settings. But we should respect the publisher’s choice. The user will decide to leave your site or change the adblocker settings. This type of notification hides your content for users using adblockers.
Step one:
Add the below script to your header.php between <header></header>.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Style for sample Disable Adblock Notify Message. Remove if not using */
#blockedmessagewrapper{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: flex;
z-index: 100000;
visibility: hidden;
align-items: center;
justify-content: center;
-webkit-perspective: 1000px;
perspective: 1000px;
}
#blockedmessagewrapper:after{
content: '';
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
background: rgba(0,0,0,.7);
}
#blockedmessageinner{
width: 90%; /* width and max width settings */
max-width: 450px;
padding: 20px;
z-index: 100000;
overflow: hidden;
background: white;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}
#blockedmessageinner .title{
text-transform: uppercase;
color: #E20000;
font-size: 2em;
margin-bottom: 6px;
display: block;
}
#blockedmessageinner > div{
border-left: 6px solid #E20000;
padding-left: 10px;
line-height: 2;
}
#blockedmessageinner #dismissmsg2{
float: right;
margin-top: 15px;
margin-right: 5px;
cursor: pointer;
text-transform: uppercase;
color: #E20000;
background: #eee;
border-radius: 8px;
padding: 3px 5px;
box-shadow: 0 0 3px gray;
font-size: 14px;
}
#blockedmessagewrapper.showmsg{
visibility: visible;
}
#blockedmessagewrapper.showmsg #blockedmessageinner{
-webkit-animation: swing forwards 2s;
-moz-animation: swing forwards 2s;
animation: swing forwards 2s;
}
@-webkit-keyframes swing{
0%{-webkit-transform:rotate(0deg);}
20%{-webkit-transform:rotate(-15deg)}
40%{-webkit-transform:rotate(10deg)}
60%{-webkit-transform:rotate(-7deg)}
80%{-webkit-transform:rotate(5deg)}
100%{-webkit-transform:rotate(0deg)}
}
@keyframes swing{
0%{transform:rotate(0deg)}
20%{transform:rotate(-15deg)}
40%{transform:rotate(10deg)}
60%{transform:rotate(-7deg)}
80%{transform:rotate(5deg)}
100%{transform:rotate(0deg)}
}
</style>
<script>
;(function(){
// Dynamic Drive Adblock Checker and Notifier Script v 1.0: http://www.dynamicdrive.com/
var debug = false // set debug to true to always invoke adblockaction() and add class of adblocked to root element regardless of whether Adblock is enabled, for ease of styling and debugging. Set to false on production page
// Main Adblock Detect function
// When Ad Blocker detected
// Adds "adblocked" CSS class to HTML root element
// Calls function adblockaction()
var targetclass = 'adsbox' // CSS class that should trigger most ad blockers when found
document.addEventListener('DOMContentLoaded', function(){
var testunit = document.createElement('div');
testunit.innerHTML = ' ';
testunit.className = targetclass;
document.body.appendChild(testunit);
setTimeout(function() {
if (testunit.offsetHeight === 0 || debug) {
if (typeof adblockaction == 'function'){
adblockaction()
}
document.documentElement.classList.add('adblocked');
}
testunit.remove();
}, 400);
})
// adblockaction function that gets called when Adblock is enabled:
function adblockaction(){
var msg = document.getElementById('blockedmessagewrapper');
var dismiss = document.getElementById('dismissmsg2');
msg.classList.add('showmsg');
dismiss.addEventListener('click', function(){
msg.classList.remove('showmsg');
document.documentElement.classList.remove('adblocked');
})
}
})();
</script>
</head>
<body>
<!-- Add the below outside any tag other than the BODY -->
<div id="blockedmessagewrapper">
<div id="blockedmessageinner">
<b class="title">Oh nooo, You use Adblocker!</b>
<div>
Your Adblocker is active! <b>AdBlocker</b> And it is preventing us to show you our content.
</div>
</div>
</div>
</html>You can also add a dismiss (close) button to it by adding the below code to script:
<b id="dismissmsg2">Dismiss (Remove On Production)</b>After adding the code the script will look like below:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Style for sample Disable Adblock Notify Message. Remove if not using */
html.adblocked body:after {
content: '';
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 99999;
background: rgba(0,0,0,.7);
}
#blockedmessage{
bottom: 0;
left: 0;
position: fixed;
width: 100%;
padding: 10px;
border: none;
font-size: 1em;
background: #FFE2E2;
font-family: Georgia;
z-index: 100000;
line-height: 1.5;
border: 1px solid #eee;
border-top: 8px solid darkred;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
visibility: hidden; /* By default, hide this message from non ad blocking users. Use visibility instead of display so the message can be animated into view using CSS3 */
-webkit-transform: translate3d(0px, 110%, 0px);
transform: translate3d(0px, 110%, 0px);
-webkit-transition: transform .5s, visibility 0s .5s;
transition: transform .5s, visibility 0s .5s;
}
#blockedmessage .title{
text-transform: uppercase;
color: #E20000;
font-size: 1.1em;
margin-bottom: 6px;
display: block;
}
#blockedmessage > div{
border-left: 6px solid #E20000;
padding-left: 10px;
}
#blockedmessage #dismissmsg{
float: right;
margin-top: 5px;
margin-right: 5px;
cursor: pointer;
text-transform: uppercase;
color: #E20000;
background: #eee;
border-radius: 8px;
padding: 3px 5px;
box-shadow: 0 0 3px gray;
font-size: 14px;
}
#blockedmessage.showmsg{
visibility: visible; /* Use visibility instead of display so the message can be animated into view using CSS3 */
-webkit-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
-webkit-transition: transform .5s;
transition: transform .5s;
}
</style>
<script>
;(function(){
// Dynamic Drive Adblock Checker and Notifier Script v 1.0: http://www.dynamicdrive.com/
var debug = false // set debug to true to always invoke adblockaction() and add class of adblocked to root element regardless of whether Adblock is enabled, for ease of styling and debugging. Set to false on production page
// Main Adblock Detect function
// When Ad Blocker detected
// Adds "adblocked" CSS class to HTML root element
// Calls function adblockaction()
var targetclass = 'adsbox' // CSS class that should trigger most ad blockers when found
document.addEventListener('DOMContentLoaded', function(){
var testunit = document.createElement('div');
testunit.innerHTML = ' ';
testunit.className = targetclass;
document.body.appendChild(testunit);
setTimeout(function() {
if (testunit.offsetHeight === 0 || debug) {
if (typeof adblockaction == 'function'){
adblockaction()
}
document.documentElement.classList.add('adblocked');
}
testunit.remove();
}, 400);
})
// adblockaction function that gets called when Adblock is enabled:
function adblockaction(){
var msg = document.getElementById('blockedmessage');
var dismiss = document.getElementById('dismissmsg');
msg.classList.add('showmsg');
dismiss.addEventListener('click', function(){
msg.classList.remove('showmsg');
document.documentElement.classList.remove('adblocked');
})
}
})();
</script>
</head>
<body>
<!-- Add the below outside any tag other than the BODY -->
<div id="blockedmessage">
<b class="title">Oh oh, Ad Block Alert!</b>
<div>
It looks like you've enabled <b>Ad Blocking</b> on our site. Please enable ads on this site to continue, as Dynamic Drive relies solely on ads to keep producing and offering free content to you.
<b id="dismissmsg">Dismiss (Close)</b>
</div>
</div>
</html>source of codes: dynamicdrive
Conclusion:
Revenue from ads is very important to most website owners. They create content to earn money. Adblockers are just decreasing the amount of publishers’ revenue. The mentioned techniques will help you to fight back with adblockers. If you know any other method, please make me happy and share it with me.