태블릿과 데스크톱 환경에 반응형 광고를 사용해야 하는 이유는 브라우저 크기가 다르고, UI 기능으로 광고 영역이 변하기 때문이다.
영역이 변하는데 큰 광고가 그대로 나타나면 광고 효과도 없고 레이아웃과 스크롤바가 엉망이 된다.
스킨에 구글 애드센스 반응형 광고 코드를 넣고 새로고침을 통해 결과물을 보면 광고가 숨어버린다.
요소 코드를 모니터링 해보면 광고를 감싸고 있는 태그 중 일부의 높이가 0인 것을 볼 수 있다.
이를 방지하는 코드를 적용해본다. (자세한 설명은 생략한다)
화면 폭에 따른 정확한 광고 단위 크기 지정
HTML
<style>
.adss_responsive { width: 320px; height: 100px; }
@media(min-width: 500px) { .adss_responsive { width: 468px; height: 60px; } }
@media(min-width: 800px) { .adss_responsive { width: 728px; height: 90px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- 반응형 광고 예제 -->
<ins class="adsbygoogle adss_responsive"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>- 위 CSS 코드의 첫 번째 줄은 모든 화면 너비에 적용된다.
@media(min-width: 500px)항목은 최소 500px 이상인 화면 너비에 적용된다.@media(min-width: 800px)항목은 최소 800px 이상인 화면 너비에 적용된다.
CSS는 순차 실행이므로 다음과 같이 적용된다.
- 화면 폭 500픽셀 이하: 320×100 광고 단위
- 화면 폭 500~799픽셀: 468×60 광고 단위
- 화면 너비 800픽셀 이상: 728×90 광고
위의 코드는 세가지 유형의 화면 너비에 따라 광고의 높이가 달라진다.
고정 높이를 지정하려면
확장 후 너비 및 고정 높이 지정
HTML
<ins class="adsbygoogle"
style="display:block;min-width:400px;max-width:970px;width:100%;height:90px"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>작은 화면에서 광고를 숨기려면
광고 단위 숨기기
CSS
.adss_responsive { display:block; width: 320px; height: 50px; }
@media (max-width:400px) { .adss_responsive { display: none; } }
@media (min-width:500px) { .adss_responsive { width: 468px; height: 60px; } }
@media (min-width:800px) { .adss_responsive { width: 728px; height: 90px; } }위 코드와 같이 화면 너비가 최대 400px인 기기에서는 광고가 게재되지 않는다.