※ 애드블록 (AdBlock) : 크롬이나 파이어폭스에서 애드센스 같은 광고 배너를 차단시키는 확장 프로그램 툴.
[기본 작동 원리]
애드블럭이 아래 클래스 발견 시 display="none" 속성 줘 광고 숨기는 걸 역이용한 것입니다. 즉, 광고를 숨기려 할 경우, 콘텐츠에도 동일한 클래스를 부여해 함께 숨겨버리는 방식이죠.
방법1 - 숨기려는 콘텐츠 요소에 googleAd 클래스 추가
class=" googleAd " <div class=" googleAd ">
방법2 - 숨기려는 콘텐츠 요소에 adsbygoogle 클래스 추가
class="adsbygoogle " <div class="adsbygoogle ">
방법1 : 애드블럭 사용시 콘텐츠 숨기고, 다른 내용 보여주기
<div class="adblock-on"> 애드블록 사용 시 보일 내용 </div>
<div class="adsbygoogle"> 애드블록 사용 시 숨길 콘텐츠 </div>
2. adsbygoogle "> 요소가 display=none 속성이 아닌 상태면 (=즉, 애드블럭 사용 중 아니면), class=" adblock-on" 요소를 제거.
<script>
if ($("div.adsbygoogle ").css('display') != 'none') {
$(".adblock-on").remove();
}
</script>
※ adsbygoogle 클래스를 이용해 콘텐츠 숨긴 경우 가정. 만약, googleAd 클래스 사용시 googleAd 클래스 사용해야 함.
3.
위 코드를 기존 jQuery 코드 바로 밑에 아래처럼 추가. (보통, head.sub.php 파일에 있음)
※ 홈피에 따라 jQuery 버전 다를 수 있음. 만약, 제이쿼리 파일이 없다면, 검정색 소스까지 추가.
<!--[if lte IE 8]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <![endif]-->
<script>
if ($("div.adsbygoogle").css('display') != 'none') {
$(".adblock-on").remove();
}
</script>
예제
<div class="content-wrap adsbygoogle " id="content">
애드센스
</div>
<div class="adblock-msg">
<div>광고 차단 플러그인(AdBlock) 꺼주세요. ㅜㅜ</div>
</div>
<script>
if ($(".content-wrap.adsbygoogle").css('display') != 'none') {
$(".adblock-msg").remove();
}
</script>
방법 2 - 애드블럭 끄고 사용하도록 얼럿창 띄우기
※ 주의 class="googleAd" 추가 (맨 위 참고)<script type="text/javascript" src="<?php echo G5_URL?>/js/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(){
if($(".googleAd").height() > 0) {
//alert('No AdBlock :)');
} else {
alert('애드블럭 끈 후 새로고침 해주세요.\n사이트 유지 너무 힘들어용.ㅜㅜ \n알찬 정보로 보답할게요.\n감사합니다.');
}
});
</script>
<script> <script type="text/javascript" src="<?php echo G5_URL?>/js/jquery-1.8.3.min.js"></script>
$(document).ready(function(){
== 0) {
alert('애드블럭 끈 후 새로고침 해주세요.\n사이트 유지 너무 힘들어용.ㅜㅜ \n알찬 정보로 보답할게요.\n감사합니다.');
});
</script>
