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

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

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


当前回答

只需在你的网站上添加小脚本:

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>

找到了这个解

其他回答

如果你正在使用react和钩子:

import React, { useState, useEffect } from 'react'

const AdblockDetect = () => {
  const [usingAdblock, setUsingAdblock] = useState(false)

  let fakeAdBanner
  useEffect(() => {
    if (fakeAdBanner) {
      setUsingAdblock(fakeAdBanner.offsetHeight === 0)
    }
  })

  if (usingAdblock === true) {
    return null
  }

  return (
    <div>
      <div
        ref={r => (fakeAdBanner = r)}
        style={{ height: '1px', width: '1px', visibility: 'hidden', pointerEvents: 'none' }}
        className="adBanner"
      />
      Adblock!
    </div>
  )
}

export default AdblockDetect

时间的答案是很好的思考,但不再工作,所以我已经更新了js文件的名称为“adsense”从“广告”,它是工作回来像一个魅力!

下面是代码,也许这将帮助到一些人:

<html>
      <head>
            <script src="/adsense.js"></script>
      </head>
             <body>
                   <script>
                           if( window.adblockDetecter === undefined ){
                           // Do anithing, adblocker detected!
                           alert('Adblocker Detected!');}
                   </script>
            </body>
</html>

在Js文件中只放这一行:var adblockDetecter = true;

大多数adblocker取消对ads.js的HTTP请求,并为元素制作0px,但有时adblocker删除了DOM,上面的一些答案将失败,因为没有检查元素的存在。

使用setTimeout()是一个很好的实践,因为没有它,将使脚本与广告拦截器竞争。

下面的脚本将检查dom是否存在/已删除,如果存在则检查元素的offsetHeight。

setTimeout(函数(){ var a = document.querySelector('.showads'), B = a ?(a.offsetHeight ?False:真):真; console.log(“广告了吗?”,b) }, 200);//不要太快,否则会使结果出错。 <div class="ads showads"> 我爱你,我爱你,我爱你。 < / div >

这对我来说很管用:

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

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

现在有一个更好的方法来做到这一点,使用一个简单的JS脚本,称为AdBlock检测器 下面是如何使用它: 将此添加到<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 id向AdBlock用户显示消息:

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

注意,添加内联样式来隐藏它(当然,您也可以从自己的CSS文件中这样做)。 还要注意,它需要500毫秒,这是因为它必须等待广告拦截器做它的事情,否则它不会工作。

稍微解释一下这个脚本是如何工作的

首先,它添加一个iframe,其中包含一个随机生成的链接的源。(它是随机生成的,因为一些广告块很聪明,在某个时候,他们意识到链接是假的)。 然后它对iframe执行多次检查(是否成功加载或是否修改了它的样式)。如果其中一个测试为真,它就会向adblock用户显示ab-message元素。

这个脚本适用于大多数(如果不是全部)广告拦截器。

额外的

没有一点,真的,可以只是创建一个主旨,但我创建了一个Github项目,但仍然,看看它,如果它对你有帮助的话。abDetector:简单的JavaScript AdBlock检测器。 享受。