Google 게시자 태그 시작하기

Google 게시자 태그 (GPT)는 Google 게시자 태그를 사용하여 Google Ad Manager

GPT를 사용하여 광고 요청을 동적으로 만들 수 있습니다. GPT는 광고 단위 코드, 광고 크기 및 맞춤 타겟팅을 사용하고, 요청을 작성하고, 웹페이지에 광고를 게재합니다.

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

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

테스트 광고 표시

다음 예제는 새 버전을 추가하여 는 GPT를 사용하여 Google의 테스트 네트워크에서 일반 광고를 로드합니다.

이 예의 전체 코드는 테스트 광고 표시 샘플 페이지를 참조하세요.

기본 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>

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>

광고 슬롯 정의

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

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

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

<ph type="x-smartling-placeholder">
</ph> 광고 단위 경로가 다음 형식을 따릅니다. /network-code/[parent-ad-unit-code/.../]ad-unit-code, 각 항목의 의미는 다음과 같습니다.
- network-code: 고유 식별자를 광고 단위가 속한 Ad Manager 네트워크
- parent-ad-unit-code는 모든 상위 광고 단위의 코드입니다( 최상위가 아닌 광고 단위에 적용됨)
- ad-unit-code는 표시할 광고 단위의 코드입니다.
광고 단위 경로에 포함된 모든 광고 단위 코드는 서식 규칙을 사용하여 Ad Manager를 선택합니다.
```
<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>
```

광고 게재위치 지정

다음 코드를 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>

테스트 페이지 미리보기

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

주의: 광고가 표시되지 않는 경우 페이지의 <head>가 추가한 <div> 요소의 ID와 일치합니다. 페이지의 <body>입니다.

직접 만든 광고 표시하기

직접 만든 광고를 표시하려면 테스트 표시에서 hello-gpt.html 파일을 사용하세요. 광고를 지정한 다음 헤더의 코드를 인벤토리를 판매할 수 있습니다

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

문서 헤더 섹션에 제공된 광고 태그 코드를 복사하여 사용합니다. 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>

업데이트된 hello-gpt.html 파일을 저장하고 웹브라우저에서 엽니다.

기본사항 알아보기