팝업 배너 광고
아래 가이드에서는 팝업 배너 광고를 로드하고, 표시하는 방법을 설명합니다.
기본 요건
시작 가이드에 따라 필요한 과정을 완료합니다.
테스트 광고 게재위치
Placement Code(게재위치 코드)는 어드민의 인벤토리 > 게재위치 메뉴에서 게재위치를 등록 시 시스템을 통해 자동으로 생성됩니다.
테스트 게재위치 목록
SAMPLE_POPUP_BANNER_WEB
320x320 이미지 + 애드뱃지
모서리 스타일: 직각
버튼 스타일: 버튼형
버튼 위치: 이미지 하단
좌측 버튼 문구: 오늘 그만보기
우측 버튼 문구: 닫기
광고 표시하기
팝업 배너 광고를 표시할 영역을
<div>로 생성하거나 전체 화면에 띄우길 원하는 경우 slot 생성만 진행합니다.해당 slot 에 광고 서비스를 붙입니다.
광고 서비스를 활성화 합니다.
아래 예시는 전체화면에 띄우는 예시입니다.
<head>
<script>
// nestads 명령어 큐 생성
window.nestads = window.nestads || { cmd: [] };
let popupSlot = null;
window.nestads.cmd.push(() => {
popupSlot = window.nestads
.defineSlot("SAMPLE_POPUP_BANNER_WEB", [300, 300]) // 1. slot 정의
.addService(nestads.pubAds()); // 2. 광고 서비스 설정
.setTargeting("age", "20") // 3. 타겟팅 및 표시 설정
.setConfig({
poopupBanner: {
backgroundColor: "#ff0000",
},
});
window.nestads.enableServices(); // 4. 광고 서비스 활성화
});
</script>
</head>광고를 로드합니다.
광고 로드 후 원하는 시점에
.show()를 호출해 광고를 표시합니다.원하는 시점에
.dismiss()를 호출해 팝업을 닫습니다.
<body>
<script>
window.nestads.cmd.push(() => {
nestads.load(popupSlot) // 5. 광고 로드
// 특정 시점이 되었을 때 show() 호출 구현
nestads.show(popupSlot) // 6. 팝업 표시
// 특정 시점이 되었을 때 dismiss() 호출 구현
nestads.dismiss(popupSlot) // 7. 팝업 닫기
});
</script>
</body>광고 상품별로 왼쪽, 오른쪽 버튼에 들어가는 텍스트가 달라질 수 있기 때문에 왼쪽, 오른쪽 버튼에 기본 동작이 따로 정의되어있지 않습니다. 팝업 광고 이벤트 리스너에 원하는 동작을 꼭 구현해야 합니다.
오늘 그만보기 구현 예시
쿠키나 localStorage 등을 활용해 오늘 그만보기 값을 저장하여 구현할 수 있습니다.
function shouldShowPopup() {
const hideUntil = localStorage.getItem("hidePopupUntil");
const today = new Date().toISOString().split("T")[0]; // YYYY-MM-DD
return hideUntil !== today; // 오늘 날짜와 저장된 날짜 비교
}
function hidePopupToday() {
const today = new Date().toISOString().split("T")[0]; // YYYY-MM-DD
localStorage.setItem("hidePopupUntil", today);
}
// 왼쪽 버튼에 오늘 그만보기 구현
nestads.pubAds().addEventListener("popupBannerSlotLeftButtonClicked", (event) => {
hidePopupToday();
});
... // slot 설정 및 load 과정을 다 완료했다고 가정
// 페이지 로드 시 열어야 하는 팝업 이라면
window.onload = function() {
if (shouldShowPopup()) { //팝업 오픈 여부 확인
popupSlot.show()
}
};닫기 구현 예시
닫기 기능은 dismiss() 를 통해 구현할 수 있습니다.
// 오른쪽 버튼에 닫기 구현
nestads.pubAds().addEventListener("popupBannerSlotRightButtonClicked", (event) => {
nestadds.dismiss(event.slot)
});
광고 이벤트 리스너
팝업 배너 광고에서 지원하는 이벤트 리스너는 다음을 참고하세요.
기본 공통 이벤트 외 추가로 팝업 배너 광고용 이벤트가 정의되어 있습니다.
Last updated