javascript 使用 AdBlockers 为用户显示替代内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8625514/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display Alternative Content for Users with AdBlockers
提问by Madara's Ghost
I'm working on an ad funded project. Really something subtle and content aware, not lame popups for genital enlargement etc.
我正在从事一个由广告资助的项目。真的是一些微妙和内容意识的东西，而不是用于生殖器增大等的蹩脚弹出窗口。
Since the project is ad funded, people with Ad Blockers will not benefit the project, (since they obviously don't know the ads on that specific site is not that bad).
由于该项目是由广告资助的，使用广告拦截器的人不会使该项目受益（因为他们显然不知道该特定网站上的广告还不错）。
How can I display an alternative content for people with ad blockers? Something like
如何为有广告拦截器的人显示替代内容？就像是
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!
我们注意到您有一个活动的广告拦截器。Example.com 是由广告资助的，我们保证我们的广告质量高且不引人注目。您可以提供的最好帮助来保持我们的运行，就是在您的广告拦截器中将我们列入白名单。谢谢！
How can I test for an ad blocker?
如何测试广告拦截器？
Found an example! http://mangastream.com
找到一个例子！http://mangastream.com
回答by Muhammad Usman
Ad Blockers basically manipulate some elements with some IDs or jQuery like selection rules, stored in their database, it is done a while after the DOM is ready.
广告拦截器基本上使用一些 ID 或 jQuery 之类的选择规则来操作一些元素，这些元素存储在他们的数据库中，在 DOM 准备好一段时间后完成。
So you have to check if your ad element is manipulated or not after a certain time for example 3 seconds after the DOM is ready. You can basically check the display(because AdBlockers hide it) CSS property or the innerHTML of your ad element. Below is an example:
因此，您必须在 DOM 准备好后的特定时间（例如 3 秒）后检查您的广告元素是否被操纵。您基本上可以检查display（因为 AdBlockers 隐藏它）CSS 属性或您的广告元素的 innerHTML。下面是一个例子：
Working Demo:http://jsfiddle.net/cxvNy/(Tested using AdBlock for Chrome, you need to have this active)
工作演示：http : //jsfiddle.net/cxvNy/（使用AdBlock for Chrome测试，你需要激活它）
If your Ad HTML is:
如果您的广告 HTML 是：
<div id="google_ads_frame1">aa</div>
Then:
然后：
$(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);
});
Hope above code is self explanatory :)
希望上面的代码是不言自明的:)
回答by Madara's Ghost
Eventually, I used the following implementation (similar to this site's). The following code is used:
最终，我使用了以下实现（类似于本站点的）。使用以下代码：
function abp() {
if ($('.ad').height() == 0) {
$('.ad').css("height", "90px");
$('.ad').css("background-image", "url(/static/images/msblock.png)");
}
}
$(abp);
At the very end of the document. Seems to be working like a pro. Thanks for everyone's excellent answers, upvotes for all!
在文档的最后。似乎像专业人士一样工作。感谢大家的精彩回答，为大家点赞！
回答by Daniel Szabo
Shooting from the hip here, but methinks you can check the content of your ad's div with some javascript after the page has loaded.
从这里开始拍摄，但我认为您可以在页面加载后使用一些 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.
}
I don't know exactly when the adblocker does it's thing, so it would probably be a good idea to delay this function's execution for a few seconds with setTimeout(). There's probably some interesting stuff you could do with some ajax calls, too, like collecting stats on how many users are running ad blockers. Management just lovesthat kind of stuff.
我不知道广告拦截器的确切时间，因此使用setTimeout()将此函数的执行延迟几秒钟可能是个好主意。您可能还可以使用一些 ajax 调用来做一些有趣的事情，例如收集有关有多少用户正在运行广告拦截器的统计信息。管理层就是喜欢那种东西。
UPDATE:I just installed adblock for Chrome and checked it against StackOverflow. It looks like AdBlock just removes the contents of the ad container, so the method above will work.
更新：我刚刚为 Chrome 安装了 adblock，并针对 StackOverflow 进行了检查。看起来 AdBlock 只是删除了广告容器的内容，所以上面的方法是可行的。
回答by copy
The most common trick is to create a JavaScript file with a name which is commonly blocked by adblockers, for instance /ads/advert.js.
If the file gets blocked, you know the visitor has an adblocker enabled.
最常见的技巧是创建一个 JavaScript 文件，其名称通常会被广告拦截器阻止，例如/ads/advert.js. 如果文件被阻止，您就知道访问者启用了广告拦截器。
CSS files usually don't get blocked by adblocker lists, so this would be a safer approach.
CSS 文件通常不会被广告拦截器列表阻止，因此这是一种更安全的方法。
回答by Sandeep Kumar
This can be done with simple JavaScript also, without using jQuery.
这也可以使用简单的 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>
Ref: Place alternate content in place of AdBlock Censored Ads
回答by aman yadav
<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>
Use this code you can set image in replacment of google ads
使用此代码，您可以设置图片替换谷歌广告
回答by Saul Bretado
You can implement https://github.com/sitexw/fworAdBlockwhich is very good and easy to use.
你可以实现https://github.com/sitexw/fworAdBlock，它非常好用且易于使用。
回答by Mike Szostech
My favorite approach is to simply add a class of 'ads' or 'ad' or something similar around all nice large useful content blocks on my site, then when people with an ad blocker view it, they don't see anything.
我最喜欢的方法是简单地在我网站上所有漂亮的大型有用内容块周围添加一类“广告”或“广告”或类似的东西，然后当使用广告拦截器的人查看它时，他们什么也看不到。
They're forced to disable their ad block in order to see the content.
他们被迫禁用他们的广告块才能看到内容。
Don't bother with warnings, let them figure it out. It's not dummies using ad blocking software.
不要打扰警告，让他们弄清楚。它不是使用广告拦截软件的傻瓜。
Here is the current list of block rules from some popular adblock extensions. Simply pick a class or id that they are blocking (use your developer tools to view the list of css classes)
以下是一些流行的广告拦截扩展的当前拦截规则列表。只需选择他们阻止的类或 id（使用您的开发人员工具查看 css 类列表）
回答by milan
I don't know how ad blockers work but for example a Chrome ad blocker I havelets me pick a specific DOM element containing ad to be removed: <div id="ad_holder"> ... ads ... </div>, and the blocker would remove it somehow.
我不知道广告拦截器是如何工作的，但例如我有一个Chrome 广告拦截器让我选择一个包含要删除的特定 DOM 元素：<div id="ad_holder"> ... ads ... </div>，并且拦截器会以某种方式删除它。
If you put some javascript inside that div, with a short timer, that would modify a global variable, and another timer that executes afterwards, reading that global variable, could you then assume there're no ad blockers on the page if the variable was properly set? What happens if the blocker removes the div after Chrome evaluating that javascript, would the timer stil manage to set the variable although the parent div was removed?
如果您在该 div 中放置一些 javascript，并带有一个短计时器，这将修改一个全局变量，然后再执行另一个计时器，读取该全局变量，如果变量是正确设置？如果阻止程序在 Chrome 评估该 javascript 后删除 div，会发生什么情况，尽管父 div 被删除，计时器仍会设法设置变量？
AdBlock also maintains a public list of 'bad' servers (http://www.doubleclick.com ?) and will probably block http requests for content from those servers. This can be done if it integrates with Chrome so that it can define some sort of a content policy - what gets loaded and what doesnt. This case you can detect with the previously described approach. If your client is an ad provider, i guess sooner or later it will end up black listed :)
AdBlock 还维护一个“坏”服务器的公共列表 (http://www.doubleclick.com ?)，并且可能会阻止来自这些服务器的内容的 http 请求。如果它与 Chrome 集成，则可以完成此操作，以便它可以定义某种内容策略 - 加载什么，不加载什么。您可以使用前面描述的方法检测这种情况。如果您的客户是广告提供商，我想它迟早会被列入黑名单:)
The blocker might only modify the CSS and hide the whole div, but this could be easily detected.
拦截器可能只修改 CSS 并隐藏整个 div，但这很容易被检测到。
