This tutorial explains how you can detect if ad blocker is being used by your reader. Ad Blocking softwares (and extensions) are used to stop showing annoying ads in the websites. It creates user-friendly experience to readers without ads but causes a significant proportion of revenue loss. The revenue loss to publishers due to use of ad blocking software is close to 15-25% of their earning. According to research carried out by Adobe, ad blocking was responsible for an estimated loss of around $22 billion in online advertising.
There are many ad blockers in the market. Popular ones are AdBlock Plus, AdBlock, AdGuard, Stands Fair Adblocker etc. To detect them we need to have a generic solution which should not be specific to a particular ad blocking software or extension and should work irrespective of the browser user is using. The solution below is a Javascript based method to find out whether ad blocker is enabled at user end.
Once detected the following program gives user a message to turnoff ad blocker. Refer the snapshot of alert message below.
Javascript
window.onload = function() {
setTimeout(function() {
var ad = document.querySelector(“ins.adsbygoogle”);
var modal = document.getElementById(“myModal”);
if (ad && ad.innerHTML.replace(/s/g, “”).length == 0) {
modal.style.display = “block”;
}
}, 2000);
};
CSS
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 200px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
.modal-header {
padding: 12px 16px;
background-color: #f55656;
color: white !important;
font-size: 18px;
}
.modal-body {padding: 2px 16px; font-size: 16px;}
HTML
<div class=”modal” id=”myModal”>
<div class=”modal-content”>
<div class=”modal-header”>
It looks like you are using an ad blocker!
</div>
<div class=”modal-body”>
<p>To continue reading you need to turnoff adblocker and refresh the page</p>
</div>
</div>
</div>
If you are using blogger or any other blogging platform you can wrap the above CSS and Javascript code in the tags like below. <style type=”text/css”>
YOUR CSS CODE
</style> <script type=”text/javascript”>
//<![CDATA[
YOUR JAVASCRIPT CODE
//]]>
</script> Read MoreListenData
