使用广告拦截器为用户显示替代内容

Question

我正在从事一个广告资助的项目。确实是一些微妙和内容意识的东西，而不是用于生殖器增大等的蹩脚弹出窗口。

由于该项目是由广告资助的，因此拥有广告拦截器的人不会使该项目受益，（因为他们显然不知道该特定网站上的广告并没有那么糟糕）。

如何为使用广告拦截器的用户显示替代内容？像这样的东西

我们注意到您有一个活跃的广告拦截器。 example.com 是由广告资助的，我们保证我们的广告质量高且不引人注目。为了让我们保持运转，您可以提供的最佳帮助就是将我们列入广告拦截器的白名单。谢谢！

如何测试广告拦截器？

找到一个例子了！ http://mangastream.com

Answer 1

广告拦截器基本上使用一些 ID 或 jQuery 来操作一些元素，例如存储在数据库中的选择规则，这是在 DOM 准备好一段时间后完成的。

因此，您必须在 DOM 准备好后一定时间（例如 3 秒）后检查您的广告元素是否被操纵。您基本上可以检查广告元素的 display（因为 AdBlockers 隐藏它）CSS 属性或innerHTML。下面是一个示例：

工作演示： http://jsfiddle.net/cxvNy/（已使用 AdBlock for Chrome 进行测试，您需要激活此功能）

如果您的广告 HTML 是：

<div id="google_ads_frame1">aa</div>

那么：

$(function(){
   setTimeout(function(){
      if($("#google_ads_frame1").css('display')=="none") //use your ad's id here I have used Google Adense
      {
          $('body').html("We noticed you have an active Ad Blocker. Example.com is ad funded, we promise our ads are of high quality and are unobtrusive. The best help you could provide to keep us running, is to whitelist us in your ad blocker. Thanks!");
      }
  },3000);
});

希望上面的代码是不言自明的:)

Answer 2

最终，我使用了以下实现（类似于此网站的）。使用以下代码：

function abp() {
    if ($('.ad').height() == 0) {
        $('.ad').css("height", "90px");
        $('.ad').css("background-image", "url(/static/images/msblock.png)");
    }
}
$(abp);

在文档的最后。看起来就像专业人士一样工作。感谢大家的精彩回答，为大家点赞！

Answer 3

这里是从臀部开始，但我认为您可以在页面加载后使用一些 JavaScript 检查广告 div 的内容。

<!-- html -->
    <div id="MyAdDiv">
       <div id="BeaconContainer" style="display:none">I rendered!</div>
       // Ad content here.  
    </div>

// javascript

    var d = document.getElementById("MyAdDiv");

    if ( d.innerHTML.indexOf("I rendered!") === -1 )  {
       // Your ad has been blocked.
       // Run code to launch WhiteList request message.
    }

我不知道广告拦截器何时执行此操作，因此使用 setTimeout().您还可以使用 ajax 调用做一些有趣的事情，例如收集有关有多少用户正在运行广告拦截器的统计信息。管理层就是喜欢这类东西。

更新：
我刚刚安装了 Chrome 的 adblock 并在 StackOverflow 上进行了检查。看起来 AdBlock 只是删除了广告容器的内容，所以上面的方法是可行的。

Answer 4

最常见的技巧是创建一个 JavaScript 文件，其名称通常会被广告拦截器阻止，例如 /ads/advert.js。
如果文件被阻止，您就知道访问者启用了广告拦截器。

CSS 文件通常不会被广告拦截器列表阻止，因此这将是一种更安全的方法。

Answer 5

这也可以通过简单的 JavaScript 来完成，无需使用 jQuery。

<script>
window.onload = function(){
  setTimeout(showAdblockImage, 3000); 
};
function showAdblockImage(){
    //get all google ad elements
    var adsList = document.querySelectorAll("ins.adsbygoogle");
    if(!adsList){ return;}
    for(var i=0; i<adsList.length;i++){
        if(adsList[i].innerHTML.replace(/\s/g, "").length != 0){
            //AdBlock is not active, hence exit
            break;
        }
        //apply inline css to force display
        adsList[i].style.cssText = 'display:block !important';
        //modify html content of element
        adsList[i].innerHTML='<img src="imageurl/img_1.jpg" />';
    } 
}
</script>

参考：用替代内容代替 AdBlock 审查广告

Answer 6

我不知道广告拦截器是如何工作的，但是例如 我拥有的 Chrome 广告拦截器 可以让我选择包含以下内容的特定 DOM 元素要删除的广告：

...广告...

，拦截器会以某种方式将其删除。

如果您在该 div 中放入一些 javascript，带有一个短计时器，它将修改一个全局变量，然后执行另一个计时器，读取该全局变量，那么如果该变量是，您是否可以假设页面上没有广告拦截器设置正确吗？如果拦截器在 Chrome 评估该 javascript 后删除该 div，会发生什么情况，尽管父 div 已被删除，计时器仍会设法设置该变量吗？

AdBlock 还维护一个“不良”服务器的公共列表（http://www.doubleclick.com？），并且可能会阻止对来自这些服务器的内容的 http 请求。如果它与 Chrome 集成，这样它就可以定义某种内容策略——加载什么，不加载什么，就可以做到这一点。您可以使用前面描述的方法来检测这种情况。如果您的客户是广告提供商，我猜它迟早会被列入黑名单:)

拦截器可能只会修改 CSS 并隐藏整个 div，但这很容易被检测到。

Answer 7

我最喜欢的方法是简单地在我的网站上所有漂亮的大型有用内容块周围添加一类“广告”或“广告”或类似的东西，然后当使用广告拦截器的人查看它时，他们看不到任何东西。

他们被迫禁用广告拦截才能看到内容。

不要理会警告，让他们自己解决。这不是使用广告拦截软件的傻瓜。

以下是一些流行的 adblock 扩展的阻止规则的当前列表。只需选择他们阻止的类或 ID（使用开发人员工具查看 css 类列表）

Answer 8

<script> // Run after all the page elements have loaded  window.onload = function(){ 
// This will take care of asynchronous Google ads
setTimeout(function() {     
  // We are targeting the first banner ad of AdSense
  var ad = document.querySelector("ins.adsbygoogle"); 
  // If the ad contains no innerHTML, ad blockers are at work
  if (ad && ad.innerHTML.replace(/\s/g, "").length == 0) {     
    // Since ad blocks hide ads using CSS too
    ad.style.cssText = 'display:block !important';         
    // You can put any text, image or even IFRAME tags here
    ad.innerHTML = '<img src="http://blog.liveurlifehere.com/wp-content/uploads/2015/01/adblock.jpg" width="300" height="250" />';      
  }      
}, 2000); // The ad blocker check is performed 2 seconds after the page load   }; </script>

使用此代码您可以设置图像来替换谷歌广告

Answer 9

您可以实现https://github.com/sitexw/FuckAdBlock，它非常好且易于使用。