javascript - 广告拦截器检测 AKA Adblock Plus

Question

在谷歌和 Stackoverflow 搜索了几个小时后，我找不到解决方案。我现在要做的是检测 Adblock plus 并显示一条简单的消息。

我想要做的是在不使用 JavaScript 文件或 jQuery 的情况下检测 Adblock plus。大多数 adblock 以及他们使用文件的检测脚本，例如托管在自己的域上的“show_ads.js”，并在其中设置一行以将其设置为“adblock = false;”

使用 JavaScript 文件的问题，用户可以将该 JavaScript 文件列入白名单，并且不再检测到它。我正在寻找的是一个直接加载到 HTML 中的 JavaScript，它可以检测是否有人在不使用文件的情况下使用广告拦截器。

下面的例子：

<script type="text/javascript">
 // line of code that detects if using ad blocker

 if so display message
 </script>

这样做的原因是没有广告拦截器可以将您服务器上的 JavaScript 文件列入白名单。是的，我知道还有其他方法可以使用 NoScript 插件解决这个问题，但我已经有了解决方案。我有一个从未尝试过的好主意，一旦我完成它，广告拦截器就无法阻止它。

任何建议和示例将不胜感激。

score 75 · Accepted Answer

您不需要有插件来检测广告拦截，只需使用这个：

<script type="text/javascript">
    var adblock = true;
</script>
<script type="text/javascript" src="adframe.js"></script>
<script type="text/javascript">
    if(adblock) {
          //adblock is installed and enabled on this site :-D
    }
</script>

adframe.js的内容：

adblock = false;

更新： Adblock Plus 根据已有的模式阻止某些请求或隐藏某些元素。其中一种模式是（在patterns.ini中）：

[Filter]
text=/adframe.
hitCount=843
lastHit=1456391595626

这会阻止其中包含的任何 URL /adframe.。

2018 年 8 月 25 日更新

Adblock plus 更改了查找列表和阻止广告的方式。它有一堆称为订阅的列表，用于阻塞。例如这个是默认的：

https://easylist-downloads.adblockplus.org/easylist.txt

您可以使用此文件上的规则来查找要使用的文件名。例如，您可以使用seo-ads.js

PS 开发人员：出于某种原因，我无法让 ABP 在本地环境中阻止这些文件。

PS : ABP 是我最喜欢的广告拦截器 :-D

score 20 · Accepted Answer

使用我的插件“FuckAdBlock”，它可以很容易地检测到 AdBlock： https ://github.com/sitexw/FuckAdBlock

例子：

fuckAdBlock.on(true, function() {
    alert('AdBlock detected !');
}).on(false, function() {
    alert('AdBlock is not detected =)');
});

在线示例：http: //fuckadblock.sitexw.fr/

score 10 · Accepted Answer

我在现场看到的是在广告后面使用背景图片。如果 adblock 未激活，则广告将显示在背景图像上（这使得背景图像不可见）。如果 adblock 处于活动状态，则广告被阻止，用户将看到背景图像。

<div id="ad-container">
  <img src="../ad/ad.png" id="ad">
</div>

使用 CSS：

#ad-container {
  background-image: url( http://domain.com/pleasedonotuseadblocker.png );
  height: 200px;
  width: 200px;
}

#ad {
  height: 200px;
  width: 200px;
}

score 6 · Accepted Answer

如果您想展示广告，即使 AdBlock 处于活动状态，您也必须了解 AdBlock 的功能。

AdBlock 可以阻止资源加载
AdBlock 可以隐藏 DOM 中的特定元素。

虽然据说 AdBlock 也可以修改 CSS，但除了隐藏和折叠元素之外，我找不到任何文档。

那么你究竟能做些什么来比 AdBlock 更“聪明”呢？

你可以用一种永远不会“匹配”的方式来伪装你的请求（例如http://domain.com/ae9a70e0a.png，图像名称每次都是随机的，并且没有公共前缀）。据我所知，AdBlock 中的规则不能包含正则表达式。一条规则要么不匹配广告，要么匹配太多资源。可以在服务器上重写这样的 url 以指向您的广告。

但是，虽然 AdBlock 可能无法阻止您的广告加载，但它仍然可以隐藏它。没有真正的方法可以解决这个问题。总会有一个智能的 CSS 选择器来选择你的元素。但是，您可以添加带有内容的背景图像。这对广告没有用（不可点击），但可以帮助您显示其他消息。缺点是，如果有人决定屏蔽那个烦人的背景图片，它也会隐藏你的内容。

就脚本而言，您也许可以使用 ajax 请求加载广告。我想（但无法测试）如果无法加载资源（因为它被阻止），它将给出错误。（$.ajax( request ).error( function() { ... } );在 jQuery 中或在常规 javascript 中的一些等价物）。你可以用它来做其他事情。您可以将其包含在文档本身而不是外部资源中，以确保它始终运行（如果启用了 javascript）。即便如此，你也不能确定“无论你做什么”都会被明显地展示出来。作为最后的手段，您可以制作一个window.alert( ... ). 假设在 3 页内，如果您使用它，您的访问者将永远不会回来。

我能想到的另一种方法是为服务器创建一个 websocket（afaik 这不能被 AdBlock 阻止）。在服务器端，您需要检查在加载某个页面时是否未加载广告页面。此信息可以通过套接字发送，它可以在您的脚本中用来做“某事”。然而，这听起来非常复杂，并且对于“只是”一个检测 AdBlock 的脚本来说是一个巨大的开销。

score 4 · Accepted Answer

一个简单的 Ajax 调用就可以完成这项工作：

var xmlhttp = new XMLHttpRequest()
xmlhttp.onreadystatechange = function() {
  if( xmlhttp.readyState == XMLHttpRequest.DONE ){
    if( xmlhttp.status !== 404 ){
        console.log("Blocking ads")
    }else{
        console.log("Not blocking ads")
    }
  }
}
xmlhttp.open("GET", "/498100ffe815d700cd838d1/ads/showad.js", true)
xmlhttp.send()

甚至更好，没有 HTTP 开销：

var adBlockTester = document.createElement('div');
adBlockTester.innerHTML = '&nbsp;';
adBlockTester.className = 'adsbox';
document.body.appendChild(adBlockTester);
window.setTimeout(function() {
  if( adBlockTester.offsetHeight === 0 ){
    console.log("Blocking ads")
  }else{
    console.log("Not blocking ads")
  }
  document.body.removeChild(adBlockTester);
}, 60);

score 3 · Accepted Answer

以下代码段几乎可以检测到所有广告拦截器。需要jQuery.

(function(){
    var bait = 'http://googleads.g.doubleclick.net/pagead/gen_204?id=wfocus&gqid=advertisment&advert=ads';
      $.ajax({ url: bait, dataType: "script"})
      .fail(function () { alert('ad blocked'); })
      .abort(function () { alert('ad blocked'); });
    })();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

它包含在一个自动执行的匿名函数中，因此它不会干扰站点上的其他变量或代码。

它bait使用最流行的广告服务网络（Google 的双击），并包括easylist和其他人使用的一些其他查询参数。

fail()和方法都是必需的abort()，但只会调用其中一个或另一个。

不要将代码放入adblocker.js或类似中，因为这些文件名本身会被阻止加载。将其内联或包含在随机/任意文件名中，或将其组合到您的主站点 JS 文件中。

score 2 · Accepted Answer

这是检测adblock的代码。您可以在此处了解代码的工作原理

function detect()
{
    //create a iframe. Append the iframe to the body. And then after 100ms check if their offsetHeight, display or visibility is set such a way that user cannot see them.
    //In the URL use the words specific to advertising so that Adblock can do string matching.
    var iframe = document.createElement("iframe");
    iframe.height = "1px";
    iframe.width = "1px";
    iframe.id = "ads-text-iframe";
    iframe.src = "http://domain.com/ads.html";

    document.body.appendChild(iframe);

    setTimeout(function()
               {
                   var iframe = document.getElementById("ads-text-iframe");
                   if(iframe.style.display == "none" || iframe.style.display == "hidden" || iframe.style.visibility == "hidden" || iframe.offsetHeight == 0)
                   {
                        alert("Adblock is blocking ads on this page");
                        iframe.remove();
                   }
                   else
                   {
                        alert("Adblock is not detecting ads on this page");
                        iframe.remove();
                   }
               }, 100);
}

score 2 · Accepted Answer

我发现的最聪明和最简单的方法是：

1）将此html代码添加到标记中的某处，可能位于顶部。

<div id="bait" class="pub_300x250" style="color: #fff">.</div>

通常广告拦截器会检测到 Easylist 中提到的 (pub_300x250) 的广告尺寸并阻止它们，这是由“诱饵”触发的。

2）然后将此js代码添加到您的脚本文件中。

if (document.getElementById("bait").offsetHeight === 0) {
    // function code or alert (whatever) here.
   alert("Ad-Blocker DETECTED");
}

html我们的脚本通过检查“诱饵”ID 来检测当前是否存在该标记。

这适用于每个浏览器上的每个站点上的Adblock, AdBlock-Plus& 。uBlock Origin

score 2 · Accepted Answer

运行良好的简单 javascript/jQuery 检测：

$('body').append('<div id="ad-container" style="position:absolute;"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" id="ad"></div>');
var ad_container = $('body').children('#ad-container');
if(!ad_container.is(":visible")) {
  // Add your warning and/or adblock detection logic here.
}
ad_container.remove();

score 1 · Accepted Answer

在我的情况下，即使没有广告，亚行也隐藏了内容..（只是因为这个ad词出现在许多网址中，因为它是帖子类型的 slug..）

但我注意到他们没有删除内容，只是将 display: none 应用于正文

所以作为一个额外的解决方案，

我刚刚注意到应用 display: block !important; 去正文，防止 Adblock plus 隐藏内容

<body style="display: block !important;">
  <img src="url-containg-ad-ads-word.jpg" alt="you should see this anyway" >
</body>

score 1 · Accepted Answer

对我来说，这些技巧都不起作用，可能是我做错了什么。但这是实施谷歌广告的一种非常具体的方式。

window.onload = function() {
   if (document.getElementsByClassName('google-auto-placed').length == 0){
                // Adblock Detected
   }        
}

如果您有其他广告系统（如亚马逊），请通过检查页面查找它们的通用类名/ID。

如果您打算将此代码放在单独的 .js 文件中，请确保文件名中没有“Ad”字样。把它命名为magic.js

如果 Google 决定更改 div 名称，此方法将失败。但这似乎不太可能。

score 0 · Accepted Answer

当然，这是一场军备竞赛，我支持任何人屏蔽广告的权利，但我也支持依赖广告收入的网站试图以其他方式说服用户，或者说服他们订阅或捐款以弥补失去的广告收入. 我不赞成网站试图强迫用户看到广告，但礼貌的信息很好。

无论如何，现在值得注意的是，有许多广告拦截扩展/插件，它们都有不同的方法，有时操作系统和浏览器之间也有所不同。我发现，就我现在的目的而言，这个 jQuery 选择器至少足以看到是否正在使用 AdBlock 或 AdBlockplus，跨平台，至少跨 Chrome 和 Firefox：

if($("div[id^=google_ads_iframe_] iframe:visible").length == 0)  {
    // pop up a message or whatever
}

score 0 · Accepted Answer

这是处理它的最简单方法（没有 iframe，没有 jquery）：

var elem = document.createElement('div');
elem.className = 'adclass';
document.body.appendChild(elem);
window.setTimeout(function () {
    var isAdblockEnabled = !(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
    if (isAdblockEnabled) {
        // Adblock is enabled
    }
}, 0);

score -1 · Accepted Answer

我知道这有点旧，但恕我直言，这是一种更好的方法：将其
添加到您的<head>部分：

<script type="text/javascript">
window.onload = function() {
var iframe = document.createElement('iframe'),
    randomDomain = Math.floor(Math.random() * (10000 - 100 + 1)) + 100,
    iframeLoaded = true;
    
iframe.src = "http://"+ randomDomain +".com/ads.html";
iframe.height = ".1px";
iframe.width = ".1px";
iframe.id = 'some-ad';
iframe.onload = function() {iframeLoaded = false;};

document.body.appendChild(iframe);

setTimeout(function() { 
    var someAd = document.getElementById('some-ad');
    if(!iframeLoaded ||
       someAd == null || 
       someAd.style.display == "none" || 
       someAd.style.display == "hidden" || 
       someAd.style.visibility == "hidden" || 
       someAd.offsetHeight == 0)
        document.getElementById('ab-message').style.display = 'block';
    someAd.remove();
}, 500);
};
</script>`<br>

现在，您可以ab-message在要向 AdBlock 用户显示消息的任何地方使用 id：

<div id="ab-message" style="display: none">Your message here!</div>

请注意添加的内联样式以将其隐藏（当然，您也可以从自己的 CSS 文件中执行此操作）。
另请注意，它需要 500 毫秒，这是因为它必须等待广告拦截器完成它的工作，否则它将无法工作。

关于这个脚本如何工作的一点解释

首先，它附加一个带有随机生成链接源的 iframe。（它是随机生成的，因为一些广告块很聪明，在某些时候，他们意识到链接是假的）。
然后它对该 iframe 运行多次检查（如果它已成功加载或它的样式是否已修改）。如果其中一项测试为真，那么它将ab-message向广告屏蔽用户显示该元素。

该脚本适用于大多数（如果不是全部）广告拦截器。

额外的

真的，没有必要创建一个要点，而是我创建了一个 Github 项目，但是，如果它对你有帮助，请检查它并加注星标。
abDetector：简单的原生 JavaScript AdBlock 检测器。
享受。

score -3 · Accepted Answer

如果您使用第三方广告，我发现了最好的脚本之一。

antiblock.org免责声明无论如何我都不隶属于这个网站。

它适用于大多数网站，如果他们想绕过它，他们将不得不添加自己的过滤器（对于普通用户来说很复杂）或联系 adblock 过滤器并添加一个，但他们放弃这样做会导致列表过载并变慢广告屏蔽用户。

javascript - 广告拦截器检测 AKA Adblock Plus

15 回答 15

关于这个脚本如何工作的一点解释

额外的

Related

Reference