반응형 애드센스 사용하기 정보
반응형 애드센스 사용하기본문
구글이 오늘 반응형 애드센스를 출시 했습니다. 제가 고민하던 부분이기도 한데,
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
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
추천
5
5
댓글 7개
오호 반응형 애드센스!
새로운 정보네요..^^
유용한 정보감사합니다
드디어 애드센스에서 자체적으로 지원해주네요 ^^ 좋은 정보 감사합니다.
좋은정보네요
좋은 정보 감사합니다.
좋은 정보네요~ 감사합니다~ ^^