How to detect Adblock on my website?

2019-01-01 07:23发布

站内问答 / 前端开发
995 45 4

I would like to be able to detect if the user is using adblocking software when they visit my website. If they are using it, I want to display a message asking them to turn it off in order to support the project, like this website does.

If you enter to that site and your browser has some kind of adblock software enabled, then the site instead of showing the actual ads shows a little banner telling the users that the ad revenue is used for hosting the project and they should consider turning Adblock off.

I want to do that on my website, I'm using adsense ads on it, How can I do that?

45条回答
流年柔荑漫光年
2楼-- · 2019-01-01 08:15

I understand your tension and you can check if element has been created by script or element is hidden. And if we speak about ad-blocking you can count only on the element visibility, not on the element presence.

Element created with third-party script will never be present, that if script is not reachable at the moment (DNS error, remote web server error, offline web page preload, etc), and you'll always get false positive.

All other answers with checks are correct, but keep this in mind.

查看更多
0人赞 添加讨论(0) 举报
残风、尘缘若梦
3楼-- · 2019-01-01 08:16

My solution is not specific to a certain ad network and is very lightweight. I've been running it in production for a few years. AdBlock blocks all URLs containing the word "ads". So this is what I did:

I added a small js file to my webroot with the name ads.js

This is the only line of code in that file

var canRunAds = true;

Then somewhere in my page:

<html>
  <head>
    <script src="/js/ads.js"></script>
  </head>
  <body>
    <script>
      if( window.canRunAds === undefined ){
        // adblocker detected, show fallback
        showFallbackImage();
      }
    </script>
  </body>
</html>

Files like ads.js are blocked by at least these adblockers on Chrome:

  • AdBlock
  • Adblock Plus
  • Adblock Pro

(Yes, these are completely different browser extensions)

This does not work with:

  • Ghostery (Only blocks actual doubleclick/appnexus urls)
查看更多
0人赞 添加讨论(0) 举报
临风纵饮
4楼-- · 2019-01-01 08:17

Most ads are dynamically loaded in javascript. I just used the onerror event to detect whether the ad script could be loaded or not. Seems to work.

Example with GoogleAds:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" onerror="adBlockFunction();"></script>

This can be used on other elements as well to see if an ad blocker is blocking the content. This method can produce false positives if the remote elements doesn't exist or cannot be reached.

查看更多
0人赞 添加讨论(0) 举报
忆尘夕之涩
5楼-- · 2019-01-01 08:18

You don't need an extra HTTP request , you may simply calculate the height of a fake add.

By the way, here is a full list matching the elements that adblockers avoid rendering.

window.adBlockRunning = function() {
    return (getComputedStyle(document.getElementById("detect"))["display"] == "none") ? true : false;
  }()

console.log(window.adBlockRunning);
#detect {
  height: 1px;
  width: 1px;
  position: absolute;
  left: -999em;
  top: -999em
}
<div id="detect" class="ads ad adsbox doubleclick ad-placement carbon-ads"></div>

查看更多
0人赞 添加讨论(0) 举报
人气声优
6楼-- · 2019-01-01 08:18

If using the new AdSense code, you can do an easy check, with out resorting to content or css checks.

Place your ads as normal in your markup:

<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>

Then you call the adsense code at the bottom of your page (note do not use the "async" flag when calling the adsbygoogle.js script):

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

Then add this little snippit of code below that:

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

AdSense always creates/sets the flag adsbygoogle.loaded to true when the ads are loaded, You could place the check in a setTimeout function to delay the check by a few seconds.

查看更多
0人赞 添加讨论(0) 举报
皆成旧梦
7楼-- · 2019-01-01 08:19

To detect if the user is blocking ads, all you have to do is find a function in the ad javascript and try testing for it. It doesn't matter what method they're using to block the ad. Here's what it looks like for Google Adsense ads:

if(!window.hasOwnProperty('google_render_ad') || window.google_render_ad === undefined) { 
    //They're blocking ads, display your banner
}

This method is outlined here: http://www.metamorphosite.com/detect-web-popup-blocker-software-adblock-spam

查看更多
0人赞 添加讨论(0) 举报
上一页 1 2 3 4 5 6 7 8 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)