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

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

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

GPT 라이브러리 로드

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

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

  googletag.cmd.push(() => {

  });
</script>

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

광고 슬롯 정의

GPT를 로드한 후에 광고 슬롯을 정의할 수 있습니다. 다음 예에서는 서로 다른 광고 형식, 크기 및 타겟팅 옵션을 사용하여 3개의 광고 슬롯을 정의합니다.

고정 크기 광고 슬롯

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

// 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 adjusts its height to fit the creative
// content being displayed.
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를 사용 설정하여 광고 로드 및 새로고침과 일괄 처리 동작을 더 정밀하게 제어할 수 있습니다.

전체 예

다음은 이 가이드를 기반으로 하는 샘플 페이지의 전체 소스 코드입니다. 이 페이지의 양방향 데모를 볼 수도 있습니다.

JavaScript

TypeScript

시작하기

TypeScript 사용