예시를 통해 기본사항 알아보기

다음 가이드에서는 테스트 광고 표시를 자세히 설명하고 Google 게시자 태그 (GPT) 라이브러리를 최대한 활용하기 위한 더 많은 기본 개념을 소개합니다. 포함된 개념은 다음과 같습니다.

광고 크기 조정
키-값 타겟팅
단일 요청 아키텍처

GPT 라이브러리 로드

먼저 GPT 라이브러리를 로드하고 초기화합니다. HTML 문서의 <head>에 다음을 추가합니다.

<script
  async
  src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
  crossorigin="anonymous"
></script>
<script>
  window.googletag = window.googletag || { cmd: [] };

  googletag.cmd.push(() => {

  });
</script>

이렇게 하면 GPT 라이브러리가 로드되고 googletag 및 CommandArray 객체가 모두 초기화됩니다. 이러한 객체를 초기화하면 GPT 명령어 배열을 즉시 사용할 수 있습니다. 다음 JavaScript 코드를 이 스니펫에 정의된 빈 함수의 본문에 추가합니다.

광고 슬롯 정의

GPT를 로드한 후 광고 슬롯을 정의할 수 있습니다. 다음 예에서는 다양한 광고 형식, 크기, 타겟팅 옵션이 있는 세 개의 광고 슬롯을 정의합니다.

고정 크기 광고 슬롯

다음은 고정 크기의 간단한 광고 슬롯입니다.

// Define a fixed size ad slot, customized with key-value targeting.
googletag
  .defineSlot("/6355419/Travel/Asia", [728, 90], "banner-ad")
  .addService(googletag.pubads())
  .setTargeting("color", "red")
  .setTargeting("position", "atf");

이 스니펫은 광고 단위 경로, 크기, 컨테이너 <div> ID 외에도 여러 타겟팅 옵션을 지정합니다. 이러한 옵션은 이 슬롯에 게재할 수 있는 광고를 제한하고 구분합니다. 키-값 타겟팅에 대해 자세히 알아보세요.

앵커 광고 슬롯

다음은 표시 영역 하단에 연결된 앵커 광고 슬롯입니다.

// Define an anchor ad slot that sticks to the bottom of the viewport.
const anchorSlot = googletag.defineOutOfPageSlot(
  "/6355419/Travel",
  googletag.enums.OutOfPageFormat.BOTTOM_ANCHOR,
);

// The slot will be null if the page or device does not support anchors.
if (anchorSlot) {
  anchorSlot.setTargeting("test", "anchor").addService(googletag.pubads());

  document.getElementById("status").textContent =
    "Anchor ad is initialized. Scroll page to activate.";
}

앵커 슬롯은 일반적인 defineSlot 메서드가 아닌 defineOutOfPageSlot 메서드를 사용하여 정의되는 오프페이지 형식의 한 유형입니다. 페이지 외부 광고 소재에 대해 자세히 알아보세요.

페이지 외부 형식은 게재할 수 있는 페이지 및 기기의 유형에 제한이 있는 경우가 많습니다. 이러한 제한사항으로 인해 슬롯과 상호작용하기 전에 슬롯이 정의되었는지 확인해야 합니다. 자세한 내용은 앵커 광고 표시 샘플을 참고하세요.

유동적인 광고 슬롯

다음은 네이티브 광고의 유동적인 광고 슬롯입니다.

// Define a fluid ad slot that fills the width of the enclosing column and
// adjusts the height as defined by the native creative delivered.
googletag
  .defineSlot("/6355419/Travel", ["fluid"], "native-ad")
  .addService(googletag.pubads());

유연한 광고 슬롯은 고정된 크기가 없습니다. 유동 광고 슬롯은 광고의 광고 소재 콘텐츠에 맞게 조정됩니다. fluid 크기 옵션을 사용하여 유동 광고 슬롯을 정의합니다. 광고 크기 및 사용 가능한 크기 옵션에 대해 자세히 알아보세요.

페이지 수준 설정 구성

특정 GPT 구성 옵션은 특정 광고 슬롯이 아닌 전 세계에 적용됩니다. 이를 페이지 수준 설정이라고 합니다.

다음은 페이지 수준 설정을 구성하는 방법의 예시입니다.

// Configure page-level targeting.
googletag.pubads().setTargeting("interests", "basketball");

// Enable SRA and services.
googletag.pubads().enableSingleRequest();
googletag.enableServices();

이 스니펫은 다음 세 가지 작업을 실행합니다.

페이지의 모든 광고 슬롯에 적용되는 페이지 수준 타겟팅 옵션을 구성합니다.
여러 광고 슬롯의 요청을 단일 광고 요청으로 번들로 묶는 단일 요청 아키텍처 (SRA) 모드를 사용 설정합니다. SRA는 실적을 개선하고 경쟁 제외 및 로드블록이 적용되도록 보장하는 데 필요하므로 항상 SRA를 사용 설정하는 것이 좋습니다. SRA를 올바르게 사용하는 방법을 자세히 알아보세요.
광고 요청을 허용하는 광고 슬롯에 연결된 서비스를 사용 설정합니다.

디스플레이 광고

마지막으로 페이지의 <body>에 다음 스니펫을 추가합니다.

<div class="page-content centered">
  <div id="banner-ad" style="width: 728px; height: 90px"></div>
  <!--
  If the following status is displayed when the page is rendered, try
  loading the page in a new window or on a different device.
-->
  <h1 id="status">Anchor ads are not supported on this page.</h1>
  <!--
  Spacer used for example purposes only. This positions the native ad
  container below the fold to encourage scrolling.
-->
  <div class="spacer"></div>
  <div id="native-ad" class="native-slot"></div>
</div>
<script>
  googletag.cmd.push(() => {
    // Request and render all previously defined ad slots.
    googletag.display("banner-ad");
  });
</script>

이렇게 하면 banner-ad 및 native-ad라는 두 개의 광고 슬롯 컨테이너가 정의됩니다. 이러한 컨테이너 id 값은 이 예의 앞부분에서 광고 슬롯을 정의할 때 제공한 값과 일치합니다.

모든 광고 슬롯이 정의되면 banner-ad를 표시하는 호출이 실행됩니다. SRA가 사용 설정되어 있으므로 이 단일 디스플레이 호출은 지금까지 정의된 모든 광고 슬롯을 요청하고 렌더링합니다. 필요한 경우 SRA를 사용 설정하여 광고 로드 및 새로고침 및 일괄 처리 동작을 더 정확하게 제어할 수 있습니다.

전체 예

다음은 이 가이드의 기반이 되는 샘플 페이지의 전체 소스 코드입니다. 이 페이지의 대화형 데모를 볼 수도 있습니다.

자바스크립트

TypeScript

시작하기

TypeScript 사용