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

앞의 포스팅에서처럼, 티스토리 플러그인으로 본문 상단과 하단에 광고를 게재할 수 있습니다.

하지만 상단의 경우 본문과 광고가 이질적이게 느껴지는 것이, 음 뭔가 1% 아쉬워요.

광고 효과도 높이고 보기에도 좋게끔 본문 우측 상단에 광고를 게재해봅시다.

 

 

 

#1. 애드센스 정책 위반사항 

 

대뜸 정책 위반사항이라하여 흠칫 하실테죠.

그동안 이슈가 되었던 광고갯수는 제한이 풀렸습니다만,

콘텐츠와 광고의 비율이라던가 콘텐츠의 내용 등 그 외에도 많은 규정 사항이 있습니다.

특히, 페이지 상단에 광고를 게재할 때에는 아래 사항에 유의해야 합니다.

중요한 부분이므로 반드시 숙지하고 갑시다.

 

 

이해하셨나요?

모바일은 화면이 작아서 스크롤을 내리며 포스팅을 봐야하잖아요.

그런데 딱 처음 보여지는 화면은 광고가 다 차지하고,

정작 방문자가 보고자 했던 컨텐츠는 스크롤을 내려야만 볼 수 있다면,

애드센스 정책을 위반한다는 얘기입니다.

모바일에서 300x250 이상의 광고단위가 허용되지 않는 다는 점, 별표 다섯개 땅땅!!!!

 

 

 

#2. 페이지 상단 광고

 

자, 그럼 애드센스 정책을 준수하기 위해서

페이지 상단에 광고를 게재할 때에는 화면 비율에 따라 광고 크기가 달라지도록 해야겠다. 는 것은 감이 잡히셨겠지요.

어떻게 할까요?

 

저희는 두 가지 광고 크기를 가지고 게재할 거예요.

① 데스크탑용 336x280

② 모바일용 200x200

 

여기서

데스크탑용은 가로너비가 768px 이상일 때,

모바일용은 가로너비가 768px 미만일 때를 말합니다.

 

즉, 페이지를 로딩할 때 화면 가로너비를 인식하여

데스크탑용이면 336x280을 띄우고 모바일용이면 200x200을 띄울거란 얘기!

요기까진 완전 이해하셨죠?

 

이제 본격적으로 광고를 게재할텐데요, 두 가지 방법이 있습니다.

 

하나, 반응형 광고 코드를 수정하여 게재하는 방법(구글 애드센스 공식적인 방법)

둘, 고정형 광고 코드를 수정하여 게재하는 방법 (Fastboot 스킨 제작자 Readiz님 포스팅)

 

첫번째는

반응형 코드가 모든 기능을 수행하지 못할 경우를 위해

구글 애드센스에서 공식적으로 안내한 반응형 광고 코드 변형 방법이므로,

애드센스 프로그램 정책에 위배되지 않습니다.

 

두번째는

저는 아직 잘 모르지만 Readiz님의 포스팅을 참고하면, 애드센스 반응형 광고코드에는 이런저런(?) 문제가 많다고 합니다.

그래서 고정형 광고 코드를 화면 폭에 맞추어 쓸 수 있게끔 설명해두셨더라구요.

이 방법은 애드센스 홈페이지에서 찾을 수 없었습니다.

사실 저 같은 경우에는 공식적인 코스로 가는 것이 항상 마음 편하긴 한데요,

Readiz님께서 공식적인 방법(첫번째 방법)을 염두에 두지 않았을리 없고

전문가의 입장에서 더 효율적인 방법을 선택하셨으리란 생각이 듭니다.

게다가 애드센스 정책에 위배되었다면 아마 포스팅을 내리셨겠죠?

 

어느 것이 더 옳다라고 말할 정도의 지식은 없는지라....ㅋ

둘 중 어느방법을 택하실지는 여러분께서 자유로이 판단하시면 됩니다.

 

비단 우측상단 뿐만 아니라 앞으로 광고 게재하는데에 유용할테니

반응형 광고 코드 수정 방법 위주로 설명드리고,

Readiz님 고정형 광고를 이용한 방법은 간략하게 포스팅 할게요.

 

 

 

#3. 반응형 광고 코드 수정하는 방법

 

CSS를 이용해서 화면폭에 따른 광고 크기를 정의할건데요,

조금 복잡해보이지만 차근 차근 따라오시면 어렵지 않을 겁니다.

 

우선 본인의 반응형 광고 코드를 가져옵시다.

아래 그림과 같은 형태일 거예요. 여기서 우리가 주목해야할 부분은 저 빨간 박스입니다.

data-ad-client 는 본인ID

data-ad-slot 은 광고ID 입니다.

 

 

메모장에 본인ID와 광고ID를 따로 메모 해놓으시구요.

 

첨부된 텍스트 파일을 열어보세요.

반응형 광고 수정하기_화면폭당.txt

 

텍스트 파일은 활용하기 편하도록, 입력해야 할 부분에 한글로 표시를 해뒀습니다.

아래 예시를 참고하여 해당사항을 입력해주시면 됩니다.

<style>
.ABC_01 { width: 200px; height: 200px; }
@media(min-width: 768px) { .ABC_01 { width: 336px; height:280px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ABC_01 -->
<ins class="adsbygoogle ABC_01"
     style="display:inline-block"
     data-ad-client="ca-pub-123456789"
     data-ad-slot="987654321"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

ABC_01 은 변형하는 광고코드의 고유한 이름입니다.

관리가 편하도록 임의로 정해주시면 되는데,

영문자로 시작해야하며, 숫자, 밑줄을 포함할 수 있습니다.

다른 광고코드를 수정할 땐 각기 다른 이름을 사용해야합니다. 중복사용 안 돼요!

<style>의 광고코드이름 앞의 점(.) 안 지워지게 조심하구요... ㅋ

 

ca-pub-123456789와 987654321 여긴 뭘 입력해야하실지 딱 아시겠죠?

메모해둔 본인ID와 광고ID를 각각 입력하시면 됩니다.

 

굳이굳이굳이 설명하자면

<style>에서 ABC_01의 광고크기 속성을 정의합니다.

"ABC_01은 200x200 사이즈이며, 화면폭이 768이상이 되면 336x280으로 된다."

<script>에서는 애드센스 광고를 불러오는 거구요.

 

완성하셨으면 메모장에 잘 저장해두세요.

 

 

 

#3. Fastboot 본문 우측 상단 광고 게재하기

 

먼저 Fastboot 스킨의 본문 우측 상단에 광고 넣을 자리를 마련해요. 

Fastboot 본문우측상단 광고구역 만들기.txt

 

<div style="float:right; margin:0px 0px 0px 10px;">

</div>

div로 광고가 들어설 자리를 만드는 거에요.

float으로 오른쪽에 붙게 하고, 애드센스 정책을 준수하기 위해 왼쪽편에 margin(여백)을 10px 줍니다.

 

관리 < 꾸미기 < HTML/CSS편집 < ①Html 에서 < 포스트 본문 내용 >을 검색하여

아래 그림과 같이 블로그 본문내용 치환자 [＃＃_article_rep_desc_＃＃] 바로 위에

div 태그를 ②붙여넣기 해주세요.

 

잘 따라오고 계시죠? 곧 끝나요~ 힘내요!

금방 붙여넣은 div안에 ③수정한 반응형 광고코드를 붙여넣으세요.!!

 

만약 반응형 코드를 다르게 수정해서 바꾸고 싶다면

div 구역은 내버려두고, 저 부분만 바꾸면 되겠죠?

추후 응용 및 수정을 위해서

이해하는데 도움이 되시라고 굳이 스텝 바이 스텝으로 설명드렸습니다.

 

헷갈리실까봐, 최종 스샷~!

본문 우측 상단 애드센스 광고코드는 이렇게 들어갑니다. 

④저장하세요~.

 

 

 

한 번 확인해볼까요?

가로 768px 이상 데스크탑용 화면의 광고크기 입니다.

 

아래는 가로 768px미만의 모바일용 화면입니다. 잘 적용 되었네요!!

 

 

 

#4. 본문 우측 상단에 고정형 광고코드 게재하기

 

이번에는 Readiz님의 포스팅을 바탕으로, 고정형 광고코드 게재하는 방법을 다뤄볼게요.

Readiz 관련글 : http://blog.readiz.com/205

 

반응형 광고 코드 수정하여 게재하는 방법을 숙지하고 스크롤을 내리셨으리라

믿어의심치 않으며. ㅋㅋㅋㅋㅋㅋ

설명은 생략하고 스피디하게 진행하겠습니다.

 

우선 고정형 광고코드 2개가 있어야겠죠.

336x280과 200x200 광고 코드를 생성하세요.

 

반응형 광고 수정할 때 했던 것과 똑같이 본인ID와 광고ID를 메모해두세요.

 

 

첨부한 텍스트 파일을 열어보세요.

Fastboot 우측상단 고정형광고.txt

 

광고코드 자리를 마련하는 div와 광고코드를 합쳐놨어요.

아래 예시를 참고하여 빨간 부분에, 메모해두었던 본인ID와 광고ID를 넣으세요.

<div style="float:right; margin:10px;">
   <!-- 데탑용 -->
   <script>
   if(window.getWindowCleintWidth()>=768){
   document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-123456789" data-ad-slot="987654321"></ins>');
   (adsbygoogle = window.adsbygoogle || []).push({});
    }
   </script>
</div>

<div style="text-align:center;width:100%;">
   <!-- 모바일 상단 -->
   <script>
    if(window.getWindowCleintWidth()<768){
document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:inline-block;width:200px;height:200px;margin:auto;margin-bottom:10px;" data-ad-client="ca-pub-123456789" data-ad-slot="987654321"></ins>');
   (adsbygoogle = window.adsbygoogle || []).push({});
   } </script>
</div>

잘 보시면 div가 데탑용, 모바일상단 두 개 있습니다. 광고ID 넣을 때 주의하세요!

데탑용에 336x280 광고ID, 모바일상단에 200x200 광고ID 넣으셔야합니다.

 

 

위 광고코드를 어디에 넣느냐, 하면

마찬가지로

관리 < 꾸미기 < HTML/CSS편집 < ①Html 에서 < 포스트 본문 내용 >을 검색하여

아래 그림과 같이 블로그 본문내용 치환자 [＃＃_article_rep_desc_＃＃] 바로 위에

붙여넣기하고 저장하시면 됩니다.!!!

 

후! 끝났어요.

 

반응형 광고 코드를 수정해서 넣든, 고정형 광고 코드를 수정해서 넣든

처음 로딩할 때 페이지 너비를 인식하여 크기가 결정되므로

도중에 창을 줄이거나 늘인다한들 광고크기는 변하지 않습니다.

새로고침하셔서 확인해보시길 바랍니다.

 

고생하셨습니다.

다음 포스팅에서는 좌측 하단에 광고를 게재해봐요!

 

 

추가 : 본문 우측상단 광고와 글상자 겹침을 해결하고 싶으시면

[블로그 관리] - 글상자 겹침 해결하기 

포스팅을 참고해주세요.