본문으로 건너뛰기

고급 설정

이 페이지에서는 네이티브 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) {
// 비디오 광고의 비디오가 종료되면 호출됩니다.
}
}