팝업 배너 광고

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

기본 요건

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

테스트 광고 게재위치

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

테스트 게재위치 목록

placementCode

설명

SAMPLE_POPUP_BANNER_WEB

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

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

광고 표시하기

팝업 배너 광고를 표시할 영역을 <div>로 생성하거나 전체 화면에 띄우길 원하는 경우 slot 생성만 진행합니다.
해당 slot 에 광고 서비스를 붙입니다.
필요한 경우 해당 slot 에 타겟팅 및 광고 표시 설정
복수개의 광고를 요청할 때 maxNumberOfAds, creativeSpecCode 는 필수로 설정해야 하며, carousel, adList옵션을 설정할 수 있습니다.
광고 서비스를 활성화 합니다.

아래 예시는 전체화면에 띄우는 예시입니다.

<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",
            carousel: { // 복수개 광고 호출시 설정
              transitionDuration: 300,
              displayDuration: 10000,
              indicator: {
                backgroundColor: "#f0ff07",
              },
            },
            adList: { // 복수개 광고 호출시 설정
              useCustomClickAction: false,
            },
          },
          maxNumberOfAds: 5, // 복수개 광고 호출시 설정
          creativeSpecCode: "POPUP_BANNER" // 복수개 광고 호출시 설정
        });

      window.nestads.enableServices(); // 5. 광고 서비스 활성화
    });
  </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) => {
    nestads.dismiss(event.slot)
});

커스텀 모아보기 구현 예시

adList.useCustomClickAction이 true로 설정된 경우, 모아보기 버튼 클릭 시 popupBannerListViewClicked 이벤트가 발생합니다. 이 이벤트를 통해 전달받은 광고 객체를 사용하여 커스텀 모아보기 UI를 직접 구현할 수 있습니다.

커스텀 모아보기 팝업이 열릴 때 다른 광고가 가려진다면, 노출 로깅을 정확하게 하기 위해 beginOcclusion과 endOcclusion 메서드를 사용해야 합니다.

useCustomClickAction이 false인 경우 SDK가 자동으로 리스트뷰를 표시하므로 beginOcclusion과 endOcclusion을 호출할 필요가 없습니다.

let customListViewOverlay = null;

// 모아보기 버튼 클릭 이벤트 리스너
nestads.pubAds().addEventListener("popupBannerListViewClicked", (event) => {
  // 커스텀 모아보기 팝업이 다른 광고를 가릴 경우, 가림 처리
  nestads.pubAds().beginOcclusion();

  // 커스텀 모아보기 팝업 열기
  openCustomListView(event.adList);
});

function openCustomListView(adList) {
  // 오버레이 생성
  customListViewOverlay = document.createElement('div');
  Object.assign(customListViewOverlay.style, {
    position: 'fixed',
    top: '0',
    left: '0',
    width: '100%',
    height: '100%',
    backgroundColor: 'rgba(0, 0, 0, 0.7)',
    zIndex: '10000',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  });

  // 팝업 컨테이너
  const popup = document.createElement('div');
  Object.assign(popup.style, {
    backgroundColor: '#fff',
    borderRadius: '12px',
    padding: '20px',
    maxWidth: '500px',
    maxHeight: '80vh',
    overflow: 'auto',
  });

  // 헤더
  const header = document.createElement('div');
  Object.assign(header.style, {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: '16px',
  });

  const title = document.createElement('h2');
  title.textContent = '모아보기';
  title.style.margin = '0';

  const closeBtn = document.createElement('button');
  closeBtn.textContent = '✕';
  Object.assign(closeBtn.style, {
    background: 'none',
    border: 'none',
    fontSize: '24px',
    cursor: 'pointer',
  });
  closeBtn.onclick = closeCustomListView;

  header.appendChild(title);
  header.appendChild(closeBtn);
  popup.appendChild(header);

  // 광고 리스트
  adList.forEach((ad, index) => {
    const adItem = document.createElement('div');
    Object.assign(adItem.style, {
      marginBottom: '12px',
      padding: '12px',
      border: '1px solid #ddd',
      borderRadius: '8px',
    });

    const img = document.createElement('img');
    img.src = ad.image.resourceUrl;
    img.style.width = '100%';
    img.style.borderRadius = '4px';

    const info = document.createElement('p');
    info.textContent = `광고 ${index + 1} - ID: ${ad.adInfo.adId}`;
    info.style.marginTop = '8px';

    adItem.appendChild(img);
    adItem.appendChild(info);
    popup.appendChild(adItem);
  });

  customListViewOverlay.appendChild(popup);
  document.body.appendChild(customListViewOverlay);
}

function closeCustomListView() {
  if (customListViewOverlay) {
    document.body.removeChild(customListViewOverlay);
    customListViewOverlay = null;

    // 커스텀 모아보기 팝업이 닫힐 때 가림 해제
    nestads.pubAds().endOcclusion();
  }
}

광고 이벤트 리스너

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

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

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

Last updated 7 days ago