커스텀형 광고

아래 가이드에서는 커스텀형 광고를 로드하고, 표시하고, 성과 수집 하는 방법을 설명합니다.

기본 요건

시작 가이드에 따라 필요한 과정을 완료합니다.

테스트 광고 게재위치

Placement Code(게재위치 코드)는 어드민의 인벤토리 > 게재위치 메뉴에서 게재위치를 등록 시 시스템을 통해 자동으로 생성됩니다.

테스트 게재위치 목록

placementCode	creativeSpecId	설명
SAMPLE_CUSTOM_EXPANDABLE_BANNER	40000001	단일 광고 요청용 게재위치
SAMPLE_MULTIPLE_IMAGE_BANNER	10000002 10000003 10000004	다중 광고 요청용 게재위치

---

커스텀형 광고는 매체 고유의 UI를 그려서 광고를 구성하고 싶을 때 사용하는 광고 형식입니다.

NestAds에서는 광고를 로드하고 광고 데이터를 받고, 성과를 수집하는 방법을 제공합니다.

소재 스펙 ID

커스텀형 광고 형식을 식별하는 데 사용되는 소재 스펙 ID는 어드민의 인벤토리 > 소재스펙 메뉴에서 확인할 수 있습니다. 소재 스펙 ID는 소재 스펙 등록 시 시스템을 통해 자동으로 생성됩니다.

소재 스펙 메뉴에서 소재 스펙을 등록 시 미디어 스펙을 자유롭게 구성할 수 있습니다.

미디어 스펙 ID는 커스텀형 광고를 표시할 때 각 미디어 스펙의 데이터를 가져오는 데 사용되는 식별자입니다.

WEB SDK에서 VIDEO 미디어 스펙은 지원하고 있지 않습니다. 미디어 스펙을 구성할 때 참고해주세요.

---

광고 로더 준비하기

커스텀형 광고는 loader 단위로 광고를 게재합니다.

1. 게재위치 코드와 소재스펙ID 를 넣어 loader를 정의합니다.

2. 해당 loader 에 광고 서비스를 붙입니다.

3. (옵션) 타겟팅 및 config 설정을 합니다.
4. 광고 서비스를 활성화 합니다.

5. 광고를 요청할 준비를 마쳤습니다.

<script>
  // nestads 명령어 큐 생성
  window.nestads = window.nestads || { cmd: [] };
​
  window.nestads.cmd.push(() => {
    const loader = nestads.defineLoader("SAMPLE_MULTIPLE_IMAGE_BANNER", [10000002,10000003,10000004]); // 1. 게재위치 코드와 소재스펙ID 를 넣어 loader를 정의합니다.
    loader.addService(nestads.pubAds()); // 2. 광고 서비스 설정
    loader.setConfig({httpTimeout: 1000, maxNumberOfAds: 3}); // 3. (옵션) config 설정
    loader.setTargeting("age", 30); // 3. (옵션) 타겟팅 설정
    window.nestads.enableServices(); // 4. 광고 서비스 활성화

  });
</script>

---

광고 요청하기

loader 설정을 마치면 광고 요청을 할 수 있습니다.

setConfig() 메서드를 이용해 maxNumberOfAds 를 설정하면 여러 개의 광고를 한 번에 요청할 수 있습니다. (따로 설정 하지 않으면 기본값은 1로, 단일 광고 요청이 됩니다.)

load() 메서드를 호출해 광고를 요청합니다.

 const loader = nestads.defineLoader("SAMPLE_MULTIPLE_IMAGE_BANNER", [10000002,10000003,10000004]);
loader.setConfig({maxNumberOfAds: 3}); // 최대 광고 갯수 설정
loader.load(); // 광고 요청

---

광고 표시하기 및 광고 이벤트 리스너

광고 로드가 완료되면 이벤트 리스너를 등록해 광고 응답 객체를 확인할 수 있습니다.

광고 응답 객체의 getAdMeta(mediaSpecId: string) 메서드를 활용하여 광고 정보 (리소스URL, 랜딩URL, 텍스트 값 등)을 확인할 수 있으며, 이를 활용해 원하는 광고 UI 를 그리고 동작을 지정해줍니다.

이 때 받은 광고 응답 객체는 저장하는 것이 좋습니다.

let customAds;
nestads.pubAds().addEventListener("loaderResponseReceived", (event) => {
  const response = event.customAds; //응답 받은 광고 객체 확인
  customAds = response;
  document.querySelector("#image1").src  = response[0].getAdMeta("Banner").resourceUrl; // Banner 라는 미디어 스펙 ID의 리소스URL 을 확인하여 화면에 표시해주기
})

광고 이벤트 리스너는 다음을 참고하세요.

• 광고 응답 완료
• 광고 응답 실패

---

광고 성과 수집하기

광고 응답을 받고, 광고 표시까지 완료했으면, 광고 성과를 수집할 차례입니다.

커스텀형 광고에서는 SDK가 UI를 그리지 않기 때문에, 매체에서 직접 광고 성과를 기록해야 합니다.

어드민에서 각 성과와 미디어 스펙을 매핑하고, 해당 미디어 스펙의 뷰가 노출되거나 클릭되면 SDK 로 성과를 전달해야 합니다.

노출 성과 기록

성과필드 매핑 > 노출수와 매핑된 미디어 스펙의 뷰가 노출되면 광고 응답 객체 의 recordImpression() 메서드를 호출합니다.

성과 수집이 완료되면 이벤트 리스너를 통해 완료된 시점을 알 수 있습니다.

function onChangeAdVisibility() {
  // 배너가 노출되면 노출 성과 기록
  customAd.recordImpression();
}


nestads.pubAds().addEventListener("customAdImpressionRecorded", (event) => {
 // 노출 성과 수집 완료되면 실행할 코드
});

클릭 성과 기록

성과필드 매핑 > 클릭수/행동유도 클릭수와 매핑된 미디어 스펙의 뷰가 클릭되면 광고 응답 객체 의 performClick(mediaSpecId: string) 메서드를 호출합니다.

성과 수집이 완료되면 이벤트 리스너를 통해 완료된 시점을 알 수 있습니다.

function bannerOnClick() {
  const landingUrl = customAd.getAdMeta("Banner").landingUrl;
  // 랜딩 URL 오픈
  window.open(landingUrl);

  // 클릭 성과 기록
  customAd.performClick("Banner");

}


nestads.pubAds().addEventListener("customAdClicked", (event) => {
 // 노출 성과 수집 완료되면 실행할 코드
});

랜딩이 되어야 하는 미디어 스펙이 클릭되면 랜딩URL 정보를 받아서 열어주는 동작을 직접 구현해야 합니다.