검색
검색어 지우기
검색 닫기
Google 앱
기본 메뉴

광고 코드 구현

반응형 광고 코드 수정 방법

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

중요:

이 도움말에 나온 예는 애드센스 광고 코드에서 허용되는 변경사항이므로 안심하셔도 됩니다. 반응형 광고 코드를 아래와 같이 허용되는 방식으로 수정하는 것은 애드센스 프로그램 정책에 위배되지 않습니다.

화면 폭당 정확한 광고 단위 크기의 예

이 예에는 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="//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>

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

  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. 화면 폭당 표시하고 싶은 광고 단위의 크기를 정합니다.
    • 샘플 코드의 기존 광고 단위 크기가 마음에 든다면 추가로 변경해야 하는 사항은 없습니다.
    • 화면 폭당 다른 광고 단위 크기를 설정하고 싶다면 샘플 코드에서 다음과 같이 수정합니다.
      • 320px100px를 500픽셀 이하의 화면 폭에 사용하고 싶은 광고 단위의 폭과 높이로 바꿉니다.
      • 468px60px를 500~799픽셀의 화면 폭에 사용하고 싶은 광고 단위의 폭과 높이로 바꿉니다.
      • 728px90px를 800픽셀 이상의 화면 폭에 사용하고 싶은 광고 단위의 폭과 높이로 바꿉니다.
  4. 수정된 광고 코드를 복사하여 광고를 게재할 페이지의 HTML 소스 코드에 붙여넣습니다.
    광고 코드를 삽입하고 나면 다양한 기기와 화면에서 광고를 테스트하여 반응형 동작이 제대로 작동하는지 확인하시기 바랍니다.

맨 위로

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

반응형 광고 단위가 필요한 모든 기능을 수행하지 못하는 경우 광고 코드를 수정하여 광고 단위가 준수해야 할 일반적인 모양(가로, 세로, 직사각형)을 지정하거나 CSS를 통해 광고 단위에 대한 정확한 크기를 지정할 수 있습니다.

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

일반적인 모양 지정

광고 코드를 수정하여 광고 단위가 준수해야 할 일반적인 모양(가로, 세로, 직사각형)을 지정할 수 있습니다. 다음은 광고 코드를 수정하는 방법을 보여 주는 예입니다.

가로 모양을 지정하는 광고 코드의 예
다음은 광고 단위가 준수할 일반적인 가로 모양을 지정할 때 반응형 광고 코드를 수정하는 방법입니다.
<ins class="adsbygoogle"
    style="display:block;"
    data-ad-client="ca-pub-1234"
    data-ad-slot="5678"
    data-ad-format="horizontal"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

반응형 광고 코드에는 "auto" 값이 지정된 data-ad-format 태그가 기본값으로 포함되어 있습니다. 이 태그를 통해 반응형 광고 단위의 자동 크기 조정 동작이 활성화됩니다. 반면, 반응형 광고 단위에 대한 일반적인 모양을 정의하려는 경우 data-ad-format 값을 변경하여 사용할 수 있습니다. 해당 값을 "rectangle", "vertical", "horizontal", 이들을 쉼표로 구분하여 조합한 값(예: "rectangle, horizontal")으로 변경하여 사용합니다.

확장형 폭 및 고정 높이 지정

반응형 광고 코드를 수정해 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-1234"
   data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></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-1234"
    data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></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-1234"
   data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

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

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

맨 위로

이 도움말이 도움이 되었나요?
어떻게 하면 개선할 수 있을까요?