애드센스 광고 게재하기_ 사이드바 우측

지금까지 제 블로그를 기준으로 애드센스 광고 게재하는 방법들을 다루었었는데요,

 

① 애드센스 사이트인증 및 광고 생성하기

② 본문 상단 및 하단

③ 사이드바

④ 본문 우측상단

⑤ 본문 좌측하단(다른글 보기 옆)

⑥ 티에디션

⑦ 어도비 광고 게재하기 Adobe Affiliate Program

 

이렇게 애드센스 광고 게재 방법 대한 포스팅은 끝날 예정이었습니다만.  

언급하지않은 곳 하나가 있죠.

바로 여기. 사이드바 우측 상단!

 

 

지인이 Fastboot v.1.6.2 스킨 제작자 Readiz님의 블로그처럼

사이드바 우측에 광고를 게재하고 싶다고 부탁하여

끙끙대다 방법을 찾긴 찾았는데

제가 이 스킨 디자인 구조를 온전히 파악할 수 없는데다가

언제나 그렇듯... 추측으로 때려맞춰 적용한거라

미처 제가 발견하지 못한 문제점이 있을 수도 있고...

조금만 잘못 건드리면 div가 꼬이더라구요.

게다가 애드센스 규정도 신경써야하니 신중하기도 하구요.

상단 위치라는 점과 사이드바 콘텐츠와의 간격, 콘텐츠와의 비율도 고려해야하고

기타 버튼과 겹쳐도 안 되고(클릭 유도).

 

그래서 이 광고 게재방법을 포스팅 할지 말지 고민을 했습니다만..

뭐, 저도 적용한 지 한달 정도 지났는데 아직까지 큰 문제없이 잘 운영하고 있고

궁금해하시는 분도 여럿계시니

딱 포스팅만큼만 따라하신다면 괜찮지않을까 하여 일단 다뤄볼까합니다.

 

다만, 미리 말씀드리건데

최대한 애드센스 규정을 심사숙고 하였으나 추후 문제가 발생하지 않으리란 보장도 없고.

스킨구조상 미처 제가 발견하지 못한 문제점이 있을 수도 있다는 점 꼭 인지해주시고

응용하시거나 잘못 건드려 문제가 생겨도 책임을 못져요..ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

너무 겁을 줬나요? 히히

혹시 모르니 항상 새로운 도전 전에 스킨 백업은 필수입니다.

 

 

 

#1. 광고 게재 방법

 

광고 게재하는 방법 중 하나를 택하세요.

 

첫번째, Readiz님께서 알려주신 방법을 응용하는 거예요.

처음 로딩되는 창 가로너비에 따라 아예 안 보이거나, 보이도록합니다.

단점은 가로너비 조건에 해당되어 광고가 불러와진 상태에서

창을 줄였을 때(새로고침 하지 않은 상태)에도 여전히 광고가 계속 존재한다는 거예요.

화면이 줄어들 때 사이드바는 자연히 아래로 밀려 내려가지만

사이드바 오른쪽에 게재된 광고는 계속 상단 오른쪽에 있어요.

스크롤과 겹치는 순간이 있어서 좀 거슬리는 군요.

혹시 애드센스 규정 위반사항 중 하나인 클릭유도로 인정되는 건가? 하는 확인되지 않은 고민이 있어요.

 

 

두번째, 애드센스에서 공식적으로 안내하고 있는

반응형광고코드 수정 가이드의 "광고 숨기기" 방법을 응용하는 거예요.

이 방법으로 광고를 게재하면

창 너비가 줄어들 때 새로고침을 하지 않아도 실시간(?)으로 광고가 사라져요.

 

그런데 이것도 단점이 있어요.

애초에 작은 창에서 페이지를 불러오면 당연히 광고가 안 뜰텐데요,

이 상태에서 창 크기를 늘리면 광고 부분이 하얗게 나와요.

 

물론 창을 늘린 후 새로고침하면 가로너비가 넓어졌으니 다시 광고가 송출되긴 하지만

어쨌든 이 빠진 것마냥 보기 싫어하는 사람도 있더라구요.

그리고 이 광고숨기기는 반응형 광고코드 수정에 언급된 부분이어서

고정형에서는 이를 적용하면 안 되는건가? 하는 확인되지 않은 고민이 또 있어요...ㅋㅋ

말 그대로, 확인되지 않은 저만의 걱정입니다. (반응형 코드를 적용하면 필요없는 걱정....;)

 

뭐 아무튼 선택은 자유, 책임은 본인 몫.

1번을 사용 중인 지인도 아직까지 문제없고

2번을 사용 중인 저도 아직까지 문제없습니다.

저는 현재 2번, 고정형 광고코드를 게재 중입니다.

 

 

 

 

#2. 광고 코드 수정하기

 

페이지 상단에 위치하므로 애드센스 규정이 특히 신경쓰입니다.

가로너비에 따라 광고가 보이지 않도록 할게요.

지금 이 포스팅을 보고 계실 정도면

광고 게재 방법에 대해 익숙하실거라 믿고

부연 설명 없이 후다닥 알려드릴테니 후다닥 따라오세요. 

잘 모르시면 

☞ 애드센스 광고 게재하기_ 본문 우측상단 

위 포스팅에서 차근차근 알려드리고 있으니 미리 살펴보시길 바랍니다.

 

 

자, 가로160 높이600 고정형 혹은 반응형 코드를 준비합시다.

코드에서 본인ID,  광고ID 메모해놓으세요.

 

 

첫번째 방법을 택하셨다면, 아래 코드에서

ca-pub-123456789에 본인ID 입력

987654321에 광고ID 입력.

 

사이드바우측용 광고코드_첫번째.txt

<script>
   if(window.getWindowCleintWidth()>=1550){
   document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:inline-block;width:160px;height:600px" data-ad-client="ca-pub-123456789" data-ad-slot="987654321"></ins>');
   (adsbygoogle = window.adsbygoogle || []).push({});
    }
</script>

 

 

 

두번째 방법을 택하셨다면, 아래 코드에서

ABC_01에 광고이름

ca-pub-123456789에 본인ID 입력

987654321에 광고ID 입력.

 

사이드바우측용 광고코드_두번째.txt

<style type="text/css">
.ABC_01 { display:inline-block; width: 160px; height: 600px; }
@media (max-width: 1550px) { .ABC_01 { display: none; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ABC_01 -->
<ins class="adsbygoogle ABC_01"
     data-ad-client="ca-pub-123456789"
     data-ad-slot="987654321"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

 

 

 

 

#3. 사이드바 오른쪽 광고 구역 만들기

 

아래는 사이드바 오른쪽에 광고 게재할 구역을 만들어주는 div 코드 입니다.

위에서 수정한 광고코드를 아래 광고코드에 붙여넣기 합니다.

다른 건 손대지마셔요. 절대~

 

사이드바 우측 광고구역 생성.txt

<div style="float:right; height:0; margin-right:-180px;">
<!-- height:0 => IE Bug fix -->
광고코드
</div>

 

 

 

 

#4. html 삽입하기

 

위 챕터3에서 완성한 코드를 이제 html에 가서 붙여넣읍시다.

관리 < 꾸미기 < HTML/CSS편집 < ①Html 에서 [ bread_nav ] 라고 검색하세요.

아래 화면과 같이 ②<div class="container"> 바로 다음에 붙여넣으시면 됩니다.

 

 

그런데 이렇게 광고를 게재하면, 본문 포스팅에서 좌우 버튼이랑 겹치거든요.

 

클릭유도로 인한 애드센스 규정 위반 가능성이 있으니

디자인을 수정하여 사용하시거나,

저처럼 삭제 혹은 주석처리 하시길 바랍니다.

 

[ 빅 사이즈 ] 검색하셔서, 아래 빨간박스를 ③주석처리하거나, 삭제!

그리고 ④저장!

 

 

자, 끝입니다.

부족한 글 참고하며 따라하시느라 고생하셨습니다. *^^*

성공적으로 게재하셨길 바라요!

 

 

P.S 혹 제 포스팅과 똑같이 광고를 게재함으로 인해

애드센스 규정이나 기타 문제점이 발생할 경우 댓글 달아주시면 감사하겠습니다.

제가 알아낸 방법으로 적용한 데이터가.. 저랑, 지인 단 두명뿐이어서요. 헤헤....