使用AdBlocker的用户如何显示替代内容

Question

我正在从事一项广告赞助项目，这是一些微妙的内容感知，而不是令人厌烦的弹窗广告，如增大阴茎等。

由于该项目是广告赞助的，使用广告拦截软件的人将无法受益于该项目（因为他们显然不知道该特定网站上的广告并不那么糟糕）。

我该如何为使用广告拦截软件的人显示替代内容？类似下面的内容：

我们注意到您正在使用广告拦截软件。Example.com是广告赞助的，我们保证我们的广告具有高质量和不会打扰您。如果您能在您的广告拦截软件中将我们加入白名单，那将是我们继续运行的最好帮助。谢谢！

我该如何测试广告拦截软件？

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

- Madara's Ghost

---

作为一个使用广告拦截器的人，我对某人绕过它的做法感到矛盾。 - Oded

显然，但有时我们确实没有选择。不过，有些网站我会加入白名单。StackOverflow就是一个很好的例子。 - Madara's Ghost

是的，但通常为了赚钱而托管广告（或链接到另一个网站以获取报酬）是大忌，会在搜索引擎上招致严重惩罚。 - Madara's Ghost

@Truth 是“替代广告内容”还是“替代页面内容”？ - c69

备选广告内容。我想展示同样的页面，只是请求用户为我的网站禁用广告拦截器。 - Madara's Ghost

Answer 1

广告过滤器基本上会在DOM准备好之后一段时间内，通过存储在其数据库中的一些具有特定ID或类似于jQuery的选择规则来操纵一些元素。

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

可工作演示： http://jsfiddle.net/cxvNy/ （使用Chrome的AdBlock插件进行测试，您需要激活该插件）

如果您的广告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);
});

希望以上代码很容易理解 :)

- Muhammad Usman

---

不行，正如我所说的那样，广告是在DOM准备好一段时间后才被操纵的，因此我们必须在广告被操纵后再进行检查。 - Muhammad Usman

好的，但是3秒看起来有点...极端。 - Madara's Ghost

3秒并不是强制的，您可以使用尽可能低的时间限制，并进行测试。我只是使用了更高的超时时间来保险起见。 - Muhammad Usman

你还应该测试div是否存在，如果广告拦截器删除了div。 - KeizerBridge

您的演示在使用uBlock Origin时没有显示任何内容。 - Michael Rogers

Answer 2

最终，我使用了以下实现方式（类似于这个网站）。使用以下代码：

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

在文档的最后部分。似乎像专业人士一样运作良好。感谢所有人的出色回答，给所有人点赞！

- Madara's Ghost

---

运行得非常好。我用想要显示的内容替换了 .css() 部分。 - user2959229

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只是删除了广告容器的内容，所以上述方法仍然适用。

- Daniel Szabo

Answer 4

最常见的诡计是创建一个文件，其名称通常被广告拦截器封锁，例如 /ads/advert.js。如果该文件被封锁，你就知道访问者已启用广告拦截器。

CSS文件通常不会受到广告拦截列表的封锁，所以这是一个更安全的方法。

- copy

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屏蔽广告的位置显示替代内容

- Sandeep Kumar

---

谢谢！TBF我大约2年前问过这个问题，那时我对VanillaJS还不是很熟练 :P - Madara's Ghost

Answer 6

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

- Saul Bretado

---

请在此处放置一些示例代码。不要仅使用链接回答。 - DeKaNszn

Answer 7

我最喜欢的方法是在网站上所有漂亮、大而有用的内容块周围添加一个“广告”或类似的类，这样当使用广告拦截器查看时，他们什么也看不到。

他们必须禁用广告拦截器才能查看内容。

不要费心警告他们，让他们自己解决。使用广告拦截软件的人并不是傻瓜。

以下是一些流行的广告拦截扩展程序的当前阻止规则列表。只需选择一个被阻止的类或ID（使用开发者工具查看CSS类列表）即可。

- Mike Szostech

---

回答开始得很好，但是没有必要在这里粘贴所有的类（因此为-1）。 - TryHarder

我已经删除了类名 - 我只是想尽可能地帮助并使答案变得简单易懂！ - Mike Szostech

Answer 8

我不知道广告拦截器是如何工作的，但例如我使用的Chrome广告拦截器可以让我选择要删除的特定DOM元素，其中包含广告：<div id="ad_holder"> ... ads ... </div>，然后拦截器会以某种方式将其删除。

如果您在该div中放置一些带有短计时器的javascript，用于修改全局变量，并在之后执行另一个计时器来读取该全局变量，那么如果变量被正确设置，您是否可以假设页面上没有广告拦截器？如果拦截器在Chrome评估该javascript后删除了该div，那么计时器是否仍然能够设置变量，即使父div已被删除？

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

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

- milan

Answer 9

<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>

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

- aman yadav