이 페이지는 Cloud Translation API를 통해 번역되었습니다.

광고 크기

정의한 모든 광고 슬롯은 해당 슬롯에 게재할 수 있는 광고 크기를 지정해야 합니다. 광고 크기를 지정하는 방법은 게재할 광고의 유형과 광고 슬롯 자체의 크기 및 유연성에 따라 달라집니다.

경우에 따라 Google Ad Manager 내의 광고 항목 수준에서 광고 크기가 재정의될 수 있습니다. 자세한 내용은 고객센터를 참고하세요.

이 가이드에 포함된 예의 전체 코드는 광고 크기 샘플 페이지에서 찾을 수 있습니다.

고정 크기 광고

하나의 고정 크기로 광고 슬롯을 정의할 수 있습니다.

googletag
  .defineSlot("/6355419/Travel/Europe/France/Paris", [300, 250], "fixed-size-ad")
  .addService(googletag.pubads());

이 예에서는 크기가 300x250인 광고 소재만 게재됩니다.

핵심사항: 고정 크기 광고로 작업할 때는 광고 소재가 렌더링될 <div> 요소의 크기를 정의하는 것이 좋습니다. 광고 소재는 비동기식으로 렌더링되는 경우가 많으므로 예약된 공간이 충분하지 않으면 페이지의 다른 요소가 이동할 수도 있습니다.

여러 크기의 광고

광고가 여러 크기를 지원하는 경우 광고 슬롯을 정의할 때 지원되는 크기 목록을 제공하세요.

googletag
  .defineSlot(
    "/6355419/Travel/Europe",
    [
      [300, 250],
      [728, 90],
      [750, 200],
    ],
    "multi-size-ad",
  )
  .addService(googletag.pubads());

이 예에서는 크기가 300x250, 728x90, 750x200인 광고 소재를 게재할 수 있습니다. Ad Manager는 광고 선택 프로세스 중에 이러한 크기와 일치하는 광고 소재만 고려합니다.

CSS에서 광고 슬롯 <div>에 크기가 지정되지 않은 경우 GPT는 display() 호출 시 가장 짧게 선언된 높이와 1픽셀을 기준으로 선언된 가장 넓은 너비와 동일한 크기를 자동으로 설정합니다. 여기서는 750x90가 됩니다. 그러나 페이지의 다른 콘텐츠가 로드된 후에 이 크기가 조정되어 콘텐츠가 이동할 수 있습니다. 레이아웃 변경을 방지하려면 레이아웃 변경 최소화 가이드에 표시된 대로 CSS를 사용하여 공간을 예약합니다.

여러 크기의 광고를 사용하는 경우 레이아웃이 지정된 가장 큰 크기의 광고를 지원할 수 있을 만큼 유연해야 합니다. 이렇게 하면 광고 소재가 실수로 잘리지 않게 됩니다.

유동적인 광고

유동적인 광고는 크기가 고정된 것이 아니라 표시되는 광고 소재 콘텐츠에 맞게 조정됩니다. 네이티브 광고는 현재 Ad Manager에서 지원하는 유일하게 유동적인 광고 유형입니다.

유동 광고를 사용하는 경우 맞춤 fluid 크기를 지정할 수 있습니다.

googletag
  .defineSlot("/6355419/Travel", ["fluid"], "native-ad")
  .addService(googletag.pubads());

이 예에서 광고 슬롯은 상위 컨테이너의 너비를 가지며 광고 소재 콘텐츠에 맞게 높이를 조정합니다. GPT에서 광고 슬롯의 크기를 조절하는 단계는 다음과 같습니다.

광고 응답이 수신됩니다.
광고 소재 콘텐츠는 iframe에 작성되며 초기 높이는 0px로, 너비는 100%로 설정됩니다.
iframe의 모든 리소스 로드가 완료되면 iframe 높이를 iframe <body> 요소의 높이와 동일하게 설정하여 광고 소재가 표시됩니다.

반응형 광고

반응형 광고를 사용하면 여러 크기의 광고를 확장하며, 요청하는 브라우저의 표시 영역 크기에 따라 게재할 광고 소재의 크기를 지정할 수 있습니다. 이 기능은 다양한 유형의 기기 (데스크톱, 태블릿, 모바일 등)에 게재되는 광고 소재의 크기를 제어하는 데 사용할 수 있습니다.

이렇게 하려면 표시 영역 크기와 광고 크기 간의 매핑을 정의한 다음 이 매핑을 광고 슬롯과 연결합니다.

const responsiveAdSlot = googletag
  .defineSlot(
    "/6355419/Travel/Europe",
    [
      [300, 250],
      [728, 90],
      [750, 200],
    ],
    "responsive-ad",
  )
  .addService(googletag.pubads());

const mapping = googletag
  .sizeMapping()
  .addSize(
    [1024, 768],
    [
      [750, 200],
      [728, 90],
    ],
  )
  .addSize([640, 480], [300, 250])
  .addSize([0, 0], [])
  .build();

responsiveAdSlot.defineSizeMapping(mapping);

이 예에서 매핑은 다음을 지정합니다.

표시 영역이 1024x768 이상인 경우 크기가 750x200 또는 728x90인 광고를 게재할 수 있습니다.
1024x768 > 표시 영역 >= 640x480인 경우 크기가 300x250인 광고를 게재할 수 있습니다.
표시 영역이 640x480보다 작으면 광고를 게재할 수 없습니다.

GPT는 요청하는 브라우저의 표시 영역의 크기를 감지하여 적합한 가장 큰 매핑을 사용합니다. GPT는 가장 큰 매핑을 결정하기 위해 먼저 너비를 고려한 다음 높이 (즉, [100, 10] > [10, 100]). 매핑 오류가 발생하거나 표시 영역 크기를 결정할 수 없는 경우 defineSlot()에 지정된 크기가 사용됩니다.

그런 다음 Slot.defineSizeMapping() 메서드를 호출하여 매핑이 광고 슬롯에 연결됩니다. 이 메서드에는 다음 형식의 매핑 배열이 허용됩니다.

[
  [
    [viewport-width-1, viewport-height-1],
    [[ad-width-1, ad-height-1], [ad-width-2, ad-height-2], ...]
  ],
  [
    [viewport-width-2, viewport-height-2],
    [[ad-width-3, ad-height-3], [ad-width-4, ad-height-4], ...]
  ],
  ...
]

이 배열 내 표시 영역 크기의 순서가 우선순위를 정의합니다. 위 예에 사용된 SizeMappingBuilder는 이 형식의 배열을 가장 큰 크기부터 가장 작은 크기 순서로 자동 정렬하여 생성하는 편리한 방법입니다. 이 예에서 SizeMappingBuilder.build()의 출력은 다음과 같습니다.

[
  [[1024, 768], [[750, 200], [728, 90]]],
  [[640, 480], [[300, 250]]],
  [[0, 0], []]
]