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

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

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


当前回答

我知道已经有足够多的答案,但由于这个问题出现在谷歌搜索“检测广告拦截”的主题上,我想提供一些见解,以防你不使用adsense。

具体来说,通过这个例子,您可以检测到是否使用了Firefox Adblock提供的默认Adblock列表。它利用了这个块列表中有一个CSS id为#bottomAd的元素。如果我在页面中包含这样一个元素,并测试它的高度,我知道广告拦截是否活跃:

<!-- some code before -->
<div id="bottomAd" style="font-size: 2px;">&nbsp;</div>
<!-- some code after -->

其余的是通过通常的jQuery嫌疑犯完成的:

$(document).ready( function() {
  window.setTimeout( function() {
    var bottomad = $('#bottomAd');
    if (bottomad.length == 1) {
      if (bottomad.height() == 0) {
        // adblocker active
      } else {
        // no adblocker
      }
    }      
  }, 1);
}

可以看到,我使用的setTimeout的超时时间至少为1毫秒。我在各种浏览器上测试过,大多数时候,直接检查ready中的元素总是返回0;不管广告拦截器是否有效。对此,我有两个想法:要么渲染还没有完成,要么Adblock还没有启动。我没有费心去进一步调查。

其他回答

大多数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 >

要检测用户是否屏蔽广告,你所要做的就是在广告javascript中找到一个函数,并尝试测试它。他们用什么方法屏蔽广告并不重要。下面是谷歌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

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

我的建议是:不要这样做!

在任何情况下,你把人们视为“做错事的人”都会导致他们反击。

这是我的建议。

在页面顶部放一个不显眼的小消息(不管广告是否被阻止),文字我完全尊重你阻止广告的权利,并链接到另一个页面/弹出标题为阅读更多....

在另一页上,清楚地表明你明白这是他们的电脑,他们可以自由地使用广告拦截。

也要以一种非指责的方式明确表示,使用这些拦截器会让你更难发布优质内容(详细解释原因),虽然你不希望广告拦截器出现在你的网站上,但这完全是他们的决定。专注于关闭阻塞的积极方面。

那些强烈反对广告的人会忽略这一点,但你从来没有机会说服他们。那些漠不关心的人很可能会被你的吸引力所动摇,因为你没有做“让我走我的路,否则我就拿着我的球回家”的事情,老实说,这应该是五岁孩子的专属领域。

记住,没有人拿枪指着你的头强迫你把东西放到网上。尊重你的读者/用户,你可能会发现很多人会回报你。

我还没有看到任何好的,简单的答案来解决这两种类型的广告拦截在今天普遍使用,所以我将提供我自己的答案。

广告拦截器类型1:根据脚本名称(AdBlock, uBlock来源等)拦截网络广告脚本。

广告拦截器类型2:基于服务主机名的广告数据库(FireFox内容拦截器,各种网关插件等)拦截网络广告。

这个解决方案对两者都有效。它会弹出一个巨大的粉色“呼吁框”,要求用户禁用广告拦截器。我们喜欢把它放在菜单下面,内容上面。我们实际上并没有阻止对网站的访问-这只是把页面上的内容往下推了一点,但人们会发现这很烦人,几乎所有人都会遵守并禁用他们在你的网站上的广告拦截器。

这就是解决方案:

A)创建一个名为advertising .js的文件,并将其放置在你的web服务器的根目录下,由以下代码行组成:

document.write('<div id="tester">an advertisement</div>');

B)在你的网页中注入以下内容(你甚至可以使用你的广告服务器代码来做到这一点!)建议位置在菜单下方,内容上方。

<script src="advertisement.js"></script>
<table id="tbl_ab_appeal" style="width: 900px; margin-left:auto; margin-right: auto; padding: 25px; background: #FCC; border: 1px solid #F66; visibility:collapse; border-collapse: collapse;">
    <tr>
        <td>We've detected that you're using an <strong>ad content blocking</strong> browser plug-in or feature. Ads provide a critical source of revenue to the continued operation of [This website name].&nbsp; We ask that you disable ad blocking while on [This
            website name] in the best interests of our community.</td>
    </tr>
</table>
<script>
    if (document.getElementById("tester") == undefined) adsBlocked();

    function adsBlocked() {
        document.getElementById("tbl_ab_appeal").style.visibility = "visible";
        document.getElementById("tbl_ab_appeal").style.borderCollapse = "separate";
        document.getElementById("tbl_ab_appeal").style.marginTop = "10px"
        document.getElementById("tbl_ab_appeal").style.marginBottom = "10px"
    }
</script>
<script onerror="adsBlocked()" src="//www.googletagservices.com/tag/js/gpt.js"></script>

它是如何工作的?消息被加载,但被设为零高度且不可见。如果本地脚本advertising .js运行失败,或者远程AdSense脚本www.googletagservices.com/tag/js/gpt.js加载失败,则该方框可见。