광고 크기

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

경우에 따라 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], "fluid"],
    "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> 요소

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

반응형 광고

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

이는 표시 영역 크기와 광고 크기 간의 매핑을 정의하고 해당 매핑을 광고 슬롯과 연결합니다.

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], []]
]