몇 줄의 코드로 일반 JavaScript에서 AdBlock을 감지하는 방법

애플리케이션의 영향을 측정하기 위해 분석 도구를 사용하는 것은 오늘날 모든 웹사이트의 일부입니다.

그러나 분석을 차단하는 사용자 수를 측정하는 것이 아마도 훨씬 더 중요할 것입니다.

그리고 운 좋게도 알아내는 것이 그렇게 어렵지 않습니다.

작동 방식

간단히 말해 웹사이트에 가짜 광고 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>

요즘 대부분의 AdBlock이 작동하는 방식은 특정 CSS 클래스(예: class="ad-box" )를 대상으로 하고 여기에 적용display: none하는 것입니다. 이렇게 하면 브라우저에서 광고가 사라집니다.

Always double-check that you don’t break the experience for users that do not use AdBlock.

EasyList blocklist에서 차단에 사용되는 모든 CSS 클래스를 볼 수 있습니다.