시작하기

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

nestads 의 명령어 큐 생성하기

nestads.cmd 를 초기화하여 명령어 큐를 생성합니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Display a test ad</title>
    <script>
      window.nestads = window.nestads || { cmd: [] };
    </script>
  </head>
</html>

NestAds SDK 로드

HTML 문서의 <head> 에 <script> 태그를 추가하여 NestAds SDK를 로드합니다.

<script>
  window.nestads = window.nestads || { cmd: [] };
</script>
<head>
  <script src="https://static.nestads.com/sdk/js/${version}/nestads-sdk.js"></script>
  <!-- ex) <script src="https://static.nestads.com/sdk/js/v2.2.0/nestads-sdk.js"></script>-->
</head>

NestAds SDK 는 로드가 완료되면 nestads.cmd에 대기중인 명령어를 처리합니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Display a test ad</title>
    <script>
      window.nestads = window.nestads || { cmd: [] };
    </script>
    <script src="https://static.nestads.com/sdk/js/${version}/nestads-sdk.js"></script>
    <script>
      window.nestads.cmd.push(function() {
        console.log("NestAds SDK is Loaded!") //NestAds SDK 가 로드 완료되면 출력
      })
    </script>
  </head>
</html>

광고 slot 정의

NestAds SDK 에서는 광고를 slot 단위로 게재합니다.
아래 예시의 광고 slot은 SAMPLE_IMAGE_BANNER/300/250 라는 게재위치의 300x250 크기의 광고를 <div id="banner-ad"> 에 로드 할 것이라는 것을 의미합니다.
- divId 를 넣지 않으면 body 영역 하단으로 광고가 그려집니다.

<head>
  <meta charset="utf-8" />
  <title>Display a test ad</title>
  <script>
     window.nestads = window.nestads || { cmd: [] };
  </script>
  <script src="https://static.nestads.com/sdk/js/${version}/nestads-sdk.js"></script>
  <script>
    window.nestads.cmd.push(() => {
      nestads
        window..defineSlot("SAMPLE_IMAGE_BANNER/300/250", [300, 250], "banner-ad")
    });
  </script>
</head>

Placement Code(게재위치 코드)는 어드민의 인벤토리 > 게재위치 메뉴에서 게재위치를 등록 시 시스템을 통해 자동으로 생성됩니다. 테스트 게재위치는 광고 종류의 하단 가이드를 참고하세요.

광고 서비스 설정

광고 slot을 정의하고 Slot.addService() 로 광고 서비스를 추가한 뒤 nestads.enableServices() 메서드를 사용하여 광고 서비스를 활성화 합니다.
사용 가능한 광고 서비스 목록
- PubAdsService

<head>
  <meta charset="utf-8" />
  <title>Display a test ad</title>
  <script>
     window.nestads = window.nestads || { cmd: [] };
  </script>
  <script src="https://static.nestads.com/sdk/js/${version}/nestads-sdk.js"></script>
  <script>
    window.nestads.cmd.push(() => {
      window.nestads
        .defineSlot("SAMPLE_IMAGE_BANNER/300/250", [300, 250], "banner-ad")
        .addService(nestads.pubAds());

      window.nestads.enableServices(); //광고 서비스 활성화
    });
  </script>
</head>

광고가 게재될 위치 지정 및 광고 게재

광고가 게재될 위치 지정

광고가 게재될 위치에 <div> 를 생성하고 id를 설정합니다.
id는 광고 slot 을 생성할 때 설정한 세 번째 파라미터와 동일해야 합니다.
아래 예시는 <div id="banner-ad"> 요소에 광고를 게재하는 걸 보여줍니다.

<body>
  <div id="banner-ad"></div>
</body>

팝업 배너 광고 처럼 전체 영역을 사용해야 하는 광고 종류는 위치를 지정하지 않을 수 있습니다.

위치를 지정하지 않은 경우 전체 영역인 <body></body> 하위로 광고가 그려집니다.

광고 게재

nestads.display() 를 사용하여 광고를 게재할 경우 요청과 동시에 광고를 화면에 그려줍니다.
nestads.load(), nestads.show() 를 사용하여 광고를 게재할 경우 요청과 표시를 시점을 나누어 사용할 수 있습니다.

<body>
  <div id="banner-ad"></div>
  <script>
    window.nestads.cmd.push(() => {

      // 요청과 동시에 표시
      window.nestads.display("banner-ad");

      // 요청과 표시를 나눔
      // window.nestads.load("banner-ad");
      // window.nestads.show("banner-ad");
    });
  </script>
</body>

최종 샘플 코드

<head>
  <meta charset="utf-8" />
  <title>Display a test ad</title>
  <script>
     window.nestads = window.nestads || { cmd: [] };
  </script>
  <script src="https://static.nestads.com/sdk/js/${version}/nestads-sdk.js"></script>
  <script>
    window.nestads.cmd.push(() => {
      window.nestads
        .defineSlot("SAMPLE_IMAGE_BANNER/300/250", [300, 250], "banner-ad")
        .addService(nestads.pubAds());

      window.nestads.enableServices();
    });
  </script>
</head>
<body>
 <div id="banner-ad"></div>
  <script>
    window.nestads.cmd.push(() => {
      window.nestads.display("banner-ad"); //광고 게재
    });
  </script>
</body>

PreviousRelease Notes Next개발계 SDK 추가

Last updated 4 months ago