시작하기

0. 지원 버전

Chrome, Edge, Firefox, Safari 등 모던 브라우저
IE 11 이상 지원(IE 10 이하 버전은 SDK 미지원)

1. NAM 웹 SDK 라이브러리 로드

<head>에 아래와 같이 <script> 태그를 추가하여 SDK를 로드합니다.

SDK는 페이지 로드시 최초 1회만 로드 되어야 합니다.

SPA(Single Page Application)일 경우 인덱스 페이지에 SDK를 로드하는걸 권장합니다. React 광고 적용 예시

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello NAM SDK</title>
    <script async src="https://ssl.pstatic.net/tveta/libs/glad/prod/gfp-core.js"></script>
  </head>
  <body></body>
</html>

배포 환경 별 SDK 정보

배포 환경	SDK URL	SSP 광고 호출 도메인
TEST	https://test-img.tveta.naver.net/libs/glad/test/gfp-core.js	test-gfp.veta.naver.com
REAL	https://ssl.pstatic.net/tveta/libs/glad/prod/gfp-core.js	gfp.veta.naver.com

2. gladsdk의 명령어 대기열 생성하기

gladsdk.cmd를 초기화하여 SDK를 사용할 명령어 대기열을 생성합니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello NAM</title>
    <script async src="https://ssl.pstatic.net/tveta/libs/glad/prod/gfp-core.js"></script>
    <script>
      window.gladsdk = window.gladsdk || { cmd: [] };
    </script>
  </head>
</html>

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello NAM</title>
    <script async src="https://ssl.pstatic.net/tveta/libs/glad/prod/gfp-core.js"></script>
    <script>
      window.gladsdk = window.gladsdk || { cmd: [] };
      window.gladsdk.cmd.push(function () {
        console.log('NAM SDK LOADED!'); // NAM SDK 라이브러리 로드가 완료된 이후에 출력
      });
    </script>
  </head>
</html>

위험

NAM SDK가 로딩되기 이전에 window.gladsdk의 메소드는 존재하지 않기 때문에

window.gladsdk의 모든 메소드는 gladsdk.cmd 명령어 대기열을 통해 실행되어야 합니다.

자세한 내용은 트러블 슈팅 - gladsdk.cmd 미사용를 참고해주세요.

3. 광고 슬롯 정의

gladsdk.defineAdSlot()을 사용하여 광고 슬롯을 생성합니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello NAM</title>
    <script async src="https://ssl.pstatic.net/tveta/libs/glad/prod/gfp-core.js"></script>
    <script>
      window.gladsdk = window.gladsdk || { cmd: [] };

      window.gladsdk.cmd.push(function () {
        var adSlotInfo = {
          adUnitId: 'WEB_nw_banner-N345765840', // 매체용으로 발급된 광고 유닛 ID
          adSlotElementId: 'division', // 광고 노출 영역(HTML Element)의 id
        };

        window.gladsdk.defineAdSlot(adSlotInfo);
      });
    </script>
  </head>
</html>

위험

WEB_nw_banner-N345765840는 예제를 테스트하기 위한 광고 유닛 ID 입니다.

실제 적용 시에는 매체 관리자를 통해 발급받은 광고 유닛 ID를 설정해야합니다.

4. 광고 노출 영역 지정 및 광고 노출

광고가 노출될 위치에 <div>를 생성하고 id를 설정합니다.

id는 광고 슬롯을 생성할 때 설정한 adSlotElementId 값과 동일해야 합니다.
```
<body>
  <div id="division"></div>
</body>
```

gladsdk.displayAd()을 사용하여 광고를 노출합니다.

<body>
  <div id="division"></div>
  <script>
    window.gladsdk.cmd.push(function () {
      window.gladsdk.displayAd('division');
    });
  </script>
</body>

5. 최종 샘플 코드

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Test NAM SDK</title>
    <script async src="https://ssl.pstatic.net/tveta/libs/glad/prod/gfp-core.js"></script>
    <script>
      window.gladsdk = window.gladsdk || { cmd: [] };

      window.gladsdk.cmd.push(function () {
        var adSlotInfo = {
          adUnitId: 'WEB_nw_banner-N345765840',
          adSlotElementId: 'division',
        };

        window.gladsdk.defineAdSlot(adSlotInfo);
      });
    </script>
  </head>
  <body>
    <div id="division"></div>
    <script>
      window.gladsdk.cmd.push(function () {
        window.gladsdk.displayAd('division');
      });
    </script>
  </body>
</html>

0. 지원 버전​

1. NAM 웹 SDK 라이브러리 로드​

배포 환경 별 SDK 정보​

2. gladsdk의 명령어 대기열 생성하기​

3. 광고 슬롯 정의​

4. 광고 노출 영역 지정 및 광고 노출​

5. 최종 샘플 코드​