Tuesday, September 28, 2021
No menu items!
HomeData Analytics and VisualizationHow to detect and stop Ad Blocker

How to detect and stop Ad Blocker

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

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments