Как обнаружить AdBlock в обычном JavaScript с помощью нескольких строк кода

Использование инструментов аналитики для измерения влияния вашего приложения является частью каждого веб-сайта в наши дни.

Но измерение того, сколько пользователей блокируют вашу аналитику, вероятно, еще более важно.

И, к счастью, выяснить это не так уж сложно.

Как это работает

В двух словах — вам нужно добавить поддельную рекламу div на ваш сайт и проверить, видна она или нет.

На практике:

Добавьте пустой div, расположенный в правом верхнем углу вашего сайта. Таким образом, он не будет беспокоить пользователей, которые не используют AdBlock.
Желательно также добавить aria-hidden="true", чтобы не показывать эту фальшивую рекламу пользователям, использующим средства обеспечения доступности.
После загрузки страницы проверьте, виден ли этот div с фальшивой рекламой или нет.

<div class="ad-box" style="position:fixed;top:0;left:0;" aria-hidden="true">
  &nbsp;
</div>
<script>
  setTimeout(function () {
    var adBoxEl = document.querySelector(".ad-box")
    var hasAdBlock = window.getComputedStyle(adBoxEl)?.display === "none"
    // ... save to DB
  }, 2000)
</script>

Вход в полноэкранный режим Выход из полноэкранного режима

Большинство AdBlocks работают следующим образом: они выбирают определенные классы CSS (например, class="ad-box") и применяют к ним display: none. Таким образом, реклама исчезает в вашем браузере.

Всегда перепроверяйте, что вы не нарушаете работу браузера для пользователей, которые не используют AdBlock.

Вы можете увидеть все CSS-классы, которые используются для блокировки, в блок-листе EasyList.