자유게시판

[money] 애드블럭 차단 방법 (=애드블럭 유저에게 콘텐츠를 숨기는 방법) (Anti-adblock Know-how) ★★★★★

6,738
※ 애드블록 (AdBlock) : 크롬이나 파이어폭스에서 애드센스 같은 광고 배너를 차단시키는 확장 프로그램 툴.



[기본 작동 원리]
애드블럭이 아래 클래스 발견 시 display="none" 속성 줘 광고 숨기는 걸 역이용한 것입니다.
즉, 광고를 숨기려 할 경우, 콘텐츠에도 동일한 클래스를 부여해 함께 숨겨버리는 방식이죠. 


방법1 - 숨기려는 콘텐츠 요소에 googleAd 클래스 추가

class="googleAd"    

(예) <div class="googleAd"> 




방법2 - 숨기려는 콘텐츠 요소에 adsbygoogle 클래스 추가

class="adsbygoogle"  

(예)  <div class="adsbygoogle">




 방법1:  애드블럭 사용시 콘텐츠 숨기고, 다른 내용 보여주기 


1.
숨기기 처리한 요소 바로 위에 아래 파란색 소스 추가

<div class="adblock-on"> 애드블록 사용 시 보일 내용 </div>
<div class="adsbygoogle"> 애드블록 사용 시 숨길 콘텐츠 </div>



2.
<div class="
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 버전 다를 수 있음. 만약, 제이쿼리 파일이 없다면, 검정색 소스까지 추가.

<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]-->
<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 - 애드블럭 끄고 사용하도록 얼럿창 띄우기 


※ 주의
아래 핑크색 코드 없이 먼저 넣어 테스트 해보시고,
안 되면 jquery 파일 서버에 올린 후 아래처럼 링크 추가.

제이쿼리 파일 버전은 꼭 아래 버전일 필요 없으면,
제이쿼리 파일 링크가 여러 개일 경우 에러날 수 있으니 주의 !!



1.
body 태그에 class="googleAd" 추가 (맨 위 참고)


2.
<head> 태그 안에 아래 코드 추가

<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(){

   if($(".googleAd").height() == 0) {

       alert('애드블럭 끈 후 새로고침 해주세요.\n사이트 유지 너무 힘들어용.ㅜㅜ \n알찬 정보로 보답할게요.\n감사합니다.');

   }

});

</script>




분류 제목
web 로고 무료제작사이트 모음
talk cafe24.net 도메인이 가비아로 넘어가버렸나 보군요. 6
autoset Autoset (오토셋) - 다운・설치・홈페이지 개설 ★★★★★
autoset Autoset (오토셋) - 소개
기본강의 ASP HOME (ASP 소개) - 코드 예 / 파일 확장자 / 용도 / 작동원리
money 애드블럭 차단 방법 (=애드블럭 유저에게 콘텐츠를 숨기는 방법) (Anti-adblock Know-how) …
pc 모니터 화면 회전시키기 (Ctrl + Alt + 방향키)
web Warning: Cannot modify header information - headers already …
web | (세로막대기) 입력법 ★ - jQuery에서 dblclick()에서의 l / PHP에서 OR 의미하는 …
pc 크롬 응답없는 페이지 제거하는 법
talk 안녕하세요...^^ 9
web 토글 (toggle) - 하나의 버튼으로 on off 처럼 두 상태 중 하나를 선택 가능한 걸 말함.
talk 그누보드 가위바위보 도박으로 포인트 다 날렸네요. ㅜㅜ 1
talk 어느 블로거의 통큰 마인드 ^^ 5
web 그누보드5, 배추빌더5, 아미나 설치 순서 비교
talk 텀블러 수집기 vs 인스타그램 수집기 4
web 플레이스홀드잇 (placehold.it) - 더미 이미지 만들기
web 노트패드 플러스에서 커서가 가로로 옆으로 누웠을 때 해결법 (= 커서 삽입 수정 전환법)
talk 구글 이미지 검색에 나오는 이미지 정렬
web 링크 모음 사이트 장단점 (=시작페이지 사이트 제작시 유의 사항)
144/163
목록
 홈  PC버전 로그인 일본어
그누앞단언어
그누뒷단언어
그외코딩언어
그누보드
제작의뢰
Q&A
커뮤니티
웹유틸
회원센터
홈짱닷컴 PC버전 로그인