프리미엄 배너 광고

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

기본 요건

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

테스트 광고 게재위치

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

테스트 게재위치 목록

placementCode

설명

SAMPLE_EXPANDABLE_BANNER_IMAGE_APP

Mobile 화면을 위한 확장형 이미지 광고

확장형 형태: 가로형
확장형 표시 방법: 배너 덮음
확장형 위치: 배너 하단
레이아웃: 3

SAMPLE_EXPANDABLE_BANNER_VIDEO_APP

Mobile 화면을 위한 확장형 동영상 광고

확장형 형태: 가로형
확장형 표시 방법: 배너 덮음
확장형 위치: 배너 하단
레이아웃: 3

광고 상품 설정하기

어드민의 인벤토리 > 광고상품 메뉴에서 프리미엄 배너 광고 설정을 할 수 있습니다.

광고 구성 정보 섹션에서 광고 종류 > 프리미엄 배너 광고 > 확장형 배너 동영상형 / 확장형 배너 이미지형을 선택합니다.
각 미디어 스펙의 미디어 표시명 및 옵션들을 선택합니다.

게재위치 및 사이즈 섹션에서 레이아웃을 선택할 수 있습니다.

광고 표시하기

(필수) 게재위치를 설정합니다.
(옵션) delegate 및 스타일, 동영상 등 미디어 스펙 별 옵션을 설정합니다.
광고 요청 객체를 만들고 광고를 요청합니다.

class TestViewController: UIViewController {
  ...
  lazy var premiumBannerAdView: NestAdsPremiumBannerAdView!

  override func viewDidLoad() {

    // 확장 전 배너, 확장 후 배너의 사이즈를 넣어 초기화
    premiumBannerAdView = NestAdsPremiumBannerAdView(
        defaultBannerAdSize: NestAdsAdSizeFluid,
        expandedBannerAdSize: NestAdsAdSizeFluid)

    // 게재위치 및 delegate 설정
    premiumBannerAdView.placementCode = "SAMPLE_EXPANDABLE_BANNER_VIDEO_APP"
    premiumBannerAdView.delegate = self

    // (선택) 확장 전 배너의 옵션 설정
    premiumBannerAdView.defaultBannerOptions = NestAdsPremiumAdDefaultBannerOptions(...)

    // (선택) 확장 후 배너의 옵션 설정
    premiumBannerAdView.expandedBannerOptions = NestAdsPremiumAdExpandedBannerOptions(...)

    // 동영상, 힌트 에셋, 광고 문구, CTA 버튼 등 미디어 스펙별로 다양하게 옵션을 넣어줄 수 있습니다.
    // premiumBannerAdView.expandedBannerVideoOptions= NestAdsPremiumAdExpandedBannerVideoOptions(..)


    // 광고를 요청합니다.
    premiumBannerAdView.load(NestAdsAdRequest(...))

  }
  ...
}


// delegate 선언부
extension TestViewController: NestAdsPremiumBannerAdViewDelegate {
  func premiumAdViewDidExpand(_ adView: NestAdsPremiumBannerAdView) {
    // 배너가 확장되면 할 행동 정의
  }
  ...
}

Mobile 환경에서는 변동 사이즈(NestAdsAdSizeFluid)를 넣는 걸 권장하며, 고정 사이즈를 넣을 땐 확장 전,후의 가로 사이즈를 똑같이 설정하는 것을 권장합니다.

위 예제 코드를 실행하면 아래와 같이 프리미엄 배너를 게재할 수 있습니다.

추가 가이드

UICollectionView Cell 내에서 광고를 사용하는 경우 : estimatedItemSize 설정이 필요합니다.

  // collectionView의 estimatedItemSize를 automaticsize로 설정합니다.
  lazy var resultCollectionView: UICollectionView = {
    let layout = UICollectionViewFlowLayout()
    ...
    layout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
    let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
    ...
    return collectionView
  }()

배너 확장 후, 화면 영역에에 보이지 않을 때 스크롤 하는 예시 코드입니다.

  // NestAdsPremiumBanner Delegate 메서드 중 premiumAdViewExpandedRectInfoOnScrollView를 사용
  extension ResultPremiumViewController: NestAdsPremiumBannerAdViewDelegate {
    ...
    func premiumAdViewExpandedRectInfoOnScrollView(_ adView: NestAdsSDK.NestAdsPremiumBannerAdView, rect: CGRect) {
      if !checkFullyVisibleBannerInCollectionView(premiumBannerView, in: resultCollectionView) {
      resultCollectionView.scrollRectToVisible(rect, animated: true)
    }
    }
    ...
  }

  // 확장된 배너 가시영역 체크 로직 예시
  func checkFullyVisibleBannerInCollectionView(_ view: UIView?, in scrollView: UIScrollView?)
    -> Bool
  {
    guard let view,
      let scrollView, let window = view.window
    else { return false }
    let viewFrameInWindow = view.convert(view.bounds, to: window)
    let visibleRectInWindow = scrollView.convert(scrollView.bounds, to: window)
    return visibleRectInWindow.contains(viewFrameInWindow)
  }