Google 게시자 태그 시작하기

Google 게시자 태그 (GPT)는 Google Ad Manager용 광고 태그 라이브러리입니다.

GPT를 사용하여 광고 요청을 동적으로 생성할 수 있습니다. GPT는 광고 단위 코드, 광고 크기, 맞춤 타겟팅과 같은 주요 세부정보를 받아서 요청을 생성하고 웹페이지에 광고를 게재합니다.

GPT에 대한 자세한 내용은 Ad Manager 고객센터를 참조하세요.

다음은 GPT를 시작하는 데 사용할 수 있는 몇 가지 샘플입니다. GPT에 관한 추가 도움이 필요한 경우 지원 옵션을 참조하세요.

테스트 광고 표시하기

다음 예에서는 GPT를 사용하여 Google의 테스트 네트워크에서 일반 광고를 로드하는 테스트 페이지를 만드는 과정을 안내합니다.

이 예의 전체 코드는 테스트 광고 표시 샘플 페이지에서 확인할 수 있습니다.

  1. 기본 HTML 문서 만들기

    텍스트 편집기에서 hello-gpt.html라는 기본 HTML 문서를 만듭니다.

    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="description" content="Display a fixed-sized test ad." />
        <title>Display a test ad</title>
        <style></style>
      </head>
      <body>
        <script>
          googletag.cmd.push(() => {
            // Request and render an ad for the "banner-ad" slot.
            googletag.display("banner-ad");
          });
        </script>
      </body>
    </html>
    
  2. GPT 라이브러리 로드

    다음을 HTML 문서의 <head>에 추가하여 GPT 라이브러리를 로드합니다.

    이 코드는 https://securepubads.g.doubleclick.net/tag/js/gpt.js에서 GPT 라이브러리를 로드합니다. 라이브러리가 완전히 로드되면 googletag 객체의 큐에 추가된 명령어를 처리합니다.

    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta name="description" content="Display a fixed-sized test ad." />
      <title>Display a test ad</title>
      <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
      <style></style>
    </head>
    
  3. 광고 슬롯 정의

    광고 슬롯을 정의하고 googletag.enableServices() 메서드를 사용하여 GPT를 초기화합니다.

    이 코드는 먼저 googletag 객체를 사용할 수 있도록 한 다음 광고 슬롯을 구성하고 GPT를 사용 설정하는 명령어를 큐에 추가합니다.

    이 예의 광고 슬롯은 경로 /6355419/Travel/Europe/France/Paris에서 지정한 광고 단위에서 300x250 크기의 광고를 로드합니다. 광고는 다음에 추가될 페이지 본문의 <div id="banner-ad"> 요소에 표시됩니다.

    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta name="description" content="Display a fixed-sized test ad." />
      <title>Display a test ad</title>
      <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
      <script>
        window.googletag = window.googletag || { cmd: [] };
    
        googletag.cmd.push(() => {
          // Define an ad slot for div with id "banner-ad".
          googletag
            .defineSlot("/6355419/Travel/Europe/France/Paris", [300, 250], "banner-ad")
            .addService(googletag.pubads());
    
          // Enable the PubAdsService.
          googletag.enableServices();
        });
      </script>
      <style></style>
    </head>
    
  4. 광고가 게재될 위치 지정

    다음 코드를 HTML 문서의 <body>에 추가하여 페이지에서 광고를 게재할 위치를 지정합니다.

    <div>의 ID는 광고 슬롯을 정의할 때 지정된 ID와 일치합니다.

    <body>
      <div id="banner-ad" style="width: 300px; height: 250px"></div>
      <script>
        googletag.cmd.push(() => {
          // Request and render an ad for the "banner-ad" slot.
          googletag.display("banner-ad");
        });
      </script>
    </body>
    
  5. 테스트 페이지 미리보기

    hello-gpt.html 파일을 저장하고 웹브라우저에서 엽니다. 로드가 완료되면 페이지 본문에 테스트 광고가 표시됩니다.

직접 광고 표시하기

자체 광고를 게재하려면 테스트 광고 표시hello-gpt.html 파일을 사용한 다음 헤더의 코드를 자체 Ad Manager 네트워크의 인벤토리를 지정하는 코드로 바꿉니다.

  1. 표시할 광고 단위에 대한 광고 태그를 생성합니다. Ad Manager 고객센터에서 광고 태그 생성에 대해 자세히 알아보세요.

  2. 문서 헤더 섹션에 제공된 광고 태그 코드를 복사하고 이를 사용하여 HTML 문서의 <head>에서 해당 코드를 대체합니다.

    <head>
     <meta charset="utf-8">
     <title>Hello GPT</title>
     <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
     <script>
       window.googletag = window.googletag || {cmd: []};
       googletag.cmd.push(function() {
         googletag
             .defineSlot(
                 'ad-unit-path', [width, height], 'div-id')
             .addService(googletag.pubads());
         googletag.enableServices();
       });
     </script>
    </head>
    
  3. 업데이트된 hello-gpt.html 파일을 저장하고 웹브라우저에서 엽니다.