Skip to content
:docs

Basic setup

Learn the basic settings for integrating Native 2.0.

Prerequisites

  • Complete Getting started.
  • A Unit ID for the Native 2.0 placement (referred to below as YOUR_NATIVE_UNIT_ID)

Configure the ad layout

You can create your own layout for Native 2.0 ads.

The Native 2.0 layout components and UI requirements are listed below.

ComponentDescription
Ad title (required)The ad's title. We recommend no more than 10 characters. You can replace part of the text with an ellipsis as needed, regardless of character count.
Ad creative (required)The image, video or other creative. Preserve its aspect ratio., Display it using BZVMediaView., Size: 1,200 × 627 px., You may add padding. Contact your Buzzvil representative for details.
Ad description (required)A detailed description of the ad. We recommend no more than 40 characters. You can replace part of the text with an ellipsis as needed, regardless of character count.
Advertiser icon (required)The advertiser's icon image. You must preserve its aspect ratio., Size: 80 x 80 px
CTA button (Required)A button that encourages users to engage with the ad. We recommend up to seven characters. You can truncate part of the text with an ellipsis as needed, regardless of its length., Display it using the BZVDefaultCtaView class.

Build the Native 2.0 ad layout in a view controller or custom view using the structure below. Follow these steps to implement the placement.

  1. Configure a view controller or custom view according to the Native 2.0 ad layout requirements.
  2. Configure BZVNativeAd2View, BZVMediaView and all views needed to display the ad in NativeAd2ViewBinder, then create the BZVNativeAd2ViewBinder object.

The following example configures a view controller according to the Native 2.0 ad layout requirements.

Swift
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 설정 
    // ...
  }
}

Display ads

Follow these steps and the sample code to display ads in the ad layout.

  1. Call bind() on the new BZVNativeAd2ViewBinder object to allocate and display an ad automatically.
    • If allocation fails, no ad appears. See step 2 to define failure behavior.
    • When the user completes participation, the placement automatically refreshes to the next ad.
  2. Optionally pass onRequest, onNext, onError and onCompleted closures to subscribeEvents() to implement UI or other behavior for each request state.
    • Call subscribeEvents() before calling bind().
    • Once configured, the same closures are used for automatic refreshes.
Swift
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()
  }
}

Add clickable areas

In addition to the default clickable MediaView and CtaView, add more clickable views using clickableViews of BZVNativeAd2ViewBinderBuilder, as shown below.

Swift
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()