반응형 애드센스 사용하기

구글이 오늘 반응형 애드센스를 출시 했습니다. 제가 고민하던 부분이기도 한데,

http://hackya.com/blog_kr/구글광고-display-none-을-사용-못하는-경우/

매우 반가운 소식입니다.

아직 베타 버전이긴 한데, 사용방법은 간단합니다. 애드유닛을 만들때 아래 그림처럼 각 break-point 에 맞춰 미디어쿼리 만 지정해 주면 됩니다.











좀더 구체적으로 설명하자면, 아래처럼 800px, 500x, 320px, 3개의 break-point 가 있는 경우, 각 break-point 에 애드센스의 넓이를 미디어 쿼리로 resolution 에 맞게 지정해 주는 것 입니다.


<style type="text/css"><!--
.adslot_1 {
width: 320px; height: 50px;
}
@media (min-width:500px) { .adslot_1 {
width: 468px; height: 60px;
}}
@media (min-width:800px) { .adslot_1 {
width: 728px; height: 90px;
}}
-->

그러니까, 여기서 보면, 저 리더보드 애드유닛 (원래 넓이가 728px 짜리죠), 이걸 스크린의 resolution 이 800px 이상에서는 평상시 처럼 원래 넓이인 728px 로 보여주고,

그 밑으로 떨어지면, 468px, 320px 로 줄여지는게 보이시죠? ^^

출처: https://support.google.com/adsense/answer/3213689