애드블록(AdBlock)에 대항하는 방법

광고는 사이트를 운영하는 사람들에게 유일한 수익이다. 자본주의 사회에서 광고가 참 거시기 하다만 사이트를 운영하는 사람들에게는.. 어쩔 수 없다. 대항하는 방법을 알아보자.

예비지식: css선택자, jQuery, 기본 HTML지식

애드블록이 작동하는 원리

애드블록은 자기네들만의 필터를 이용해서 광고를 차단한다. url, css 선택자를 통한 html 요소를 필터링할 수 있다. 이 필터는 특정 문법에 의해 만들어지며(https://adblockplus.org/ko/filters) 이런 식으로 만들어진 필터는 txt파일로 저장된다.

html 요소의 경우, 이 txt파일을 불러와 적당한 css를 만들어서 display:none; 속성을 걸어 사용자 입장에서 볼 수 없도록 한다. 내가 사용하는 애드블록의 기본 구독 필터는 다음과 같다.

영어권 기본 구독 필터: https://easylist-downloads.adblockplus.org/easylist.txt

애드블록 구독 필터: https://data.getadblock.com/filters/adblock_custom.txt

한국어 구독 필터: https://secure.fanboy.co.nz/fanboy-korean.txt

애드블록에 대항할 법한 아이디어

jQuery나 자바스크립트 등을 이용해서 광고 요소의 css속성(display)을 검사하여 광고를 차단했는가 안했는가를 판별할 수 있다. 하지만 이렇게 체크를 해서 "애드블록 해제하셈!!"이라는 메세지를 크게 띄워봐야 사용자 입장에서 그 요소를 커스텀 차단하면 그만이다. 그러므로 웹페이지에서 실제로 필요한 컨텐츠를 애드블록이 광고로 인식하게끔 하도록 하여 사용자로 하여금 애드블록을 꺼야 비로소 컨텐츠를 볼 수 있게 하는 방법이 더 적합해 보인다.

영어권 기본 구독 필터에서 적당한 것을 골라보자. 나는 "##.adsbygoogle" 이것을 골랐다. css 선택자 .adsbygoogle의 요소를 모두 차단한다는 뜻인데, 실제 필요한 컨텐츠에 adsbygoogld 클래스를 걸어버리면 애드블록은 이 컨텐츠를 display:none;를 걸어버릴 것이다. 애드블록을 꺼야 비로소 컨텐츠가 보일 것이라는 메세지는 그냥 넣으면 될 것이다.

실제 적용

나는 html을 수정하여 다음과 같이 메인 컨텐츠에 해당하는 요소에 adsbygoogle 클래스를 추가했고, 그 앞에 메세지를 끼워넣었다.

<div class="when-adblock-is-on">광고 차단 플러그인을 해제해야 컨텐츠를 보실 수 있습니다.</div>

<article role="article" class="col-sm-12 hentry adsbygoogle">

이렇게 한 채로 애드블록을 켜고 사이트를 들어가면 메세지 하나만 황량한 채로 있을 것이다.

애드블록을 해제했을 때 위 메세지는 필요없으므로 간단히 jQuery를 이용하여 없앴다. 

사실 난 자바스크립트나 jQuery를 잘 다뤄보지 않아서, 더 쉬운 jQuery를 이용해 적당히 구현했다.

<script>

if ($("article.adsbygoogle").css('display') != 'none') { 

$(".when-adblock-is-on").remove(); 

} 

</script>