如果您进入该网站并且您的浏览器启用了某种广告拦截软件,则该网站不会显示实际广告,而是显示一个小横幅,告诉用户广告收入用于主机项目,他们应考虑关闭Adblock。
我想在我的网站上做到这一点,我正在使用adsense广告,请问我该怎么做?
我的解决方案不针对任何特定的广告网络,非常轻量级。我已经在生产环境中运行了几年。AdBlock会阻止包含单词“ads”或“prebid”的所有URL。所以这就是我所做的:
我在我的网站根目录下添加了一个名为prebid-ads.js
的小型js文件。
这是该文件中唯一的一行代码。更新于2022-04-26将此变量命名为其他名称,请参见下文!
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>
更新 2022-04-26 uBlock Origin 加载了它们自己的 ads-prebid.js 文件,该文件撤销了本回答中描述的技巧(骄傲!),他们的文件包含以下内容:
(function() {
'use strict';
window.canRunAds = true;
window.isAdBlockActive = false;
})();
作为解决方案,只需将您的canRunAds
变量重命名为一些有趣的东西,比如window.adsAreWithUs
或window.moneyAbovePrivacy
。
由Ans de Nijs发现和解决。谢谢!
支持的扩展程序
像ads.js这样的文件在Chrome上至少被以下广告拦截器阻止:
不兼容:
Privacy Badger
js/ads.js
的完整链接吗?因为我在Blogger上必须将 .js
文件上传到某个地方(例如:Google Drive),而在这种情况下链接中不包含 ads
。如果您能提供文件的链接,那将非常有帮助。 - Deb虽然并非直接回答,但我会将广告信息加载到页面上,而不是尝试检测它。这样广告未能加载时,广告信息也会显示。
async function detectAdBlock() {
let adBlockEnabled = false
const googleAdUrl = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'
try {
await fetch(new Request(googleAdUrl)).catch(_ => adBlockEnabled = true)
} catch (e) {
adBlockEnabled = true
} finally {
console.log(`AdBlock Enabled: ${adBlockEnabled}`)
}
}
detectAdBlock()
testAd.style.display='absolute'
并将其移出屏幕。 - Gerald<div id="detect" class="ads ad adsbox doubleclick ad-placement carbon-ads" style="background-color:red;height:300px;width:300px;position: absolute;left:0;top:0;"> </div>
(当然,在测试后应该将CSS更改为 <div id="detect" class="ads ad adsbox doubleclick ad-placement carbon-ads" style="height:1px;width:1px;position: absolute;left:-999px;top:-999px;"> </div>
)。 - godblessstrawberryfetch(new Request(AdUrl), {mode: 'no-cors'})
运行也足以满足此用例。 - Alihttp://thepcspy.com/read/how_to_block_adblock/
使用jQuery:
function blockAdblockUser() {
if ($('.myTestAd').height() == 0) {
window.location = 'http://example.com/AdblockNotice.html';
}
}
$(document).ready(function(){
blockAdblockUser();
});
当然,你需要为AdblockNotice.html创建一个落地页,并且.myTestAd类需要反映你实际的广告容器。但这应该能够工作。function blockAdblockUser() {
if ($('.myTestAd').filter(':visible').length == 0) {
// All are hidden, or "not visible", so:
// Redirect, show dialog, do something...
} else if ($('.myTestAd').filter(':hidden').length > 0) {
// Maybe a different error if only some are hidden?
// Redirect, show dialog, do something...
}
}
当然,如果需要的话,这两个可以合并成一个if
块。
请注意,visibility: hidden
也不会被任何一个过滤条件所捕获(布局空间仍然存在,但广告不可见)。要检查这一点,可以使用另一个过滤器:
$('.myTestAd').filter(function fi(){
return $(this).css('visibility') == 'hidden';
})
这将为您提供一个广告元素数组,它们是“不可见”的(任何大于0
的问题,在理论上)。
大多数广告是通过JavaScript动态加载的。我只是使用了onerror事件来检测广告脚本是否能被加载。看起来有效。
用GoogleAds举例:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" onerror="adBlockFunction();"></script>
这也可以用于其他元素,以查看广告拦截器是否拦截了内容。如果远程元素不存在或无法访问,则此方法可能会产生错误的结果。
offsetHeight
。 - cieunteung要检测用户是否阻止广告,你只需要在广告Javascript中找到一个函数并尝试测试它即可。无论他们使用什么方法来屏蔽广告都没关系。以下是Google Adsense广告的示例:
if(!window.hasOwnProperty('google_render_ad') || window.google_render_ad === undefined) {
//They're blocking ads, display your banner
}
这个方法在这里介绍:http://www.metamorphosite.com/detect-web-popup-blocker-software-adblock-spam
=== undefined
,而不是 typeof
。 - Robo Robok您不需要额外的HTTP请求,只需计算虚拟广告的高度即可。
顺便提一下,这里有一个完整列表,列出了广告拦截器避免渲染的元素。
window.adBlockRunning = function() {
return (getComputedStyle(document.getElementById("detect"))["display"] == "none") ? true : false;
}()
console.log(window.adBlockRunning);
#detect {
height: 1px;
width: 1px;
position: absolute;
left: -999em;
top: -999em
}
<div id="detect" class="ads ad adsbox doubleclick ad-placement carbon-ads"></div>
我的建议是:不要这样做!
任何情况下,你把人们视为“罪犯”,都会导致他们反击。
这是我的建议。
在页面顶部放置一个小而不显眼的信息(无论是否拦截广告),其中包含文本我*非常尊重*您阻止广告的权利
以及一个指向另一页/弹出窗口的链接,标题为阅读更多……
。
在另一个页面上,明确表示你理解这是他们的计算机,他们可以自由使用广告拦截功能。
还要以一种非责难性的方式清楚地表明,使用这些拦截器会使你难以提供优质内容(详细解释原因),虽然你希望他们不要在你的网站上使用广告拦截,但这完全取决于他们的决定。专注于关闭拦截的积极方面。
那些强烈反对广告的人会忽略这一点,但你从来没有机会说服他们。那些漠不关心的人可能会被你的呼吁所感动,因为你没有采取“让我按我的方式行事,否则我就带着我的球回家”的方式,这实在应该是五岁孩子的专属领域。
记住,没有人拿枪指着你的头强迫你把东西放到网络上。尊重你的读者/用户,你可能会发现其中很多人会予以回报。
只需在您的网站上添加一个小脚本:
var isAdsDisplayed = true;
文件名为adsbygoogle.js
执行以下步骤:
<script src="/js/adsbygoogle.js"></script>
<script>
if(window.isAdsDisplayed === undefined ) {
// AdBlock is enabled. Show message or track custom data here
}
</script>
在这里找到了解决方案。
我使用jQuery最简单的解决方案是:
$.ajax({
url: "/scripts/advertisement.js", // this is just an empty js file
dataType: "script"
}).fail(function () {
// redirect or display message here
});
advertisement.js文件什么也没有。当有人使用广告拦截器时,它会失败并调用该函数。