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

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

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


当前回答

async function hasAdBlock() {
  try {
    await fetch("https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js", {
      method: "HEAD",
      mode: "no-cors",
    })
    return false;
  } catch(e) {
    return true;
  }
}

其他回答

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

我理解你的紧张,你可以检查元素是否已由脚本创建或元素被隐藏。如果我们谈论广告拦截,你只能依靠元素可见性,而不是元素存在性。

使用第三方脚本创建的元素永远不会出现,如果脚本目前无法访问(DNS错误,远程web服务器错误,离线web页面预加载等),你总是会得到假阳性。

其他的答案都是正确的,但是记住这个。

检查是否有广告拦截的有效方法: 简单地检查是否有adblock通过尝试触发谷歌广告的URL。如果是,然后运行callback_has_adblock,如果没有,然后运行callback_no_adblock。这个解决方案会多花费一个请求,但至少它总是有效的:

var hasAdBlock = function (callback_has_adblock, callback_no_adblock) {

    $.getScript( "https://pagead2.googlesyndication.com/pagead/show_ads.js" )
        .done(function( script, textStatus ) {
            callback_no_adblock();
        })
        .fail(function( jqxhr, settings, exception ) {
            callback_has_adblock();
    });
};

这个解决方案适用于所有类型的广告,而不仅仅是谷歌adsense。

你可以看看这个,可能会有帮助 detect-adblocker

它是一个定时答案的实现

将此添加到head标签中的任何脚本之前:

<head>
    <title></title>
    <meta/>

    <!--adBlocker detection code - START-->
    <script src="//adblocker.fortiapp.com/ads.js"></script>
    <script>
        (function (i, o, g, r) {
            i[o] = (typeof i[o] == typeof undefined) ? g : r
        })(window, 'adblocker', true, false);
    </script>
    <!--adBlocker detection code - END-->

    // Other scripts

</head>

然后再使用它:

if (adblocker) {
    // the add blocker is enabled
}else{
    // ad blocker is not enabled
}

我在我的网站上使用的这种方法,也许你会发现它很有用。在我看来,这是最简单的解决办法。

AdBlocker阻止特定的类和html元素,通过检查这些选择器的任何被阻止的广告在开发控制台(他们都列出),你可以看到哪些元素将总是被阻止。

例如,只要在stackoverflow上检查这个问题页面,你就会看到一堆被阻止的广告。

例如,任何带有bottom-ad类的元素都会被自动阻塞。

我用bottom-ad类创建了一个非空div元素: < span style=" font - family:宋体;"身高:1 px;“>你好< / div > 页面加载后,检查该元素是否被隐藏。我使用的是jQuery,但也可以使用javascript: $ (' .bottom-ad ') . css('显示')= =“没有”或更好的利用美元(.bottom-ad) .(:可见)

如果值为真,则AdBlocker是活动的。