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>
<style type="text/css">
YOUR CSS CODE
</style>
<script type="text/javascript">
//<![CDATA[
YOUR JAVASCRIPT CODE
//]]>
</script>
Post a Comment