반응형 광고 코드 수정 방법

Google의 반응형 광고 코드로 필요한 기능을 모두 구현할 수 없는 경우 반응형 사이트의 요건에 맞게 광고 코드를 수정할 수 있습니다. 광고 코드를 올바르게 수정하는 방법은 이 도움말의 예를 참고하세요.

시작하기 전에

• 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-1234567890123456" crossorigin="anonymous"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

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

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

     • 고유한 이름은 영문자(A~Z), 숫자, 밑줄만으로 구성되어야 하며, 영문자로 시작해야 합니다.
     • 이 샘플 코드를 수정할 때마다 각기 다른 고유한 이름을 사용해야 합니다.
   • 모든 ca-pub-1234567890123456을 내 게시자 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: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를 통해 광고 단위의 크기를 정확하게 지정할 수 있습니다. 다음은 광고 코드를 수정하는 방법을 보여 주는 예입니다.

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

기기별로 반응형 사이트에 가장 잘 맞는 정확한 광고 단위 크기를 알고 있는 경우 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:block;"
    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>

@media 규칙은 CSS3 구문이며 모든 최신 브라우저에서 지원됩니다. 외부 스타일시트에서 CSS를 통해 광고 단위의 크기를 설정하는 기능은 공식적으로 지원되지 않습니다.

광고 단위 숨기기

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

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

특정 화면 크기에만 광고를 게재하려면 CSS를 사용하면 됩니다. 다음 예는 CSS3 미디어 쿼리를 사용하여 특정 화면 크기에 맞게 광고를 숨기도록 광고 코드를 수정하는 방법을 보여줍니다.
<style type="text/css">
.adslot_1 { display: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-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>

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

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