javascript - 使用 AdBlocker 为用户显示替代内容

Question

我正在做一个广告资助的项目。真的是一些微妙和内容意识，而不是生殖器扩大等蹩脚的弹出窗口。

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

如何为使用广告拦截器的人显示替代内容？就像是

我们注意到您有一个有效的广告拦截器。Example.com 由广告资助，我们保证我们的广告质量高且不引人注目。您可以提供的让我们继续运行的最佳帮助是在您的广告拦截器中将我们列入白名单。谢谢！

如何测试广告拦截器？

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

score 17 · Accepted Answer

广告拦截器基本上使用一些 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);
});

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

score 6 · Accepted Answer

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

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

在文件的最后。似乎像专业人士一样工作。感谢大家的精彩回答，为大家点赞！

score 3 · Accepted Answer

在这里从臀部拍摄，但我认为您可以在页面加载后使用一些 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 只是删除了广告容器的内容，所以上面的方法可以工作。

score 2 · Accepted Answer

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

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

score 2 · Accepted Answer

这也可以使用简单的 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 审查广告

score 0 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

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

他们被迫禁用广告屏蔽才能看到内容。

不要为警告而烦恼，让他们弄清楚。使用广告拦截软件不是傻瓜。

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

0

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

于 2017-08-10T06:53:59.077 回答

javascript - 使用 AdBlocker 为用户显示替代内容

9 回答 9

Related

Reference