jquery로 애드블록(AdBlock) 감지하는 4가지 방법

애드블록(광고차단)을 감지하는 방법으로 4가지를 설명하고자 한다.
여러개 적용시키는 걸 추천한다.

하나만으로는 쉽게 뚫린다.

 

1. FuckkAdBlock 스크립트 설치하기

 

github.com/sitexw/FuckAdBlock

 

이름부터 멋진 JS이다.

사용법은 정말 심플 그 자체다.

(참고로 FuckFuckFuckAdBlock 까지 나왔다)

// Function called if AdBlock is not detected
// 애드블록이 발견되지 않았을때 실행 할 함수
function adBlockNotDetected() {
	alert('광고차단 미발견');
}
// Function called if AdBlock is detected
// 애드블록을 발견 하였을때 실행 할 함수
function adBlockDetected() {
	alert('광고차단 발견');
}

// We look at whether FuckAdBlock already exists.
if(typeof fuckAdBlock !== 'undefined' || typeof FuckAdBlock !== 'undefined') {
	// If this is the case, it means that something tries to usurp are identity
	// So, considering that it is a detection
	adBlockDetected();
} else {
	// Otherwise, you import the script FuckAdBlock
	var importFAB = document.createElement('script');
	importFAB.onload = function() {
		// If all goes well, we configure FuckAdBlock
		fuckAdBlock.onDetected(adBlockDetected)
		fuckAdBlock.onNotDetected(adBlockNotDetected);
	};
	importFAB.onerror = function() {
		// If the script does not load (blocked, integrity error, ...)
		// Then a detection is triggered
		adBlockDetected(); 
	};
	importFAB.integrity = 'sha256-xjwKUY/NgkPjZZBOtOxRYtK20GaqTwUCf7WYCJ1z69w=';
	importFAB.crossOrigin = 'anonymous';
	importFAB.src = 'https://cdnjs.cloudflare.com/ajax/libs/fuckadblock/3.2.1/fuckadblock.min.js';
	document.head.appendChild(importFAB);
}

위의 소스를 적당한 곳에 넣으면 된다.
난 홈페이지 끝부분에 넣었다.

 

2. 가짜광고 만들기

<div class="ads">
  <img id="google_ads" src="images/ads.jpg" height="300" width="300" alt="">
</div>

가짜 광고의 한 가지 예시이다.
그냥 ads 이런 단어를 조합해서 넣으면 된다.
엑박이 뜨든 이상하게 뜨든 제대로 안 보여도 상관없다.
어차피 구석에 넣을 거니깐...

 

function chk_adBlock(){
	if($("#google_ads").css('display') == "none") {
		adBlockDetected();
	}

	setTimeout(function(){
		if($("#google_ads").css('display') == "none") {
			adBlockDetected();
		}
	}, 200); // 0.2초후 실행

	setTimeout(function(){
		if($("#google_ads").css('display') == "none") {
			adBlockDetected();
		}
		$("#google_ads").hide(); // 가짜 광고 숨기기
	}, 500); // 0.5초후 실행
}

$(document).ready(function(){ // 페이지가 로드되면 실행
	chk_adBlock();
});

대충 감이 오는가?
애드블록(광고차단)들은 ads라는 글자를 너무너무 싫어해서
'ads'만 들어가면 display:none 시켜버린다. ( 'ad' 도 차단하는지는 모르겠다)
우리는 그걸 역이용하여 내가 만든 가짜 광고를 none 시켜 버리면
애드블록(광고차단)을 사용하는 걸로 감지하는 거다.

 

참고로 setTimout 2개를 사용하는 건 별 이유는 없다.
없으나 있으나 최상단 IF 문 하나로 정상적으로 애드블록(광고차단)을 감지했다.
혹시나 하는 생각에 3번 검사하도록 한 것뿐이다.
본인의 상황에 맞게 사용하면 된다.

 

여기까지만 해도 애드블록(광고차단)을 충분히 걸러낸다고 본다.

 

 

3. 자신의 광고 카운터하기 (애드센스 기준)

 

애드블록(광고차단)이 광고를 숨기니 우리는 그걸 카운터한다.

function chk_googleads_count(){
	var allCount = $('.adsbygoogle').length; // adsbygoogle 총 개수
	var noneCount = 0; // display:none 된 adsbygoogle 총 개수
	var noneRatio = 0.6; // 원하는 비율

	$(".adsbygoogle").each(function() {
		if($(this).css('display') == "none") {
			noneCount++;
		}
	});

	if(noneCount/allCount >= noneRatio) { // 자신이 설정한 비율보다 더 숨겨졌다면
		adBlockDetected();
	}
}

$(document).ready(function() { // 페이지가 로드되면 실행
	chk_googleads_count(); // 원한다면 setTimeout 사용가능
});

전체 adsbygoogle 개수를 세고
그중 display:none 된 adsbygoogle를 센다.그리고 (숨겨진 광고 개수/전체 광고 개수) 계산 후
비율을 따져서 이 정도가 display:none 되었으면 애드블록(광고차단)을 사용한다고 판단하면 된다.
비율은 본인의 웹사이트에 맞게 설정하면 된다.

 

4. 모든 클래스를 adsbygoogle로 변경하기 (애드센스 기준)

 

Simple is Best

그냥 모든 클래스를 adsbygoogle로 바꾼다.

더 설명할게 있는가?...

 

이상 4가지 방법을 알아봤다.

실제로 내가 운영중인 사이트에 적용된건 1번과 2번이다.

그리고 난 여기서 조금 더 작업을 진행했다.
일부 애드블록(광고차단) 프로그램이나 몰지각한 사람들은
FuckAdBlock.js를 무시하도록 설정하여 실행이 안 되는 경우가 있다.

그 말을 바꿔 이야기하면 해당 사용자는 애드블록(광고차단)을 사용 중이라는 뜻이니
저 코드가 실행이 안 되면 홈페이지가 정상적으로 안 돌아가게 하면 된다.

// Function called if AdBlock is not detected
// 애드블록이 발견되지 않았을때 실행 할 함수
function adBlockNotDetected() {
	$("#bo_list").show(); // #bo_list를 보여준다.
	$(".my_page").show(); // .my_page를 보여준다.

	setTimeout(function(){
		$("#google_ads").hide(); // 내가 만든 가짜 광고를 숨긴다.
	}, 600); // 0.6초 후 실행
}

한 가지 예시이다.
난 저 코드를 실행해야 페이지가 정상적으로 보이도록 만들었다.
아니면 핵심적인 javascript 변수를 선언하는 것도 방법 중 하나이다.
본인의 상황에 맞게 사용하면 된다.

 

 

사실 한가지 더 해둔 설정이 있다.

// Function called if AdBlock is detected
// 애드블록을 발견 하였을때 실행 할 함수
function adBlockDetected() {
	cjax_token = false; // 사이트 구동에 필수적인 토큰값
	try	{
		$("#bo_list").html(""); // #bo_list를 완전히 날려라
	}	catch (e)	{

	} // 해당 페이지에 해당 id가 없을경우 대비하여

	try	{
		$(".my_page").html(""); // .my_page를 완전히 날려라
	}	catch (e)	{

	} // 해당 페이지에 해당 class가 없을경우 대비하여
}

display:none 설정을 한다?...

개발자모드나 해당 애드블록(광고차단) 프로그램에서 css 몇개 고치면 다시 보인다.

어차피 안 보여줄거 그냥 날리자

 

 

언젠간 저 함수나 가짜 광고을 허용하도록 할지도 모른다.
그러니 함수명이나 가짜 광고 이름을 랜덤하게 생성하는 것도 좋지 않을까 라는 생각을 해본다.

 

 

마지막으로 애드블록(광고차단)에 대한 내 생각을 적어봤다.

많은 웹사이트나 블로그(이하 웹사이트)에서는

사용자에게 유용한 콘텐츠를 제공하려고 한다.

사용자는 그런 웹사이트에 접속하여
그 콘텐츠로 희로애락을 느끼거나, 다양한 정보를 얻는 등
자신이 필요한 걸 챙겨간다.

하지만 그런 콘텐츠를 만드는 건 무료가 아니다.
홈페이지 유지비, 콘텐츠 제작시간 등 비용이 들어간다.
비용은 하늘에서 떨어지는가?
전부 웹사이트 운영자 주머니와 시간에서 나오는 거다.

 

이런 비용을 절감 또는 보상받고자
사이트 내부에 광고를 달게 된다.
일종의 기브 앤 테이크라고 생각한다.

하지만 일부 몰지각한 사람들은 유용한 콘텐츠는 바라지만
광고를 보기 싫어해서 여러가지 애드블록 유형의 프로그램을 설치해 광고를 차단한다.
광고를 안 볼 권리라는 개소리를 주장한다. (애초에 안 오면 되잖아?)

 

더 웃긴 건 광고 차단 업체에 돈도 준다.
재주는 홈페이지 운영자가 부리고 돈은 광고 차단 업체가 가져가는 웃기는 상황이다.

 

필사적으로 광고를 클릭 안 하는 건 이해하지만
광고 그 자체를 차단하는 건 이해하기 어렵다.
0.00 ... 0001%라는 기대수익이 없어지기 때문이다.

그런 몰지각한 사람들을 차단하기 위해 이 글을 썼다.