종종 올리는 블로그

티스토리 반응형 스킨이 배포되면서 구글 애드센스 반응형 배너를 어떻게 적용해야 효율적으로 적용할 수 있는지 알아봅시다.

블로그 특성에 맞게 구글 애드센스 반응형 배너를 넣으면 되겠지만, 어떻게 배너를 넣어야 유지 및 관리가 편할 수 있을까요?

제가 설정한 방법을 참고하셔서 본인 스타일에 맞게 배너를 넣어보세요.

우선 제 블로그에 적용한 화면을 보시죠.

상단 배너는 해상도에 따라 아래와 같이 배너가 보입니다. 가로폭 100%에 따른 자동 반응형 배너로 설정했습니다.

  1. 850px 이상 해상도 : 850px * 80px 배너

  2. 470px~849px 해상도 : (440px~819px) * (60px~80px) 배너

  3. 320px~469px 해상도 : (290px~439px) * (45px~80px) 배너

중간 배너는 오른쪽에 치우쳐서 보이며, 모바일 화면에 꽉차게 보일 경우에 클릭 유도로 인한 제제를 받을수 있으므로 해상도에 따라 아래와 같이 크기를 설정했습니다.

  1. 850px 이상 해상도 : 336px * 280px 배너

  2. 470px~849px 해상도 : 250px * 250px 배너

  3. 320px~469px 해상도 : 200px * 200px 배너

하단 배너는 글 내용에 방해를 받지 않으므로 아래와 같이 크게 보이도록 설정했습니다.

  1. 470px 이상 해상도 : 336px * 280px 배너

  2. 320px ~ 469px 해상도 : 300px * 250px 배너

우선 구글 애드센스( https://www.google.com/adsense/ ) 광고 단위는 아래와 같이 반응형 3개를 기본 옵션으로 생성했습니다.

1. 상단 배너 넣는 방법

관리 -> 꾸미기 -> HTML/CSS편집 -> HTML 에서 찾기(CTRL + F)를 누르셔서 [##_article_rep_desc_##] 를 찾으세요.

그리고 그 바로 앞에 아래처럼 애드센스 광고단위 [반응형 글상단] 코드를 넣으세요.

                <div class="area_view">
<div>
<!-- 애드센스 [반응형 글상단] 코드를 복사해서 여기부터 -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 반응형 글상단 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 여기까지 본인 코드를 붙여넣으세요. -->
</div>
                  [##_article_rep_desc_##]
                </div>

2. 중간 배너 넣는 방법

관리 -> 꾸미기 -> HTML/CSS편집 -> HTML 에서 맨 끝에 </body> 태그앞에 아래 코드를 넣으세요.

<div id="adsense336x280middle" class="whadsense" style="display:none">
<!-- 애드센스 [반응형 글중간] 코드를 복사해서 여기부터 -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 반응형 글중간 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxxxxxxxx"
     data-ad-format="auto"></ins>
<!-- 여기까지 본인 코드를 붙여넣으시되,
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
위 코드는 빼고 넣으세요.  -->
</div>
<script type="text/javascript">
$(function(){
  if($("#adsensemiddle").length=="1"){
    $("#adsense336x280middle").css("display","inline-block")
    $("#adsensemiddle").append($("#adsense336x280middle"));
    (adsbygoogle = window.adsbygoogle || []).push({});
  }else{
    $("#adsense336x280middle").remove();
    $("#adsensemiddle").remove();
  }
});
</script>

</body>

</html>

관리 -> 꾸미기 -> HTML/CSS편집 -> CSS 에서 맨 끝에 아래 소스를 넣으세요.

/* adsense */
#adsense336x280middle { float:right; margin:10px 0 10px 10px;}
.whadsense{width:346px; height:300px;}
.whadsensebottom{width:336px; height:280px;}
#adsense336x280bottom { margin:0 auto;}
@media (min-width: 320px) {
	.whadsensebottom{width:300px; height:250px;}
	.whadsense {width: 210px; height: 220px; }
}
@media (min-width: 470px) {
	.whadsensebottom{width:336px; height:280px;}
	.whadsense {width: 260px; height: 270px; }
}
@media (min-width: 850px) {
	.whadsensebottom{width:336px; height:280px;}
	.whadsense {width: 346px; height: 300px; }
}

그런 다음에 블로그 글을 작성할때 넣고 싶은 위치에 <div id="adsensemiddle"></div> 만 넣으면 됩니다.

아래 스크린샷을 참고하세요.

그러면 위 스크린샷처럼 해당 위치에 자동으로 [반응형 글중간]가 들어갑니다. 넣고 싶지 않으면 안넣어도 해당 배너는 출력되지 않으므로 문제없습니다.

이렇게 글 작성할때 넣어두면, 나중에 빼고 싶을때 HTML 소스에서 위 코드만 제거하면 전체 글에서 뺄수도 있고, 아니면 다른 광고 단위를 한꺼번에 넣을 수도 있어서 애드센스 유지 및 관리가 편리합니다.

3. 하단 배너 넣는 방법

관리 -> 플러그인 -> 플러그인 설정으로 들어가셔서 코드 넣는부분에 애드센스 광고단위 [반응형 글하단] 코드를 넣으시면 되는데 아래소스처럼 넣어야 합니다.

<div style="padding:15px 0 15px 0">
<div id="adsense336x280bottom" class="whadsensebottom">
<!-- 애드센스 [반응형 글하단] 코드를 복사해서 여기부터 -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 반응형 글하단 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxxxxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 여기까지 본인 코드를 붙여넣으세요. -->
</div>
</div>

[반응형 글상단]처럼 HTML소스에 안넣고 이렇게 플로그인 설정에서 [반응형 글하단] 배너를 넣은이유는, HTML 소스에서 글하단 배너를 넣으면 애매한 위치(공유하기 아이콘 위)에 들어가기 때문에 플러그인 설정에서 넣었습니다.

이제 모바일 환경에서 테스트해 볼까요? ( 다음 트로이 랩 http://troy.labs.daum.net/ )

[삼성 갤럭시 노트4] - 상단배너

[삼성 갤럭시 노트4] - 중간배너

[삼성 갤럭시 노트4] - 하단배너

[삼성 갤럭시 S5, 노트3] - 상단배너

[삼성 갤럭시 S5, 노트3] - 중간배너

[삼성 갤럭시 S5, 노트3] - 하단배너

[아이폰6 가로화면] - 상단배너

[아이폰6 가로화면] - 중간배너

[아이폰6 가로화면] - 하단배너

LG는 제가 쓰는 G4가 없네요. ㅠㅠ

[엘지 G3] - 상단배너

[엘지 G3] - 중간배너

[엘지 G3] - 하단배너

[PC 1024 * 768 해상도] - 상단배너

[PC 1024 * 768 해상도] - 중간배너

[PC 1024 * 768 해상도] - 하단배너

모바일 페이지에서 위와 같이 보이면 제대로 설정된것입니다.

잘 안되시거나 문의사항이 있으시면 언제든지 댓글 남겨주세요. 성심성의껏 답변드리겠습니다.

감사합니다. ^^