잡동사니 & 정보/블로그

안티 애드블록! 애드블록(AdBlock) 스크립트로 차단

퍼스나콘 2015. 5. 5.



저번 방식과 이번 방식의 차이?

이전에 작성한 애드블록 차단의 작동 순서는 본문내용, 애드블록 경고 이미지 모두 로딩한 다음 
애드블록이 발견되면 애드블록 경고 이미지를 띄우고 
애드블록이 발견되지 않으면 애드블록 경고 이미지를 지우는 방식이었습니다.
(본문 내용은 애드블록에 의해 자동으로 지워집니다. 애드블록 필터 div로 묶었으니 말이죠.)

 

그런데 그 방식이 애드블록 경고 메시지를 못띄우는 경우가 간혹 있었습니다.


이번에 소개할 방식은 본문내용을 다 로딩한 다음
애드블록이 발견되면 본문을 지우고 애드블록 경고 이미지를 띄우며
애드블록이 발견되지 않으면 아무것도 행동하지 않는 스크립트 입니다.

그래서 경고 메시지가 안뜨는 경우가 없습니다. 다만 로딩하는 순간은 본문내용이 번쩍 보였다가 사라지는경우가 있습니다.

둘 중에 더 마음에 드는 방식으로 사용하시면 되겠네요. 어쨌든 새로운 방식 소개하겠습니다.



애드블록 차단하는 방법

1) 본문을 표시하는 article_rep_desc를 div id로 묶어주세요.
이때 id값은 본인이 원하는 값을 사용하면 됩니다.
※ div id가 이미 사용하고 있다면 값을 바꾸지 마세요! 스킨에 미리 설정된 css설정이 있을수도 있습니다.
    미리 설정되어 있다면 설정된 id값을 그대로 사용하면 됩니다.

<div id="본문 div의 id값(원하는 값을 사용하세요)">
[##_article_rep_desc_##]
</div>

 


 

 

2) 아래 js파일을 다운받아 블로그 관리자 페이지 - HTML/CSS 편집 - 파일 업로드를 통해 업로드 합니다.

 adblockblock.js 

 

 

js 파일 주소는 파일업로드 페이지에서 아무 이미지 파일을 선택하고 미리보기에 뜨는 이미지에 마우스 오른쪽 클릭 -> 속성을 통해 주소를 알 수 있습니다.

예를들어 이미지 파일 주소가 다음과 같습니다. http://cfs.tistory.com/custom/blog/xxx/xxxxxxx/skin/images/image.jpg

그렇다면 업로드한 파일은 http://cfs.tistory.com/custom/blog/xxx/xxxxxxx/skin/images/업로드한파일이름 이 됩니다.

 

저의 경우 http://cfs.tistory.com/custom/blog/xxx/xxxxxxx/skin/images/adblockblock.js 가 되겠죠?

 

 


3) HTML편집에서 jquery 스크립트 밑에 아래 스크립트를 붙혀넣으면 됩니다.

.


<script src="2번에서 업로드한 js파일 주소"></script>

<script>

function adBlockDetected() {

            var element = document.getElementById("본문 div의 id값");

            element.innerHTML = '<img src="애드블록이 발견됐을 경우 본문 위치에 띄울 이미지 주소">';

}

function adBlockNotDetected() {

}

if(typeof fuckAdBlock === 'undefined') {

adBlockDetected();

} else {

fuckAdBlock.onDetected(adBlockDetected).onNotDetected(adBlockNotDetected);

}

function checkAgain() {

document.getElementById('adb-actived').style.display = 'none';

document.getElementById('adb-not-actived').style.display = 'none';

fuckAdBlock.onDetected(adBlockDetected).onNotDetected(adBlockNotDetected);

setTimeout(function() {

fuckAdBlock.check();

}, 500);

}

</script>

 


적용모습

  • 애드블록이 발견되지 않았을 경우



  • 애드블록이 발견되었을 경우



댓글