팝업 배너 광고(준비중)

아래 가이드에서는 팝업 배너 광고를 로드하고, 표시하는 방법을 설명합니다.

Previous이미지 배너 광고 Next프리미엄 배너 광고

Last updated 20 days ago

팝업 배너 광고(준비중)

아래 가이드에서는 팝업 배너 광고를 로드하고, 표시하는 방법을 설명합니다.

기본 요건

에 따라 필요한 과정을 완료합니다.

테스트 광고 게재위치

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

테스트 게재위치 목록

placementCode

설명

SAMPLE_POPUP_BANNER_WEB

320x320 이미지 + 애드뱃지
모서리 스타일: 직각
버튼 스타일: 버튼형
버튼 위치: 이미지 하단
좌측 버튼 문구: 오늘 그만보기
우측 버튼 문구: 닫기

어드민의 인벤토리 > 광고상품 > 광고상품 등록 메뉴에서 팝업 배너 광고의 소재 스펙 및 기본 레이아웃을 설정할 수 있습니다.

광고 표시하기

팝업 배너 광고를 표시할 영역을 <div>로 생성하거나 전체 화면에 띄우길 원하는 경우 slot 생성만 진행합니다.
해당 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)
});

광고 이벤트 리스너

팝업 배너 광고에서 지원하는 이벤트 리스너는 다음을 참고하세요.

기본 공통 이벤트 외 추가로 팝업 배너 광고용 이벤트가 정의되어 있습니다.