시작하기

0. 지원 버전

Chrome, Edge, Firefox, Safari 등 모던 브라우저
IE 미지원

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

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

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

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

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

배포 환경 별 SDK 정보

네이버 사내 테스트 환경에서 테스트 광고를 호출하기 위해서는 TEST 환경의 SDK를 로드해야 합니다.

아래 표를 참고하여 배포 환경에 맞는 SDK URL을 설정해주세요.

배포 환경	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 GFP</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>

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello GFP</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('GFP SDK LOADED!'); // GFP SDK 라이브러리 로드가 완료된 이후에 출력
      });
    </script>
  </head>
</html>

위험

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

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

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

3. 광고 슬롯 정의

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello GFP</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 GFP 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. GFP 웹 SDK 라이브러리 로드​

배포 환경 별 SDK 정보​

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

3. 광고 슬롯 정의​

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

5. 최종 샘플 코드​