애드블록을 2중으로 막아보자
스크립트를 이용한 애드블록 차단과
애드블록의 시스템을 이용한 차단 방법 둘 다 블로그에 올린적이 있습니다.
관련글
안티 애드블록! 애드블록(AdBlock) 스크립트로 차단
하지만 스크립트를 사용해서 차단한것이 우회법이 슬슬 나오더군요.
그래서 위 두개의 방법을 합쳤습니다.
2중 차단막 건설방법
1) 본문을 표시하는 article_rep_desc를 div id로 묶어주세요.
2) 본문이 애드블록으로 인해 보이지 않을경우 메시지를 나타내야죠?
바로 위에서 adsbygoogle 클래스로 입력한 부분 바로 앞에 adblock-on 클래스를 이용하여 입력해줍니다.
<div id="본문 div의 id값(원하는 값을 사용하세요)">
<div class="adblock-on"> 애드블록이 켜져있을때 나올 메시지, 이미지 </div>
<div class="adsbygoogle">
［##_article_rep_desc_##]
</div>
</div>
3) 아래 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 가 되겠죠?
4) jquery 아래 2개의 스크립트를 추가해줍시다.
HTML/CSS 편집에서 HTML 부분에
jquery 스크립트가 있다면 jquery 스크립트 아래에 아래 내용을 추가해주세요.
jquery 스크립트는 아래에 있는 파란색 소스입니다. 이 소스가 있다면 소스 밑에 아래 내용을 추가하면 됩니다.
<!-- 안티 애드블록 class로 -->
<script>
if ($("div.adsbygoogle").css('display') != 'none') {
$(".adblock-on").remove();
}
</script>
<script src="3번에서 업로드한 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>
jquery 스크립트가 없다면 아래 내용을
</body> 바로 위에 추가해주세요.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!--[if lte IE 8]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <![endif]-->
<!-- 안티 애드블록 class로 -->
<script>
if ($("div.adsbygoogle").css('display') != 'none') {
$(".adblock-on").remove();
}
</script>
<script src="3번에서 업로드한 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>
근데 보통 jquery는 거의 다 있을거에요.
설명
적용모습
- 스크립트로 차단됐을때
- adsbygoogle 클래스로 차단됐을때
관련글
안티 애드블록! 애드블록(AdBlock) 스크립트로 차단
댓글