애드블록(광고차단)을 감지하는 방법으로 4가지를 설명하고자 한다.
여러개 적용시키는 걸 추천한다.
하나만으로는 쉽게 뚫린다.
1. FuckkAdBlock 스크립트 설치하기
이름부터 멋진 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%라는 기대수익이 없어지기 때문이다.
그런 몰지각한 사람들을 차단하기 위해 이 글을 썼다.
'복사금지 블로그 짜증나서 만든 개발문서' 카테고리의 다른 글
로컬에서 테스트 할때 휴대폰으로 접속하고 싶을 때 (0) | 2023.02.20 |
---|---|
아파치, 우분투 서비스 상태 확인, 시작, 중지, 재시작 명령어 (0) | 2021.03.10 |
Let's encrypt 와일드 도메인 설정하기 (0) | 2021.03.09 |
Let's encrypt 설치시 아파치를 못 찾는 오류날때 (cannot find apache executable apachectl) (0) | 2021.03.08 |
안드로이드 액션바가 제대로 적용 안 되는 문제 해결 (0) | 2021.03.07 |