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

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

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


当前回答

我用jquery最简单的解决方案是:

$.ajax({
    url: "/scripts/advertisement.js", // this is just an empty js file
    dataType: "script"
}).fail(function () {
    // redirect or display message here
});

advertising .js什么都不包含。当有人使用adblock时,它失败了,函数被调用。

其他回答

AdBlock似乎阻止加载AdSense(等)JavaScript文件。所以,如果你使用异步版本的AdSense广告,你可以检查adsbygoogle是否是一个数组。这必须在几秒钟后检查,因为异步脚本是…异步的。以下是一个大致的大纲:

window.setTimeout(function(){
    if(adsbygoogle instanceof Array) {
        // adsbygoogle.js did not execute; probably blocked by an ad blocker
    } else {
        // adsbygoogle.js executed
    }
}, 2000);

为了澄清,这里有一个AdSense异步广告代码的示例:

<!-- this can go anywhere -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!-- this is where the ads display -->
<ins class="adsbygoogle" ...></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

注意adsbygoogle被初始化为一个数组。adsbygoogle.js库将此数组更改为Object {push:…}当它执行时。在一段时间后检查变量的类型可以告诉您脚本是否已加载。

如果使用新的AdSense代码,你可以做一个简单的检查,而不是求助于内容或css检查。

把你的广告正常地放在你的标记中:

<ins class="adsbygoogle" style="display: block;"
   data-ad-client="ca-pub-######"
   data-ad-slot="#######"
   data-ad-format="auto"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

然后你在你的页面底部调用adsense代码(注意,在调用adsbygoogle.js脚本时不要使用"async"标志):

<script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

然后在下面添加一小段代码:

<script>
if (!adsbygoogle.loaded) {
   // do something to alert the user
}
</script>

AdSense总是创建/设置标志adsbygoogle。当广告加载时,你可以将检查放在setTimeout函数中,以延迟检查几秒钟。

我使用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') })

如果你正在使用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

如果你有问题的adblock阻止新标签在浏览器中,你可以这样做:

$('a').click(function(e){ // change $('a') into more specific selector
    const openedWindow = window.open(this.href, '_blank');

    // Check if browser tab was closed within 0.3 second (user can't, adblock does).
    setTimeout(() => {
        if (openedWindow.closed) {
            alert('Adblock detected!');
        }
    }, 300);

    e.preventDefault(); // return false if you like
});

这段代码是有用的,如果你不想阻止整个网站,只是告诉用户为什么他们的浏览器标签是关闭的;)