애드센스 반응형 광고 크기 간편하게 수정하기

다음은 애드센스 고객센터에서 제공하는 화면 폭당 정확한 광고 단위를 설정하는 수정된 반응형 광고 코드의 예이다.

화면 폭 500픽셀 이하: 320x100 광고 단위

화면 폭 500~799픽셀: 468x60 광고 단위

화면 폭 800픽셀 이상: 728x90 광고 단위

<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>

이 예에는 모바일, 태블릿, 데스크톱 3개 유형의 화면 폭에 맞춰 개별적으로 광고 단위 크기를 설정하도록 반응형 코드를 수정하는 방법이 나와 있지만, 위 예를 봤음에도 불구하고 응용이 어려울 수 있다.

나도 이전에 위 예시를 복잡하게 보고 헤맸던 적이 있다. 애드센스 광고를 사이드바에 원하는 크기로 넣기 위해 구글링을 하다가 나처럼 애드센스 광고 코드를 수정하기 어려워하는 사람이 유용하게 이용할 수 있을법한 사이트를 발견했다. 나 또한 사이트의 도움을 받았는데, 뭐하라 님이 제작하신 광고 단위 코드를 간편하게 변환을 도와주는 사이트이다.

위 링크를 클릭해 사이트로 이동해서 설명과 주의사항을 잘 읽어보고 이용하자.