커스텀형 광고
아래 가이드에서는 커스텀형 광고를 로드하고, 표시하고, 성과 수집 하는 방법을 설명합니다.
기본 요건
시작 가이드에 따라 필요한 과정을 완료합니다.
테스트 광고 게재위치
Placement Code(게재위치 코드)는 어드민의 인벤토리 > 게재위치 메뉴에서 게재위치를 등록 시 시스템을 통해 자동으로 생성됩니다.
테스트 게재위치 목록
SAMPLE_CUSTOM_EXPANDABLE_BANNER
40000001
단일 광고 요청용 게재위치
SAMPLE_MULTIPLE_IMAGE_BANNER
10000002
10000003
10000004
다중 광고 요청용 게재위치
커스텀형 광고는 매체 고유의 UI를 그려서 광고를 구성하고 싶을 때 사용하는 광고 형식입니다.
NestAds에서는 광고를 로드하고 광고 데이터를 받고, 성과를 수집하는 방법을 제공합니다.
소재 스펙 ID
커스텀형 광고 형식을 식별하는 데 사용되는 소재 스펙 ID는 어드민의 인벤토리 > 소재스펙 메뉴에서 확인할 수 있습니다. 소재 스펙 ID는 소재 스펙 등록 시 시스템을 통해 자동으로 생성됩니다.
소재 스펙 메뉴에서 소재 스펙을 등록 시 미디어 스펙을 자유롭게 구성할 수 있습니다.
미디어 스펙 ID는 커스텀형 광고를 표시할 때 각 미디어 스펙의 데이터를 가져오는 데 사용되는 식별자입니다.
WEB SDK에서 VIDEO 미디어 스펙은 지원하고 있지 않습니다. 미디어 스펙을 구성할 때 참고해주세요.
광고 로더 준비하기
커스텀형 광고는 loader 단위로 광고를 게재합니다.
게재위치 코드와 소재스펙ID 를 넣어 loader를 정의합니다.
해당 loader 에 광고 서비스를 붙입니다.
광고 서비스를 활성화 합니다.
광고를 요청할 준비를 마쳤습니다.
<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) => {
// 노출 성과 수집 완료되면 실행할 코드
});Last updated