반응형 광고 코드 수정 방법

반응형 광고 단위가 필요한 모든 기능을 수행하지 못하는 경우 반응형 사이트의 요구 사항에 더 충실히 부합하도록 광고 코드를 수정할 수 있습니다. 다음의 예를 통해 광고 코드를 수정하는 방법을 살펴보세요.

중요:

• 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?client=ca-pub-XXXXXXX11XXX9" crossorigin="anonymous"></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>

이 샘플 코드를 내 사이트에 맞춰 수정하는 방법은 다음과 같습니다.

1. 애드센스 계정에서 디스플레이 광고 단위를 만들고 '광고 크기' 섹션에서 반응형을 선택한 채로 둡니다. 반응형 광고 코드에서 다음 정보를 따로 기록해 둡니다.
   • 내 게시자 ID, 예: ca-pub-1234567891234567
   • 내 광고 단위의 ID(data-ad-slot), 예: 1234567890
2. 샘플 코드에서 다음과 같이 수정합니다.
   • 모든 example_responsive_1 인스턴스를 고유한 이름(예: Home_Page, front_page_123)으로 바꿉니다.
     참고:

     • 고유한 이름은 영문자(A~Z), 숫자, 밑줄만으로 구성되어야 하며, 영문자로 시작해야 합니다.
     • 이 샘플 코드를 수정할 때마다 각기 다른 고유한 이름을 사용해야 합니다.
   • 모든 ca-pub-XXXXXXX11XXX9를 내 게시자 ID로 바꿉니다.
   • 8XXXXX1을 내 광고 단위의 ID로 바꿉니다.
3. 화면 폭에 따라 표시하고 싶은 광고 단위의 크기를 정합니다.
   • 샘플 코드의 기존 광고 단위 크기가 마음에 든다면 추가로 변경해야 하는 사항은 없습니다.
   • 화면 너비별로 다른 광고 단위 크기를 설정하고 싶다면 샘플 코드에서 다음과 같이 수정합니다.
     • 320px 및 100px를 500픽셀 이하의 화면 폭에 사용하고 싶은 광고 단위의 폭과 높이로 바꿉니다.
     • 468px 및 60px를 500~799픽셀의 화면 폭에 사용하고 싶은 광고 단위의 폭과 높이로 바꿉니다.
     • 728px 및 90px를 800픽셀 이상의 화면 폭에 사용하고 싶은 광고 단위의 폭과 높이로 바꿉니다.
4. 수정된 광고 코드를 복사하여 광고를 게재할 페이지의 HTML 소스 코드에 붙여넣습니다.
   참고: 광고 코드를 삽입한 후 다양한 기기와 화면에서 광고를 테스트하여 반응형 동작이 올바르게 작동하는지 확인하는 것이 좋습니다.

고급 반응형 광고 코드 기능의 예

반응형 광고 단위가 필요한 모든 기능을 수행하지 못하는 경우, 광고 코드를 수정하여 CSS를 통해 광고 단위에 정확한 크기를 지정할 수 있습니다.

참고: 광고 코드를 수정하는 작업에 대해 확신이 없는 경우 이 고급 기능을 사용하지 않는 것이 좋습니다.

확장 후 너비 및 고정 높이 지정

반응형 광고 코드를 수정해 CSS를 통해 광고 단위에 적용할 확장 후 너비와 고정 높이를 지정할 수 있습니다. 다음은 광고 코드를 수정하는 방법을 보여 주는 예입니다.

확장 후 너비 및 고정 높이의 예

다음은 반응형 광고 코드를 수정해 고정 높이는 90픽셀, 가변 폭은 400~970픽셀로 지정하는 방법입니다.
<ins class="adsbygoogle"
   style="display:inline-block;min-width:400px;max-width:970px;width:100%;height:90px"
   data-ad-client="ca-pub-XXXXXXX11XXX9"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXX11XXX9" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

화면 폭에 따른 정확한 광고 크기 지정

반응형 광고 코드를 수정하여 CSS를 통해 광고 단위의 크기를 정확하게 지정할 수 있습니다. 다음은 광고 코드를 수정하는 방법을 보여 주는 예입니다.

화면 폭에 따른 정확한 광고 크기 지정 예

기기별로 반응형 사이트에 가장 잘 맞는 정확한 광고 단위 크기를 알고 있는 경우, CSS3 미디어 쿼리를 활용해 반응형 광고 단위의 크기를 설정할 수 있습니다. 다음 예를 통해 CSS3 미디어 쿼리를 사용하여 광고 코드를 수정하는 방법을 알아봅니다.
<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-XXXXXXX11XXX9"
    data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXX11XXX9" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

@media 규칙은 CSS3 구문이며, 모든 최신 브라우저에서 지원됩니다. Internet Explorer 7 이하 버전과 같은 이전 브라우저를 지원하려면 먼저 기본 크기를 지정해야 합니다. 그러면 미디어 쿼리가 지원되지 않을 때도 광고가 게재됩니다. 외부 스타일시트에서 CSS로 광고 코드의 크기를 설정하는 기능은 공식적으로 지원되지 않습니다.

광고 단위 숨기기

경우에 따라 게시자가 광고를 게재하고 싶지 않을 수 있는데, 특히 화면이 작은 휴대기기를 게재 대상 기기에서 제외하고 싶을 수 있습니다. 광고 단위를 숨기려는 경우 광고 요청이 발생하지 않고 광고가 게재되지 않도록 CSS 미디어 쿼리를 사용하여 매개변수를 설정할 수 있습니다. 다음은 광고 코드를 수정하는 방법을 보여 주는 예입니다.

특정 화면 크기에 대해 광고를 숨기는 광고 코드의 예

특정 화면 크기에만 광고를 게재하려면 CSS를 사용하면 됩니다. 다음 예는 CSS3 미디어 쿼리를 사용하여 특정 화면 크기에 대해 광고를 숨기도록 광고 코드를 수정하는 방법을 보여 줍니다.
<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-XXXXXXX11XXX9"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXX11XXX9" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

이 예에서는 화면 너비가 400픽셀 미만인 경우 광고가 게재되지 않습니다.

게시자는 이처럼 유연하게 광고 게재위치를 선택할 수 있지만, 항상 애드센스 광고 게재위치 정책을 준수해야 함을 유념하시기 바랍니다. 애드센스 프로그램 정책에 따라 제한적인 광고 코드 수정만 허용됩니다.