광고 단위
반응형 광고 코드 수정 방법
반응형 광고 단위가 필요한 모든 기능을 수행하지 못하는 경우 반응형 사이트의 요구 사항에 더 충실히 부합하도록 광고 코드를 수정할 수 있습니다. 다음의 예를 통해 광고 코드를 수정하는 방법을 살펴보세요.
중요:
- CSS 미디어 쿼리를 사용해 본 적이 없고 광고 코드 수정이 처음이라면 먼저 화면 너비에 따른 정확한 광고 단위 크기의 예를 살펴보시는 것이 좋습니다.
- 이미 CSS 미디어 쿼리와 광고 코드 수정에 익숙하다면 고급 반응형 광고 코드 기능의 예 섹션으로 바로 이동하셔도 좋습니다.
화면 폭에 따른 정확한 광고 단위 크기 지정 예
이 예에는 3개 유형의 화면 폭(모바일, 태블릿, 데스크톱)에 맞춰 개별적으로 광고 단위 크기를 설정하도록 반응형 코드를 수정하는 방법이 나와 있습니다. CSS 미디어 쿼리를 사용해 보지 않았거나 애드센스 광고 코드를 수정해 본 경험이 없어도 이 예를 이해할 수 있습니다.
다음은 화면 폭에 따른 정확한 광고 단위 크기를 설정하는 수정된 반응형 광고 코드의 예입니다.
- 화면 폭 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="https://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>
이 샘플 코드를 내 사이트에 맞춰 수정하는 방법은 다음과 같습니다.
- 애드센스 계정에서 디스플레이 광고 단위를 만들고 '광고 크기' 섹션에서 반응형을 선택한 채로 둡니다. 반응형 광고 코드에서 다음 정보를 따로 기록해 둡니다.
- 내 게시자 ID, 예: ca-pub-1234567891234567
- 내 광고 단위의 ID(
data-ad-slot
), 예: 1234567890
- 샘플 코드에서 다음과 같이 수정합니다.
- 모든
example_responsive_1
인스턴스를 고유한 이름(예: Home_Page, front_page_123)으로 바꿉니다.참고:- 고유한 이름은 영문자(A~Z), 숫자, 밑줄만으로 구성되어야 하며, 영문자로 시작해야 합니다.
- 이 샘플 코드를 수정할 때마다 각기 다른 고유한 이름을 사용해야 합니다.
- 모든
ca-pub-XXXXXXX11XXX9
를 내 게시자 ID로 바꿉니다. 8XXXXX1
을 내 광고 단위의 ID로 바꿉니다.
- 모든
- 화면 폭에 따라 표시하고 싶은 광고 단위의 크기를 정합니다.
- 샘플 코드의 기존 광고 단위 크기가 마음에 든다면 추가로 변경해야 하는 사항은 없습니다.
- 화면 너비별로 다른 광고 단위 크기를 설정하고 싶다면 샘플 코드에서 다음과 같이 수정합니다.
320px
및100px
를 500픽셀 이하의 화면 폭에 사용하고 싶은 광고 단위의 폭과 높이로 바꿉니다.468px
및60px
를 500~799픽셀의 화면 폭에 사용하고 싶은 광고 단위의 폭과 높이로 바꿉니다.728px
및90px
를 800픽셀 이상의 화면 폭에 사용하고 싶은 광고 단위의 폭과 높이로 바꿉니다.
- 수정된 광고 코드를 복사하여 광고를 게재할 페이지의 HTML 소스 코드에 붙여넣습니다.
참고: 광고 코드를 삽입한 후 다양한 기기와 화면에서 광고를 테스트하여 반응형 동작이 올바르게 작동하는지 확인하는 것이 좋습니다.
고급 반응형 광고 코드 기능의 예
반응형 광고 단위가 필요한 모든 기능을 수행하지 못하는 경우, 광고 코드를 수정하여 CSS를 통해 광고 단위에 정확한 크기를 지정할 수 있습니다.
확장 후 너비 및 고정 높이 지정
반응형 광고 코드를 수정해 CSS를 통해 광고 단위에 적용할 확장 후 너비와 고정 높이를 지정할 수 있습니다. 다음은 광고 코드를 수정하는 방법을 보여 주는 예입니다.
<ins class="adsbygoogle"
style="display:inline-block;min-width:400px;max-width:970px;width:100%;height:90px"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
화면 폭에 따른 정확한 광고 크기 지정
반응형 광고 코드를 수정하여 CSS를 통해 광고 단위의 크기를 정확하게 지정할 수 있습니다. 다음은 광고 코드를 수정하는 방법을 보여 주는 예입니다.
<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
style="display:inline-block;"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
@media
규칙은 CSS3 구문이며, 모든 최신 브라우저에서 지원됩니다. Internet Explorer 7 이하 버전과 같은 이전 브라우저를 지원하려면 먼저 기본 크기를 지정해야 합니다. 그러면 미디어 쿼리가 지원되지 않을 때도 광고가 게재됩니다. 외부 스타일시트에서 CSS로 광고 코드의 크기를 설정하는 기능은 공식적으로 지원되지 않습니다.광고 단위 숨기기
경우에 따라 게시자가 광고를 게재하고 싶지 않을 수 있는데, 특히 화면이 작은 휴대기기를 게재 대상 기기에서 제외하고 싶을 수 있습니다. 광고 단위를 숨기려는 경우 광고 요청이 발생하지 않고 광고가 게재되지 않도록 CSS 미디어 쿼리를 사용하여 매개변수를 설정할 수 있습니다. 다음은 광고 코드를 수정하는 방법을 보여 주는 예입니다.
<style type="text/css">
.adslot_1 { display:inline-block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
이 예에서는 화면 너비가 400픽셀 미만인 경우 광고가 게재되지 않습니다.