구글 애드센스, 반응형 광고 단위 적용 방법

최근 미디어 기기의 특성에 맞추어 데스크톱 뿐만 아니라 모바일 기기에서도 자동으로 반응하는 반응형웹이 큰 인기를 끌고 있습니다.

이미 해외에서는 많은 크고작은 사이트들이 반응형 웹으로 탈바꿈 하였으며, 국내에서도 방문자들을 위하여 대형 사이트 위주로 점차 변화해 가고 있는 형태입니다.

이에 국내의 블로그(티스토리 등) 또한 반응형 웹으로 갈아타고 있는데요, 특히 많은 블로거분들에게 신뢰를 얻고 있는 마크쿼리님의 skeleton 반응형 웹 스킨이 많은 사랑을 받고 있는 가운데, 꾸준한 업데이트 지원과 커뮤니티를 통해 사용자들과의 소통을 통해 더욱 완벽한 스킨으로 진화하고 있습니다.

이에 발맞추어 구글 애드센스 광고를 게재하고 계신 분들은 속속들이 반응형 콘텐츠 광고로 갈아타고 있는데요, 각 스크린의 사이즈에 맞추어 적절한 광고 사이즈를 표현해 줌으로써 광고의 질적 향상은 물론 방문자들의 시선을 사로잡는데 일조하고 있습니다.

본인의 경우 몇개의 사이트와 블로그를 짬짬이 관리하고 있는데요, 모두 spider's web 스킨으로 적용하여 데스크톱은 물론 모바일 기기에서 유연하게 보여지도록 구성하였으며, 구글 애드센스 광고 또한 반응형 광고로 대체하여 광고 수익의 상승에도 도움을 주고 있습니다.

구글 애드센스 반응형 광고는 아래 화면과 같이 애드센스 홈페이지에서 광고 소스코드를 얻을 수 있는데요, 기존의 광고 코드와 동일하게 얻고 적용하면 되겠습니다.

화살표 부분의 기타-반응형 광고 유형에서 반응형 광고 단위(베타) 를 선택하면 되겠습니다.

반응형 광고단위가 아직 베타 버전이지만 본인의 경우 모든 페이지에 적용하여 정상적으로 잘 사용하고 있으니 걱정하지 마시고 적용해 보시기 바랍니다.

반응형 광고 코드는 스마트 크기 조정(권장) 모드와 고급(코드 수정 필요) 모드의 두가지가 있습니다.

위와 같이 스마트 크기 조정(권장) 모드는 해당 소스를 홈페이지나 블로그에 적용할 경우 페이지의 사이즈에 맞추어 자동으로 그 크기에 걸맞은 광고 단위를 자동으로 노출시키게 됩니다.

직접 소스를 적용하여 웹브라우저의 크기를 줄어보시면 줄어든 사이즈에 맞추어 작은 형태의 광고가 노출이 될 것입니다.

.

아래는 고급(코드 수정 필요) 모드를 이용한 것인데요, 미디어쿼리를 이용하여 수동으로 화면 크기에 맞는 광고 사이즈를 노출시킬 수 있습니다.

한가지 알아두셔야 할 점은 평소 콘텐츠형의 고정된 사이즈 외에 구글 애드센스에서 자체적으로 사이징된 여러 크기의 광고가 노출될 수 있다는 점입니다.

고급 모드에 대한 소스코드는 아래와 같으며, @media 미디어쿼리 부분을 이용하여 자신이 원하는 사이즈의 광고를 강제적으로 노출시킬 수 있겠습니다.

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

첫줄에 나오는 .xxxxx { width: 320px; height: 50px; } 의 의미는 기본 사이즈를 정하는 것으로 미디어쿼리 부분에서 정해지지 않은 사이즈의 페이지에서는 모두 320x50 사이즈의 광고를 노출시켜라는 것입니다.

많은 애드센스 게시자분들이 이 부분을 320x100 으로 조절하여, 일반적인 모바일 스마트폰 세로 화면 상단에 노출시키고 있습니다.

@media(min-width: 500px) 의 의미는 페이지의 가로 사이즈가 500픽셀 이하일 경우라는 뜻이며, 우측에 나오는 { .xxxxx { 468px; height: 60px; } } 구문은 애드센스 광고 사이즈를 결정짓는 부분입니다.

즉 웹페이지의 사이즈가 500px 이하일 경우 468x60 의 광고를 노출시켜라는 것입니다.

바로 이 @media 미디어쿼리 부분을 좀 더 세분화하여, 아래와 같이 페이지 사이즈별로 노출시키는 광고 사이즈를 유연하게 조정하시면 되겠습니다.

@media(min-width: 190px) { .xxxxx { width: 180px; height: 150px; } }
@media(min-width: 210px) { .xxxxx { width: 200px; height: 200px; } }
@media(min-width: 320px) { .xxxxx { width: 300px; height: 250px; } }
@media(min-width: 720px) { .xxxxx { width: 336px; height: 280px; } }
@media(min-width: 800px) { .xxxxx { width: 728px; height: 90px; } }

구글 애드센스 도움말에서 반응형 광고 단위 정보와 만드는 방법에 대한 추가 정보는 현재 링크를 참고하시기 바랍니다.

반응형 웹으로의 개편 후 반응형 광고로 전환하시는 분들에게 도움이 되었으면 합니다.