浏览器广告拦截_如何检测广告拦截器

浏览器广告拦截

One of the unspoken rules of the internet is that most content is "free"... at the cost of webpage being littered with advertisements and trackers. This was't a big problem in the early internet days but trackers and advertisements have become so intrusive and unapologetically aggressive that you almost need to use an ad blocker browser extension.

互联网的潜规则之一是，大多数内容都是“免费的” ...以牺牲广告和跟踪器的网页为代价。 在早期的互联网时代，这并不是一个大问题，但是跟踪器和广告已经变得如此具有侵略性并且毫无侵略性，以至于您几乎需要使用广告拦截器浏览器扩展程序。

Ad Blocker Plus is hugely popular and a browser like Brave boasts about being centered around ad blocking. Oftentimes I'll go to a site and see a modal as me to disable my ad blocker, which got me to thinking about the best way to detect an ad blocker. After a variety of tests and experimentation, I found a really simple way to detect an ad blocker!

Ad Blocker Plus非常受欢迎，像Brave这样的浏览器以围绕广告屏蔽为中心。 通常，我会去某个站点查看禁用我的广告拦截器的模式，这使我开始思考检测广告拦截器的最佳方法。 经过各种测试和试验，我发现了一种检测广告拦截器的非常简单的方法！

Essentially my method attempts to load Google's ad service JavaScript file, and if the request fails, it's likely due to the user having an ad blocker:

本质上，我的方法尝试加载Google的广告服务JavaScript文件，如果请求失败，则很可能是由于用户具有广告拦截器造成的：

// Determines if the user is likely using an ad block extension
async function checkAdBlocker() {
  // Used to cache the result
  let isBlocked;

  async function tryRequest() {
    try {
      return fetch(
        new Request("https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js", {
          method: 'HEAD',
          mode: 'no-cors'
        }))
        .then(function(response) {
          // Google Ads request succeeded, so likely no ad blocker
          isBlocked = false;
          return isBlocked;
        }).catch(function(e) {
          // Request failed, likely due to ad blocker
          isBlocked = true;
          return isBlocked;
        });
    } catch (error) {
      // fetch API error; possible fetch not supported (old browser)
      // Marking as a blocker since there was an error and so
      // we can prevent continued requests when this function is run
      console.log(error);
      isBlocked = true;
      return isBlocked;
    }
  }

  return isBlocked !== undefined ? isBlocked : await tryRequest();
}

// Using the ad block checker
const usingBlocker = await checkAdBlocker();

The logic behind this is as follows:

其背后的逻辑如下：

• Google's ad file, adsbygoogle.js, is the perfect sample file, because it is considered enemy number 1 -- the first file an ad blocker would want to block due to Google's ad service popularity

  Google的广告文件adsbygoogle.js是完美的示例文件，因为它被认为是敌人1-由于Google的广告服务受欢迎程度，广告拦截者希望屏蔽的第一个文件

• The file is also paramount to Google's business so 99.999999999% uptime is practically guarateed
  该文件对于Google的业务也至关重要，因此可以保证99.999999999％的正常运行时间
• There's little chance a network issue would come into play; false positives may come from network connectivity issues or a bad service worker
  网络问题几乎没有发生的机会。 误报可能来自网络连接问题或服务人员状况不佳

• If you don't consider adsbygoogle.js your best sample file, you can easily switching it out for any other URL

  如果您不认为adsbygoogle.js最好的示例文件，则可以轻松地将其切换为其他任何URL

From a content creator perspective, a navigator property that would let you know if an ad blocker was employed would be ideal...but that isn't happening anytime soon (...never, really). Using simple snippets like this, however, provide a reasonable hint toward the user enabling an ad blocker!

从内容创建者的角度来看，使您知道是否使用了广告拦截器的navigator属性将是理想的……但这不会很快发生(...永远不会，真的)。 但是，使用这样的简单代码段，可以为用户启用广告拦截器提供合理的提示！

翻译自: https://davidwalsh.name/detect-ad-blocker

浏览器广告拦截