我希望能够检测用户是否正在使用广告拦截软件,当他们访问我的网站。如果他们正在使用它,我想显示一条消息,要求他们关闭它以支持项目,就像这个网站一样。

如果你进入该网站,而你的浏览器启用了某种广告拦截软件,那么该网站就不会显示真正的广告,而是显示一个小横幅,告诉用户广告收入用于托管项目,他们应该考虑关闭广告拦截。

我想在我的网站上做到这一点,我正在使用adsense广告,我怎么能做到呢?


当前回答

我还没有看到任何好的,简单的答案来解决这两种类型的广告拦截在今天普遍使用,所以我将提供我自己的答案。

广告拦截器类型1:根据脚本名称(AdBlock, uBlock来源等)拦截网络广告脚本。

广告拦截器类型2:基于服务主机名的广告数据库(FireFox内容拦截器,各种网关插件等)拦截网络广告。

这个解决方案对两者都有效。它会弹出一个巨大的粉色“呼吁框”,要求用户禁用广告拦截器。我们喜欢把它放在菜单下面,内容上面。我们实际上并没有阻止对网站的访问-这只是把页面上的内容往下推了一点,但人们会发现这很烦人,几乎所有人都会遵守并禁用他们在你的网站上的广告拦截器。

这就是解决方案:

A)创建一个名为advertising .js的文件,并将其放置在你的web服务器的根目录下,由以下代码行组成:

document.write('<div id="tester">an advertisement</div>');

B)在你的网页中注入以下内容(你甚至可以使用你的广告服务器代码来做到这一点!)建议位置在菜单下方,内容上方。

<script src="advertisement.js"></script>
<table id="tbl_ab_appeal" style="width: 900px; margin-left:auto; margin-right: auto; padding: 25px; background: #FCC; border: 1px solid #F66; visibility:collapse; border-collapse: collapse;">
    <tr>
        <td>We've detected that you're using an <strong>ad content blocking</strong> browser plug-in or feature. Ads provide a critical source of revenue to the continued operation of [This website name].&nbsp; We ask that you disable ad blocking while on [This
            website name] in the best interests of our community.</td>
    </tr>
</table>
<script>
    if (document.getElementById("tester") == undefined) adsBlocked();

    function adsBlocked() {
        document.getElementById("tbl_ab_appeal").style.visibility = "visible";
        document.getElementById("tbl_ab_appeal").style.borderCollapse = "separate";
        document.getElementById("tbl_ab_appeal").style.marginTop = "10px"
        document.getElementById("tbl_ab_appeal").style.marginBottom = "10px"
    }
</script>
<script onerror="adsBlocked()" src="//www.googletagservices.com/tag/js/gpt.js"></script>

它是如何工作的?消息被加载,但被设为零高度且不可见。如果本地脚本advertising .js运行失败,或者远程AdSense脚本www.googletagservices.com/tag/js/gpt.js加载失败,则该方框可见。

其他回答

我的解决方案并不针对特定的广告网络,而且是非常轻量级的。我已经在生产环境中运行了几年。AdBlock会屏蔽所有含有“广告”或“预竞价”字样的url。这就是我所做的:

我在webroot中添加了一个名为prebid-ads.js的小js文件

这是文件中唯一的一行代码。将此变量命名为其他变量,参见下文!

var canRunAds = true;

然后在你页面的某处:

<html>
  <head>
    <script src="/js/prebid-ads.js"></script>
  </head>
  <body>
    <script>
      if( window.canRunAds === undefined ){
        // adblocker detected, show fallback
        showFallbackImage();
      }
    </script>
  </body>
</html>

uBlock Origin加载他们自己的ads-prebid.js,还原了这个答案中描述的技巧(骄傲!),他们的文件包含以下内容:

(function() {
    'use strict';
    window.canRunAds = true;
    window.isAdBlockActive = false;
})();

作为一种解决方案,只需将canRunAds变量重命名为一些有趣的东西,比如window。adsAreWithUs或window.money高于隐私。

Ans de Nijs的发现和解决方法。谢谢!

支持扩展

像ads.js这样的文件在Chrome上至少会被这些广告拦截器屏蔽:

AdBlock Adblock Plus Adblock职业 Ghostery

不适用于:

隐私獾

这对我来说很管用:

function isAdBlocked() {
     return (typeof(window.google_jobrunner) === "undefined") ? true : false;
}

$(document).ready(function(){
    if(isAdBlocked()) {
       alert('Y U NO LIKE ADS?');
    }
});

我使用JavaScript承诺和jQuery来检测用户是否启用了广告拦截器:

Create a small image and rename it to ads.jpg (or whatever extension). Create a JavaScript function to call it when you need: function hasAdBlocker() { return new Promise(function(resolve, reject) { let img = $('<img style="display: none;" src="ads.jpg" />'); img.on("load", reject); img.on("error", resolve); $("body").append(img); }); } Call it like this: hasAdBlocker().then(function(){ console.log('Has adBlock') }, function() { console.log('No adBlock dedected') })

他们利用谷歌的广告代码创建了一个id为“iframe”的iframe。因此,只要您的页面上没有该ID的内容,这也适用于您。

<p id="ads">
<script type="text/javascript"><!--
google_ad_client = "their-ad-code-here";
/* 160x600, droite */
google_ad_slot = "their-ad-code-here";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</p>

<script type="text/javascript"><!--
if(document.getElementsByTagName("iframe").item(0) == null)
{
    document.write("<div style='width:160px; height:600px; padding-top: 280px; margin-left:5px;border:1px solid #000000; text-align:center; font-family:century gothic, arial, helvetica, sans serif;padding-left:5px;padding-right:5px;'>Advertising seems to be blocked by your browser.<br /><br /><span style='font-size:10px'>Please notice that advertising helps us to host the project.<br /><br />If you find these ads intrusive or inappropriate, please contact me.</span><img src='http://www.playonlinux.com/images/abp.jpg' alt='Adblock Plus' /></div>");
}
--></script>

对我来说,这些把戏都没用,可能是我做错了什么。但这是谷歌广告实现的一种非常具体的方式。

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

如果你有其他的广告系统,如亚马逊,通过检查页面寻找他们的通用类名/ id。

如果你打算把这段代码放在单独的.js文件中,请确保文件名中没有“Ad”字。就叫它magic.js吧

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