본문 바로가기

블로그 관련 정보/애드센스

반응형 스킨을 사용한다면 애드센스도 반응형으로 설정하세요.

반응형 스킨을 사용한다면 애드센스도 반응형으로 설정하세요.
광고 차단 플러그인을 꺼 주시면 블로그 운영에 도움이 됩니다. ^^

지금 잡다한 세상 블로그는 반응형 스킨을 테스트중에 있습니다.

 

사용할 반응형 스킨은 FastBoot v1.6.1 입니다. 깔끔하고 속도적인 면에서 맘에 드는 스킨입니다.

 

반응형 스킨을 테스트하면서 애드센스도 반응형이 달아 테스트 중입니다. 일반 애드센스를 반응형스킨에 달아서 사용하면 정책위반에 걸리기 쉽답니다.

 

이유는 반응형스킨은 접속하는 기기 화면 해상도에 따라 자동으로 화면이 조절되는데 애드센스 광고를 일반 광고로 달아두면 광고 크기대로 보여주니 문제가 됩니다.

 

애드센스 반응형 설치 & 사이즈 지정하기

 

애드센스 반응형을 만들고 블로그에 적용하는 방법을 간단하게 알아 보겠습니다. 애드센스 관리 페이지에서 반응형 광고 단위를 만들어 보겠습니다.

 

새 광 단위를 눌러 주세요.

 

광고 크기지정에서 ' 반응형- 광고 단위 (베타)'를 선택하시고 '저장 및 코드 생성'을 클릭해 주세요.

 

모드 값이 '스마트 크기 조정(권장'이 기본값인데 눌러서 변경해 주세요.

'고급(코드 수정 필요)'을 선택하시면 됩니다. 이렇게 하는 이유는 CSS STYLE을 수정해서 해상도에 따라 맞는 애드센스를 출력하기 위함 입니다.

 

<style>
.my_adslot { width: 320px; height: 50px; }
@media(min-width: 500px) { .my_adslot { width: 468px; height: 60px; } }
@media(min-width: 800px) { .my_adslot { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 반응형 사이드바 -->
<ins class="adsbygoogle my_adslot"
     style="display:inline-block"
     data-ad-client="ca-pub-숫자들"
     data-ad-slot="숫자들"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

제가 글을 진행하면서 만든 반응형 애드센스 코드 입니다. 위 소스를 보면 500px ,800px 두가지 해상도만 지정되 있는데 이것을 늘려  다양한 기기에 맞는 애드센스를 출력하게 할수 있습니다.

 

<STYLE>
.my_adslot { width: 336px; height: 280px; }
@media(min-width: 320px) { .my_adslot { width: 200px; height: 200px; } }
@media(min-width: 600px) { .my_adslot { width: 300px; height: 250px; } }
@media(min-width: 768px) { .my_adslot { width: 336px; height: 280px; } }
@media(min-width: 1200px) { .my_adslot { width: 336px; height: 280px; } }
</STYLE>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 반응형 사이드바 -->
<ins class="adsbygoogle my_adslot"
     style="display:inline-block"
     data-ad-client="ca-pub-숫자들"
     data-ad-slot="숫자들"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script> 

 

제가 사용하는 STYLE 입니다. 간단하게 설명을 드리자면

 

  • my_adslot { width: 336px; height: 280px; } - 익스플로러 7에서 또는 반응형을 제대로 인식 못했을때 기본값으로 보여주는 애드센스 사이즈
  • media(min-width: 320px) - 화면 사이즈 320px ~ 600px 까지 보여주는 애드센스 크기
  • media(min-width: 600px) - 화면 사이즈 600px ~ 768px 까지 보여주는 애드센스 크기
  • media(min-width: 768px) - 화면 사이즈 768px ~ 1200px 까지 보여주는 애드센스 크기
  • media(min-width: 1200px) - 화면 사이즈 1200px 이상부터 보여주는 애드센스 크기

 

위 설명을 참고하셔서 블로그에 적용하시면 됩니다. 전 반응형스킨 + 반응형 애드센스가 처음이라 STYLE을 세세하게 적용하긴 했는데 좀더 사용해 보고 줄일 부분은 줄일려고 합니다.

 

 

반응형 스킨을 테스트중이긴 한데 이 블로그에 적용을 해야하는것인지 아닌지 고민하고 있답니다.

 

애드센스 수익이 꾸준히 늘어나는 지금 (방문자는 동일)스킨 변경에 따른 변화를 짐작할수 없기에 조심 스럽네요.

 

아직 반응형 스킨 수정이 덜되 시간이 있긴 하지만 나름 열심히 고민중이랍니다.

 

반응형 스킨으로 교체한다고 애드센스 수익 감소가 있을거란 생각은 안하지만 애드센스를 반응형으로 달아야 하니 그 부분에서 어찌될지 의문 입니다. ^^

Comments

  • 군단장 2014.06.20 15:35 댓글주소 수정/삭제 댓글쓰기

    안녕하세요

    양옆에 같은 사이즈 광고가 서로 나란히 출력되게 하는 코드는 안보이는것같은데요?.....

    혹시 시간이 되시면 코드 보내주실수 있으신가요?..

    저는 양옆에 나란히 네모상자 광고가 화면축소되면 같이 축소되어서 출력을 희망합니다..

    • 제가 글 작성시간이 좀 부족하네요.^^
      http://nubiz.tistory.com/460 이 링크를 참고해 보세요.

      블로그에 상당히 도움이되는 글 많습니다.