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

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

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


当前回答

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

其他回答

你不需要一个额外的HTTP请求,你可以简单地计算一个假添加的高度。

顺便说一下,这里有一个完整的列表,与广告拦截器避免渲染的元素相匹配。

窗口。adBlockRunning = function() { return (getComputedStyle(document.getElementById("detect"))["display"] == "none") ?真:假; }() console.log (window.adBlockRunning); #{检测 身高:1 px; 宽度:1 px; 位置:绝对的; 左:-999 em; 上图:-999年新兴市场 } <div id="detect" class="ads AD adsbox doubleclick AD -placement carbon-ads"></div>

对我来说,这些把戏都没用,可能是我做错了什么。但这是谷歌广告实现的一种非常具体的方式。

window.onload = function() {
   if (document.getElementsByClassName('google-auto-placed').length == 0){
                // Adblock Detected
   }        
}

如果你有其他的广告系统,如亚马逊,通过检查页面寻找他们的通用类名/ id。

如果你打算把这段代码放在单独的.js文件中,请确保文件名中没有“Ad”字。就叫它magic.js吧

如果谷歌决定更改div名称,此方法将失败。但这似乎不太可能。

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

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

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>

找到了这个解

时间的答案是很好的思考,但不再工作,所以我已经更新了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;