기본 설정

이 페이지에서는 앱에 지면을 표시하는 방법과 광고 레이아웃을 구성하고 할당하는 방법 등 네이티브 지면을 연동하기 위한 기본적인 설정을 확인할 수 있습니다.

준비 사항

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

광고 레이아웃 구성하기

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

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

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

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

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

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

Swift
Objective-C

import BuzzAdBenefit

final class ViewController: UIViewController {
  let nativeAdView = BZVNativeAdView(frame: .zero)
  let mediaView = BZVMediaView(frame: .zero)
  let iconImageView = UIImageView(frame: .zero)
  let titleLabel = UILabel(frame: .zero)
  let descriptionLabel = UILabel(frame: .zero)
  let ctaView = BZVDefaultCtaView(frame: .zero)
  lazy var viewBinder = BZVNativeAdViewBinder { builder in
    builder.nativeAdView = self.nativeAdView
    builder.mediaView = self.mediaView
    builder.iconImageView = self.iconImageView
    builder.titleLabel = self.titleLabel
    builder.descriptionLabel = self.descriptionLabel
    builder.ctaView = self.ctaView
    builder.clickableViews = [ // 클릭 가능한 영역을 설정할 수 있습니다.
      mediaView,
      ctaView
    ]
  }

  override func viewDidLoad() {
    super.viewDidLoad()

    view.addSubview(nativeAdView)
    nativeAdView.addSubview(mediaView)
    nativeAdView.addSubview(iconImageView)
    nativeAdView.addSubview(titleLabel)
    nativeAdView.addSubview(descriptionLabel)
    nativeAdView.addSubview(ctaView)

    // LayoutConstraint 설정
    ...
  }
}

@import BuzzAdBenefit;

@interface ViewController ()

@property (nonatomic, strong, readonly) BZVNativeAdView *nativeAdView;
@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) BZVNativeAdViewBinder *viewBinder;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  _nativeAdView = [[BZVNativeAdView alloc] initWithFrame:CGRectZero];
  [self.view addSubview:_nativeAdView];

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

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

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

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

  _ctaView = [[BZVDefaultCtaView alloc] initWithFrame:CGRectZero];
  [_nativeAdView addSubview:_ctaView];
  
  _viewBinder = [BZVNativeAdViewBinder viewBinderWithBlock:^(BZVNativeAdViewBinderBuilder * _Nonnull builder) {
    builder.nativeAdView = self.nativeAdView;
    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]; // 클릭 가능한 영역을 설정할 수 있습니다.
  }];
  
  // LayoutConstraint 설정
  ...
}

@end

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

광고 할당 및 표시하기

광고 레이아웃을 구성한 후 버즈빌 서버로부터 광고 데이터를 할당받아 지면에 표시할 수 있습니다. 네이티브 지면에 광고를 할당받고 표시하려면 예시 코드를 참고하여 다음의 절차를 따르세요.

loadAdWithAdRequest를 호출하여 광고를 할당받으세요.
bindWithNativeAd를 호출하여 광고 레이아웃에 광고 데이터를 바인딩하세요.

✏️ 참고
loadAdWithAdRequest와 bindWithNativeAd를 호출하는 시점을 원하는 대로 구현할 수 있습니다. 단, 버즈빌은 원활한 광고 할당을 위해 호출 시점을 최대한 가깝게 구현하는 것을 권장합니다. 그렇지 않으면 광고 할당 로직에 의해 광고 게재율에 영향이 있을 수 있습니다.

Swift
Objective-C

final class ViewController: UIViewController {

  override func viewDidLoad() {
    ...생략...
    
    let nativeAdRequest = BZVNativeAdRequest()
    let buzzAdNative = BZVBuzzAdNative(unitId: "YOUR_NATIVE_UNIT_ID")
    buzzAdNative.loadAd(with: nativeAdRequest) { nativeAd in
      // 할당된 광고가 있으면 호출됩니다.
      // 광고 데이터를 바인딩합니다.
      self.renderAd(nativeAd)
    } onFailure: { error in
      // 할당된 광고가 없으면 호출됩니다.
      print("Failed to load a native ad")
    }
  }

  func renderAd(_ ad: BZVNativeAd) {
    viewBinder.bind(with: ad)
  }
}

@implementation ViewController

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

  BZVNativeAdRequest *adRequest = [[BZVNativeAdRequest alloc] init];
  BZVBuzzAdNative *buzzAdNative = [BZVBuzzAdNative nativeWithUnitId:@"YOUR_NATIVE_UNIT_ID"];
  [buzzAdNative loadAdWithAdRequest:adRequest onSuccess:^(BZVNativeAd * _Nonnull nativeAd) {
    // 할당된 광고가 있으면 호출됩니다.
    // 광고 데이터를 바인딩합니다.
    [self renderAd:nativeAd];
  } onFailure:^(NSError * _Nonnull error) {
    // 할당된 광고가 없으면 호출됩니다.
    NSLog(@"Failed to load a native ad");
  }];
}

- (void)renderAd:(BZVNativeAd *)ad {
  [_viewBinder bindWithNativeAd:ad];
}

@end

기본 설정

준비 사항​

광고 레이아웃 구성하기​

광고 할당 및 표시하기​

준비 사항

광고 레이아웃 구성하기

광고 할당 및 표시하기