기본 설정

이 페이지에서는 네이티브 2.0을 연동하기 위한 기본적인 설정을 확인할 수 있습니다.

✏️ 참고
네이티브 2.0은 BuzzAd iOS용 SDK v3.15.x부터 지원합니다.

준비 사항

시작하기 적용 완료
네이티브 2.0 지면에 사용할 Unit ID (이하 YOUR_NATIVE_UNIT_ID)

✏️ 참고
기존 네이티브와 네이티브 2.0은 같은 Unit ID를 사용할 수 있습니다.

광고 레이아웃 구성하기

네이티브 2.0 지면의 광고 레이아웃을 직접 구성할 수 있습니다.

네이티브 2.0 광고 레이아웃을 구성하는 요소와 UI에 대해서는 아래의 표를 참고하세요.

구성 요소	설명
광고 제목 (필수)	광고의 제목입니다. 최대 10자까지 권장하며, 필요에 따라 글자 수에 상관 없이 일정 부분은 생략 부호도 대체할 수 있습니다.
광고 소재 (필수)	이미지, 동영상 등 광고 소재입니다. 광고 소재의 종횡비는 반드시 유지해야 합니다. `BZVMediaView`를 사용해서 표시해야 합니다. 사이즈: 1,200 x 627 (px) 여백을 추가할 수 있습니다. 자세한 내용은 버즈빌 매니저에게 문의하세요.
광고 설명 (필수)	광고에 대한 상세 설명입니다. 최대 40자까지 권장하며, 필요에 따라 글자 수에 상관 없이 일정 부분은 생략 부호로 대체할 수 있습니다.
광고주 아이콘 (필수)	광고주 아이콘 이미지입니다. 아이콘의 종횡비는 반드시 유지해야 합니다. 사이즈: 80 x 80 (px)
CTA 버튼 (필수)	광고의 참여를 유도하는 버튼입니다. 최대 7자까지 권장하며, 필요에 따라 글자 수에 상관 없이 일정 부분은 생략 부호로 대체할 수 있습니다. `BZVDefaultCtaView` 클래스를 사용해서 표시해야 합니다. ✏️ 참고 CTA 버튼의 디자인을 변경하려면 CTA 버튼 자체 구현하기 토픽을 참고하세요.

네이티브 2.0 광고 레이아웃은 뷰 컨트롤러 또는 커스텀 뷰에 아래 구조에 맞게 구성해야 합니다. 네이티브 2.0 광고 지면을 구현하려면 다음의 절차를 따르세요.

네이티브 2.0 광고 레이아웃 규격에 따라 뷰 컨트롤러 또는 커스텀 뷰를 구성하세요.
NativeAd2ViewBinder에 BZVNativeAd2View, BZVMediaView, 그리고 광고를 보여주기 위해 필요한 뷰를 모두 설정하여 BZVNativeAd2ViewBinder 객체를 생성하세요.

다음은 네이티브 2.0 광고 레이아웃 규격에 따라 뷰 컨트롤러를 구성하는 예시입니다.

Swift
Objective-C

import UIKit
import BuzzAdBenefit

final class ViewController: UIViewController {
  private let nativeAd2View = BZVNativeAd2View(frame: .zero)
  private let mediaView = BZVMediaView(frame: .zero)
  private let iconImageView = UIImageView(frame: .zero)
  private let titleLabel = UILabel(frame: .zero)
  private let descriptionLabel = UILabel(frame: .zero)
  private let ctaView = BZVDefaultCtaView(frame: .zero)

  private lazy var viewBinder = BZVNativeAd2ViewBinder
    .Builder(unitId: "YOUR_NATIVE_UNIT_ID")
    .nativeAd2View(nativeAd2View)
    .mediaView(mediaView)
    .iconImageView(iconImageView)
    .titleLabel(titleLabel)
    .descriptionLabel(descriptionLabel)
    .ctaView(ctaView)
    .build()
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    self.view.addSubview(nativeAd2View)
    nativeAd2View.addSubview(mediaView)
    nativeAd2View.addSubview(iconImageView)
    nativeAd2View.addSubview(titleLabel)
    nativeAd2View.addSubview(descriptionLabel)
    nativeAd2View.addSubview(ctaView)

    // AutoLayout Constraints 설정 
    // ...
  }
}

@import BuzzAdBenefit;

@interface ViewController ()

@property (nonatomic, strong, readonly) BZVNativeAd2View *nativeAd2View;
@property (nonatomic, strong, readonly) BZVMediaView *mediaView;
@property (nonatomic, strong, readonly) UIImageView *iconImageView;
@property (nonatomic, strong, readonly) UILabel *titleLabel;
@property (nonatomic, strong, readonly) UILabel *descriptionLabel;
@property (nonatomic, strong, readonly) BZVDefaultCtaView *ctaView;
@property (nonatomic, strong, readonly) BZVNativeAd2ViewBinder *viewBinder;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  _nativeAd2View = [[BZVNativeAd2View alloc] initWithFrame:CGRectZero];
  [self.view addSubview:_nativeAd2View];

  _mediaView = [[BZVMediaView alloc] initWithFrame:CGRectZero];
  [_nativeAd2View addSubview:_mediaView];

  _iconImageView = [[UIImageView alloc] initWithFrame:CGRectZero];
  [_nativeAd2View addSubview:_iconImageView];

  _titleLabel = [[UILabel alloc] initWithFrame:CGRectZero];
  [_nativeAd2View addSubview:_titleLabel];

  _descriptionLabel = [[UILabel alloc] initWithFrame:CGRectZero];
  [_nativeAd2View addSubview:_descriptionLabel];

  _ctaView = [[BZVDefaultCtaView alloc] initWithFrame:CGRectZero];
  [_nativeAd2View addSubview:_ctaView];
  
  _viewBinder = [BZVNativeAd2ViewBinder viewBinderWithBlock:^(BZVNativeAd2ViewBinderBuilder * _Nonnull builder) {
    builder.unitId = @"YOUR_NATIVE_UNIT_ID";
    builder.nativeAd2View = self.nativeAd2View;
    builder.mediaView = self.mediaView;
    builder.iconImageView = self.iconImageView;
    builder.titleLabel = self.titleLabel;
    builder.descriptionLabel = self.descriptionLabel;
    builder.ctaView = self.ctaView;
  }];

  // AutoLayout Constraints 설정
  // ...
}

@end

✏️ 참고
뷰 컨트롤러나 커스텀 뷰 이외의 다른 방식으로 네이티브 2.0 지면을 구현하려면 버즈빌 담당자에게 문의하세요.

광고 보여주기

광고 레이아웃에 광고를 보여주기 위해 예시 코드를 참고하여 다음의 절차를 따르세요.

생성된 BZVNativeAd2ViewBinder객체의 bind()를 호출하면 자동으로 광고를 할당받고 레이아웃에 표시합니다.
- 광고 할당에 실패하면 광고가 표시되지 않습니다. 실패 시 동작을 정의하려면 2번 절차를 참고하세요.
- 사용자가 광고 참여 완료시 자동으로 다음 광고로 갱신됩니다.
(Optional) 광고 요청 상태에 따른 UI 등 원하는 동작을 구현하려면 subscribeEvents()함수의 인자로 onRequest, onNext, onError, onCompleted closure를 작성하여 필요한 시점에 원하는 동작을 수행하세요.
- bind() 함수를 호출하기 전에 subscribeEvents()를 호출하세요.
- 한번 closure를 설정해두면, 이후 자동 갱신에서도 동일하게 사용됩니다.

✏️ 참고
참여 완료 상태가 존재하지 않는 논리워드 콘텐츠, 이미 참여 완료된 광고는 클릭 후 랜딩 페이지에서 네이티브 2.0 지면으로 돌아올 때 다음 광고로 갱신됩니다.
사용자가 광고에 참여 중인 상태에는 다음 광고로 갱신되지 않습니다.
자동 광고 갱신을 비활성화하려면 버즈빌 담당자에게 문의하세요.

⚠️ 주의
모든 closure 내에서 Native 2.0 지면이 구성된 클래스에 접근한다면, retain cycle을 방지하기 위해 반드시 weak self를 사용해주세요.

Swift
Objective-C

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

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

    // Warning: retain cycle 방지를 위해 closure 내에서 반드시 weak self를 사용해주세요.
    viewBinder.subscribeEvents(onRequest: { [weak self] in
      // 광고 할당을 요청한 상태입니다.
      // 이후에는 onNext, onCompleted, onError 중 하나가 호출됩니다.
      // 광고 자동 갱신을 시도할 때마다 반복적으로 호출됩니다.
      // 로딩 화면 등을 구현할 수 있습니다.
      self?.activityIndicatorView.startAnimating()
    }, onNext: { [weak self] nativeAd2 in
      // 광고 할당에 성공하면 호출됩니다.
      // 이후에 광고 갱신 시 onRequest가 다시 호출됩니다.
      // 광고 자동 갱신을 성공할 때마다 반복적으로 호출됩니다.
      // 로딩 화면 등을 구현한 경우, 여기에서 로딩을 종료합니다.
      self?.activityIndicatorView.stopAnimating()
    }, onError: { [weak self] error in
      // 최초 광고 할당에 실패하면 호출됩니다.
      // 로딩 화면 등을 구현한 경우, 여기에서 로딩을 종료합니다.
      self?.activityIndicatorView.stopAnimating()
      // NativeAd2View를 숨기거나, Error UI로 대체할 수 있습니다.
      print("Failed to load ad by \(error.localizedDescription).")
    }, onCompleted: { [weak self] in
      // 더 이상 갱신할 수 있는 광고가 없을 때 호출됩니다.
      // 로딩 화면 등을 구현한 경우, 여기에서 로딩을 종료합니다.
      self?.activityIndicatorView.stopAnimating()
    })

    // 광고 할당 및 표시를 자동으로 수행합니다.
    viewBinder.bind()
  }
}

@interface ViewController ()
// ...생략...
@property (nonatomic, strong, readonly) UIActivityIndicatorView *activityIndicatorView;

@end

@implementation ViewController

- (void)viewDidLoad {
  // ...생략...

  // Warning: retain cycle 방지를 위해 weak self를 사용해주세요.
  __weak typeof(self) weakSelf = self;
  [_viewBinder subscribeEventsOnRequest:^{
    // 광고 할당을 요청하면 호출됩니다.
    // 이후에는 onNext, onCompleted, onError 중 하나가 호출됩니다.
    // 광고 자동 갱신을 시도할 때마다 반복적으로 호출됩니다.
    // 로딩 화면 등을 구현할 수 있습니다.
    __strong typeof(self) strongSelf = weakSelf;
    if (strongSelf) {
      [strongSelf.activityIndicatorView startAnimating];
    }
  } onNext:^(BZVNativeAd2 * _Nonnull nativeAd2) {
    // 광고 할당에 성공하면 호출됩니다.
    // 이후에 광고 갱신 시 onRequest가 다시 호출됩니다.
    // 광고 자동 갱신을 성공할 때마다 반복적으로 호출됩니다.
    // 로딩 화면 등을 구현한 경우, 여기에서 로딩을 종료합니다.
    __strong typeof(self) strongSelf = weakSelf;
    if (strongSelf) {
      [strongSelf.indicatorView stopAnimating];
    }
  } onError:^(NSError * _Nonnull error) {
    // 최초 광고 할당에 실패하면 호출됩니다.
    // 로딩 화면 등을 구현한 경우, 여기에서 로딩을 종료합니다.
    __strong typeof(self) strongSelf = weakSelf;
    if (strongSelf) {
      [strongSelf.indicatorView stopAnimating];
    }
    // NativeAd2View를 숨기거나, Error UI로 대체할 수 있습니다.
    NSLog(@"Failed to load ad by %@.", error.localizedDescription);
  } onCompleted:^{
    // 더 이상 갱신할 수 있는 광고가 없을 때 호출됩니다.
    // 로딩 화면 등을 구현한 경우, 여기에서 로딩을 종료합니다.
    __strong typeof(self) strongSelf = weakSelf;
    if (strongSelf) {
      [strongSelf.indicatorView stopAnimating];
    }
  }];

  // 광고 할당 및 표시를 자동으로 수행합니다.
  [_viewBinder bind];
}

@end

✏️ 참고
최초 광고 할당 요청에 실패했을 때는 subscribeEvents()함수의 onError closure가 호출되고 광고가 노출되지 않습니다. 광고 미할당 시 발생하는 NSError 오류 코드에 대한 자세한 내용은 오류 코드가 나타납니다 토픽을 참고하세요.
광고 갱신 시 할당 받을 수 있는 광고가 없을 때는 subscribeEvents()함수의 onCompleted가 호출되고 이전 광고가 유지됩니다.

클릭 가능 영역 추가하기

기본적으로 클릭이 가능한 MediaView, CtaView 외에 추가적으로 클릭 가능한 영역을 추가하고 싶은 경우 BZVNativeAd2ViewBinderBuilder의 clickableViews 를 통해 클릭 가능한 뷰를 추가할 수 있습니다. 다음 예시를 참고하세요.

Swift
Objective-C

private lazy var viewBinder = BZVNativeAd2ViewBinder
  .Builder(unitId: "YOUR_NATIVE_UNIT_ID")
  .nativeAd2View(nativeAd2View)
  .mediaView(mediaView)
  .iconImageView(iconImageView)
  .titleLabel(titleLabel)
  .descriptionLabel(descriptionLabel)
  .ctaView(ctaView)
  .setClickableViews([ // (optional) 클릭 가능한 영역을 설정 할 수 있습니다.
    mediaView,
    ctaView
  ])
  .build()

_viewBinder = [BZVNativeAd2ViewBinder viewBinderWithBlock:^(BZVNativeAd2ViewBinderBuilder * _Nonnull builder) {
  builder.unitId = @"YOUR_NATIVE_UNIT_ID";
  builder.nativeAd2View = self.nativeAd2View;
  builder.mediaView = self.mediaView;
  builder.iconImageView = self.iconImageView;
  builder.titleLabel = self.titleLabel;
  builder.descriptionLabel = self.descriptionLabel;
  builder.ctaView = self.ctaView;
  builder.clickableViews = @[self.mediaView, self.ctaView]; // (optional) 클릭 가능한 영역을 설정 할 수 있습니다.
}];

기본 설정

준비 사항​

광고 레이아웃 구성하기​

광고 보여주기​

클릭 가능 영역 추가하기​

준비 사항

광고 레이아웃 구성하기

광고 보여주기

클릭 가능 영역 추가하기