如何检测和停止广告屏蔽程序

本教程解释了如何检测你的读者是否正在使用广告屏蔽软件。广告屏蔽软件（和扩展）是用来停止在网站上显示恼人的广告。它为没有广告的读者创造了用户友好的体验，但却造成了很大一部分收入损失。由于使用广告屏蔽软件，出版商的收入损失接近其收入的15-25%。根据Adobe公司进行的研究，广告拦截在网络广告中造成的损失估计约为220亿美元。

市场上有许多广告屏蔽软件。流行的有AdBlock Plus、AdBlock、AdGuard、Stands Fair Adblocker等。为了检测它们，我们需要有一个通用的解决方案，它不应该是特定的广告拦截软件或扩展，而且应该在用户使用的浏览器上工作。下面的解决方案是一个基于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>

如果你使用的是blogger或其他博客平台，你可以将上述CSS和Javascript代码包在标签中，如下所示。

> <style type="text/css">  
> 你的CSS代码</style>  
> 。

> <script type="text/javascript  
> "> //<！\[CDATA\[  
> YOUR JAVASCRIPT CODE  
> //\]  
> \]> </script>  
>   
>   
>