Google 게시자 태그 시작하기

Google 게시자 태그 (GPT)는 Google 게시자 태그를 사용하여 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>
  </body>
</html>

  2. GPT 라이브러리 로드

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

    이 코드는 https://securepubads.g.doubleclick.net/tag/js/gpt.js. 라이브러리에 완전히 로드되면 애플리케이션에서 대기 중인 모든 명령을 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"
    crossorigin="anonymous"
  ></script>
  <style></style>
</head>

  3. 광고 슬롯 정의

    광고 슬롯을 정의하고 googletag.enableServices() 메서드를 사용하여 지도 가장자리에 패딩을 추가할 수 있습니다.

    이 코드는 먼저 googletag 객체가 사용 가능한지 확인한 다음 명령어를 사용하여 광고 슬롯을 생성하고 GPT를 사용 설정합니다.

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

    <ph type="x-smartling-placeholder">

    <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"
    crossorigin="anonymous"
  ></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는 있습니다.

    <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 파일을 사용하세요. 광고를 지정한 다음 헤더의 코드를 인벤토리를 판매할 수 있습니다

  1. 표시하려는 광고 단위용 광고 태그를 생성합니다. 다음에 대해 자세히 알아보기 에서 광고 태그 생성 Ad Manager 고객센터를 참고하세요.

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

    <head>
  <meta charset="utf-8">
  <title>Hello GPT</title>
  <script src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" crossorigin="anonymous" async></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 파일을 저장하고 웹브라우저에서 엽니다.

다음
기본사항 알아보기