본문 바로가기
BLOG

애드센스, 반응형 광고 크기 설정 방법

by styleforce 2019. 7. 22.

블로그의 여기저기에 광고를 많이 배치한다고 해서 애드센스의 수익을 극대화 시킬수 없습니다. 광고가 너무 많게 되면 포스팅의 가독성이 현저히 떨어져 다시는 오기 싫은 블로그가 될 것입니다. 블로그의 적당한 위치에 적당한 크기의 광고를 효율적으로 배치해야 합니다.

 

 

애드센스 광고 크기 변경하는 방법

google에서 반응형 광고 코드 수정 방법을 공식적으로 제공하고 있습니다. 이를 조금만 응용하면 모바일, 태블릿, PC에서 원하는 크기의 광고를 송출할 수 있습니다. 미디어쿼리, CSS에 대해서 아주 조금만 수정할 수 있다면 쉽게 변경이 가능합니다. 다음은 구글의 예시입니다.

 

<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:inline-block"
     data-ad-client="ca-pub-XXXXXXX11XXX9"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

 

기존의 반응형 광고 코드에서 style 부분을 추가 한것입니다. 애드센스 코드의 client와 slot에 본인의 광고코드를 넣어준 후, dispaly:block을 inline-block로 변경 해주어야 합니다.

 

'example_responsive_1'은 광고의 이름입니다. 원하시는 이름으로 모두 동일하게 변경하면 됩니다. 위의 예시에서는 총 5군데를 변경해줘야 합니다. 이름은 영문, 숫자, 언더바로 중복되지 않게 만들어야 하며, 영문자로 시작해야 합니다.

 

광고의 기본 크기를 320*100으로 설정을 하며, 가로폭 500px 이상의 화면에서는 468*60 크기의 광고를 송출하고, 가로폭 800px 이상의 화면에서는 728*90의 크기로 광고를 송출하겠다는 설정입니다. 특정 화면에서 광고를 송출하기 싫으면, 'display: none;'으로 설정 하면 광고가 송출되지 않습니다.

 

google adsense

 

미디어쿼리와 CSS에 대한 아주 작은 지식만으로도 조금만 응용하여 다양한 형태로 광고를 송출 할 수 있습니다. 아주 조금만 시간을 투자해 보시면 좋을것 같습니다.

 

 

태그

댓글4