본문으로 건너뛰기

고급 설정

이 페이지에서는 네이티브 2.0에서 구현할 수 있는 기능을 확인할 수 있습니다.

CTA 버튼 자체 구현하기​

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

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

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

final class CustomCtaView: UIStackView {
  private let rewardImageView = UIImageView(frame: .zero)
  private let rewardLabel = UILabel(frame: .zero)
  private 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
extension CustomCtaView: 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"
  }
}
  1. NativeAd2ViewBinder 에서 CustomCtaView를 사용하여 광고 데이터를 바인딩하세요.
import UIKit
import BuzzAdBenefit

final class ViewController: UIViewController {
  // ...생략...
  // 이전 단계에서 정의한 CustomCtaView CTA View를 생성합니다.
  private let ctaView = CustomCtaView(frame: .zero)

  private lazy var viewBinder = BZVNativeAd2ViewBinder
    .Builder(unitId: "YOUR_NATIVE_UNIT_ID")
    // ...생략...
    .ctaView(ctaView)
    .build()
  
  override func viewDidLoad() {
    // ...생략...
    nativeAd2View.addSubview(ctaView)

    viewBinder.bind()
  }
}

광고 이벤트 리스너 등록하기​

✏️  참고
광고 참여 상태에 따라 CTA View를 변경하기 위해 이벤트 리스너를 사용했다면, 더 이상 사용할 필요 없습니다. BZVNativeAd2ViewBinder.subscribeAdEvents()를 통해 광고 콜백 이벤트를 수신할 수 있습니다. 광고 콜백 이벤트를 수신하려면 bind() 함수를 호출하기 전에 subscribeAdEvents() 함수를 호출해야 합니다.

다음은 BZVNativeAd2ViewBinder에서 광고 이벤트를 수신하는 예시입니다.

final class ViewController: UIViewController {
  // ...생략...

  override func viewDidLoad() {
    // ...생략...

    // Native 광고 이벤트 처리를 위한 closure를 등록하고 각 이벤트에 따라 필요한 기능을 구현합니다.
    // 로그 기록, 단순 알림 외에 다른 동작을 추가하는 것을 권장하지 않습니다. 직접 구현한 동작이 네이티브에서 제공하는 기능(광고 자동 갱신 등)과 충돌할 수 있습니다.
    // Warning: 반드시 bind 함수를 호출하기 전에 호출해야 해야합니다.
    // Warning: retain cycle 방지를 위해 closure 내에서 반드시 weak self를 사용해주세요.
    viewBinder.subscribeAdEvents(onImpressed: { [weak self] nativeAd2 in
      // Native 광고가 유저에게 노출되었을 때 호출됩니다.
    }, onClicked: { [weak self] nativeAd2 in
      // 유저가 Native 광고를 클릭했을 때 호출됩니다.
    }, onRewardRequested: { [weak self] nativeAd2 in
      // 리워드 적립 요청시에 호출됩니다.
    }, onRewarded: { [weak self] nativeAd2, rewardResult in
      // 리워드 적립 결과를 수신했을 때 호출됩니다.
    }, onParticipated: { [weak self] nativeAd2 in
      // 광고 참여가 완료되었을 때 호출됩니다.
    })

    viewBinder.bind()
  }
}

동영상 광고 리스너 동록하기​

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

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

import UIKit
import BuzzAdBenefit

final class ViewController: UIViewController {
  private let nativeAd2View = BZVNativeAd2View(frame: .zero)
  // ...생략...

  override func viewDidLoad() {
    // ...생략...
    nativeAd2View.videoDelegate = self
  }
}

// MARK: BZVNativeAdViewVideoDelegate
extension ViewController: 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) {
    // 비디오 광고의 비디오가 종료되면 호출됩니다.
  }
}