본문으로 건너뛰기
buzzvilbuzzvil:docs

고급 설정

이 페이지에서는 BuzzAd iOS용 SDK의 네이티브 지면에서 구현할 수 있는 기능을 확인할 수 있습니다.

CTA 버튼 자체 구현하기

BuzzAd iOS용 SDK에서 기본으로 제공하는 UI를 사용하지 않고 CTA 버튼을 직접 구현할 수 있습니다.

CTA 버튼을 직접 구현하려면 다음의 절차를 따르세요.

  1. CtaViewProtocol 프로토콜을 준수하는 UIView 클래스의 서브클래스를 생성하세요. 다음은 UIStackView를 활용하여 CTA View 클래스를 생성한 예시입니다.
import UIKit
import BuzzAdBenefit

final class CustomCtaView: UIStackView, BZVCtaViewProtocol {
  let rewardImageView = UIImageView(frame: .zero)
  let rewardLabel = UILabel(frame: .zero)
  let ctaLabel = UILabel(frame: .zero)

  required init(coder: NSCoder) {
    super.init(coder: coder)
    setUpView()
  }

  override init(frame: CGRect) {
    super.init(frame: frame)
    setUpView()
  }

  private func setUpView() {
    addArrangedSubview(rewardImageView)
    addArrangedSubview(rewardLabel)
    addArrangedSubview(ctaLabel)
  }

  // MARK: BZVCtaViewProtocol
  func renderRewardNotAvailableViewState(withCtaText ctaText: String) {
    // 리워드가 없는 광고에 대한 CTA 뷰 레이아웃을 정의합니다.
    rewardImageView.isHidden = true
    rewardLabel.isHidden = true
    ctaLabel.text = ctaText
  }

  func renderRewardAvailableViewState(withCtaText ctaText: String, reward: Int) {
    // 리워드가 있는 광고에 대한 CTA 뷰 레이아웃을 정의합니다.
    rewardImageView.isHidden = false
    rewardLabel.isHidden = false

    rewardImageView.image = UIImage(named: "YOUR_REWARD_IMAGE")
    rewardLabel.text = "+\(reward)"
    ctaLabel.text = ctaText
  }

  func renderParticipatingViewState(withCtaText ctaText: String) {
    // 참여 확인 중인 광고에 대한 CTA 뷰 레이아웃을 정의합니다.
    rewardImageView.isHidden = true
    rewardLabel.isHidden = true
    ctaLabel.text = "YOUR_PARTICIPATING_TEXT"
  }

  func renderParticipatedViewState(withCtaText ctaText: String) {
    // 참여 완료한 광고에 대한 CTA 뷰 레이아웃을 정의합니다.
    rewardImageView.isHidden = false
    rewardLabel.isHidden = true

    rewardImageView.image = UIImage(named: "YOUR_PARTICIPATED_IMAGE")
    ctaLabel.text = "YOUR_PARTICIPATED_TEXT"
  }
}

에서 CustomCtaView를 사용하여 광고 데이터를 바인딩하세요.

import UIKit
import BuzzAdBenefit

final class ViewController: UIViewController {
  ...생략...
  // 이전 단계에서 정의한 CustomCtaView CTA View를 생성합니다.
  let ctaView = CustomCtaView(frame: .zero)
  lazy var viewBinder = BZVNativeAdViewBinder { builder in
    ...생략...
    builder.ctaView = self.ctaView
  }

  
  override func viewDidLoad() {
    ...생략...
    nativeAdView.addSubview(ctaView)
  }
  
  private func renderAd(_ ad: BZVNativeAd) {
    // 광고 데이터를 바인딩합니다.
    viewBinder.bind(with: ad)
  }
}

한 번의 광고 요청으로 여러 개의 광고를 할당받을 수 있습니다. 최대 10개까지 가능하며, 추가로 광고를 할당받으려면 버즈빌 담당자에게 문의하세요.

다음은 NATIVE_ADS_COUNT를 지정하여 여러 개의 광고를 할당받는 예시입니다.

let adsRequest = BZVNativeAdsRequest { builder in
  builder.adCount = NSNumber(value: NATIVE_ADS_COUNT) // 한 번에 로드할 광고 개수를 설정합니다.
}

let buzzAdNative = BZVBuzzAdNative(unitId: "YOUR_NATIVE_UNIT_ID")
buzzAdNative.loadAds(with: adsRequest) { nativeAds in
  // 광고 할당이 성공하면 호출됩니다.
} onFailure: { error in
  // 할당된 광고가 없으면 호출됩니다.
  print("Failed to load native ads")
}

 참고
광고 참여 상태에 따라 CTA View를 변경하기 위해 이벤트 리스너를 사용했다면, 더 이상 사용할 필요 없습니다.

BZVNativeAdEventDelegate를 통해 광고 콜백 이벤트를 수신할 수 있습니다. 광고 콜백 이벤트를 수신하려면 [NativeAdViewBinder bindWithNativeAd] 함수를 호출한 후에 리스너를 등록해야 합니다.

다음은 BZVNativeAd에 광고 이벤트 리스너를 등록하는 예시입니다.

import UIKit
import BuzzAdBenefit

final class ViewController: UIViewController, BZVNativeAdEventDelegate {

  private func renderAd(_ ad: BZVNativeAd) {
    viewBinder.bind(with: ad)
    
    // Optional: Native 광고 이벤트 처리를 위한 delegate을 등록하고 각 이벤트에 따라 필요한 기능을 구현합니다.
    // 주의: 반드시 bind 함수를 호출한 이후에 리스너 등록을 해야합니다.
    ad.delegate = self
  }
  
  // MARK: BZVNativeAdEventDelegate
  func didImpress(_ nativeAd: BZVNativeAd) {
    // Native 광고가 유저에게 노출되었을 때 호출됩니다.
  }

  func didClick(_ nativeAd: BZVNativeAd) {
    // 유저가 Native 광고를 클릭했을 때 호출됩니다.
  }

  func didRequestReward(for nativeAd: BZVNativeAd) {
    // 리워드 적립 요청시에 호출됩니다.
  }

  func didReward(for nativeAd: BZVNativeAd, with result: BZVRewardResult) {
    // 리워드 적립 결과를 수신했을 때 호출됩니다.
  }

  func didParticipateAd(_ nativeAd: BZVNativeAd) {
    // 광고 참여가 완료되었을 때 호출됩니다.
  }
}

광고에서 발생하는 콜백 이벤트를 수신할 수 있습니다.

다음은 BZVNativeAdView에 동영상 광고 이벤트 리스너를 등록하는 예시입니다.

import BuzzAdBenefit

final class ViewController: UIViewController, BZVNativeAdViewVideoDelegate {
  let nativeAdView = BZVNativeAdView(frame: .zero)
  ...생략...

  override func viewDidLoad() {
    ...생략...
    nativeAdView.videoDelegate = self
  }
  
  // MARK: BZVNativeAdViewVideoDelegate
  func bzvNativeAdView(_ nativeAdView: BZVNativeAdView, willStartPlayingVideoAd nativeAd: BZVNativeAd) {
  }

  func bzvNativeAdView(_ nativeAdView: BZVNativeAdView, didResumeVideoAd nativeAd: BZVNativeAd) {
  }

  func bzvNativeAdView(_ nativeAdView: BZVNativeAdView, willReplayVideoAd nativeAd: BZVNativeAd) {
  }

  func bzvNativeAdView(_ nativeAdView: BZVNativeAdView, didPauseVideoAd nativeAd: BZVNativeAd) {
  }

  func bzvNativeAdView(_ nativeAdView: BZVNativeAdView, didFinishPlayingVideoAd nativeAd: BZVNativeAd) {
  }
}