애드센스 광고 숨기기 - 애드센스 자동 광고 제거 및 숨기기 > 웹제작/운영

사이트 내 전체검색
[멀티검색] 먼저 왼쪽 검색창에 검색어를 입력하세요.
  • 네이버
  • 다음
  • 구글
  • 유튜브
  • 랜덤Go
[멀티검색] 먼저 왼쪽 검색창에 검색어를 입력하세요.
  • 네이버
  • 다음
  • 구글
  • 유튜브
  • 랜덤Go

웹제작/운영

기타활용 애드센스 광고 숨기기 - 애드센스 자동 광고 제거 및 숨기기

페이지 정보

profile_image
작성자 키스세븐
조회 650회 작성일 22-08-15 22:42

본문

애드센스 광고 숨기기

애드센스 자동 광고 제거 및 숨기기


이 방법은 특정 영역에서만 애드센스 자동 광고를 숨기기를 하거나 제거할 때 사용하는 방법이다. 

페이지 중 일부에서만 애드센스 광고를 숨길 때 사용하며, 애드센스에서 제공하는 광고 설정과는 다른 방법이다.



애드센스 광고 숨기기 - 애드센스 자동 광고 제거 및 숨기기



왜 애드센스 숨기기 코드를 쓰는가?


애드센스는 "광고 설정 미리보기"를 이용해서 자동광고를 제거하거나 숨기기 할 수 있도록 제공하고 있다.

그러나, 모든 것이 가능한 것은 아니다. 어떤 것은 "IFRAME에 속한 페이지 영역이므로 미리볼 수 없습니다."라는 메시지만 있을 뿐 불가능하다. 


그렇다고 "제외된 페이지"에서 애드센스 광고를 다 제거할 수는 없는 일이다. 

특정 영역에 아무렇게나 광고가 마구 뜨는 것을 막으려는 것이지, 광고 자체를 다 없애려는 것은 아니기 때문이다. 


그러나 HTML로 간단하게 div를 삽입하고, CSS에서 제어하는 방법이 있다. 단, 삽입된 광고의 클래스 이름을 정확히 알아야 한다.



특정 영역 자동 광고 숨기기


우선 html이나 php파일을 열어서 광고가 뜨지 않기를 바라는 영역에 아래처럼 div로 감싼다.

[code]

<div class="숨기기이름">

   여기가 광고를 숨기려는 영역이다. 그 위와 아래를 div로 감싸는 것이다.

</div>

[/code]


그 후 CSS파일에서 아래처럼 숨기기 코드를 넣는다.

[code]

<style type="text/css">

   .숨기기이름 .google-auto-placed { display:none; }

</style>

[/code]


위의 내용은 핵심을 간추린 애드센스 광고 숨기기 코드다. 자세한 예제는 아래 코드를 가지고 이해하면 될 것이다. 위의 코드와 아래 코드를 비교하면서 파일을 작성해 봐야 한다.


참고로 .google-auto-placed는 애드센스가 삽입되는 코드의 클래스다. 이것을 제어해야 한다.



애드센스 자동 광고 숨기기(제거) 예제


그렇다면, 이것은 어떤 상황에 사용하면 되겠는가?

애드센스 자동광고는 자동으로 판단해서 광고를 넣어준다는 장점이 있다. 하지만 단점도 있는데, 엉뚱한 곳에 계속 광고를 집어넣어서 사이트 디자인을 엉망으로 만든다는 것에 있다. 


예를 들어, 일반적인 사이트는 최상단에 로고가 있고 메뉴가 있다. 그런데 애드센스가 로고도 나오기 전에 광고로 뒤덮어버린다면? 또는 메뉴 사이에 떡하니 큰 광고를 넣어놔서 쓰기 불편하게 되어 버린다면? 그럴 때 이렇게 하는 것이다. 


예를 들어, 아래와 같은 코드가 있다고 하자.

[code]

<div id="hd">

  <div id="topmenu">

    최상단 코드

  </div>

  <div id="hd_wrapper">

    로고와 검색창이 있는 곳

  </div>

  <div class="navi">

    메뉴가 있는 곳

  </div>

</div>

[/code]


그런데 자꾸 애드센스 자동 광고 넣기가 되면서 "hd_wrapper"와 "navi" 사이에 광고가 뜬다고 치자. 

"topmenu"와 "hd_wrapper" 사이에는 광고가 떠도 상관없는데, "hd_wrapper"와 "navi" 사이는 절대 광고가 뜨면 안 된다고 하면 아래처럼 div로 감싸면 되는 것이다.


[code]

<div id="hd">

  <div id="topmenu">

    최상단 코드

  </div>

  <div class="clean_area">

     <div id="hd_wrapper">

       로고와 검색창이 있는 곳

     </div>

     <div class="navi">

       메뉴가 있는 곳

     </div>

  </div>

</div>

[/code]


잘 보면 <div class="clean_area">와 </div>가 더 추가되었다.

그 후에 CSS 파일을 열어서 아래처럼 애드센스 자동 광고를 제어하면 된다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)


[code]

<style type="text/css">

   .clean_area .google-auto-placed { display:none; }

</style>

[/code]


이렇게 하면 clean_area 안에 애드센스 자동 광고가 들어와서 google-auto-placed라는 클래스가 생기면 자동으로 숨기기를 해 주게 된다. 

추천0
총 87개 (1Page)
  • RSS
웹제작/운영 목록
번호 제목 조회 추천 날짜
공지 공지 476 0 03-26
86 그누보드 366 0 02-25
85 그누보드 1506 0 10-17
84 SCRIPT 743 0 10-17
83 CSS 677 0 09-10
82 PHP 1140 0 08-26
81 PHP 735 0 08-21
열람중 기타활용 651 0 08-15
79 그누보드 1228 0 08-05
78 CSS 888 0 08-04
77 HTML 1764 0 07-24
76 그누보드 483 0 07-24
75 HTML 846 0 07-21
74 CSS 717 0 07-18
73 그누보드 663 0 07-09

검색


    허브사이트 "키스세븐"
    [허브사이트란?]
    수많은 사이트와 포털을
    한 번에 모아서
    사용할 수 있는 서비스를 말합니다.