개요

본 가이드는 BuzzAd iOS SDK의 Native 지면을 연동하는 방법은 안내합니다. Native 지면은 광고 지면 레이아웃을 직접 구성한 후, 버즈빌 서버로부터 광고 데이터를 할당받아 광고 지면에 표시합니다

준비사항

2. 시작하기 적용 완료
Native 지면에 사용할 Unit ID (이하 YOUR_NATIVE_UNIT_ID)

광고 레이아웃 구성

Native 지면은 광고 레이아웃을 자유롭게 구성하여 노출하는 지면입니다. 광고 레이아웃의 최상위 컴포넌트는 BABNativeAdView이며, 아래 컴포넌트는 BABNativeAdView의 하위 컴포넌트로 구현해야 합니다.

Component	Description	Size	제약 사항	비고
필수 Media view	이미지, 동영상 등 광고 소재	1200x627 px	종횡비 유지	여백 추가 가능
필수Title view	광고의 제목	최대 10자	-	생략 부호로 일정 길이 이상은 생략 가능
필수Description view	광고에 대한 상세 설명	최대 40자	-	생략 부호로 일정 길이 이상은 생략 가능
필수CTA view	광고 참여를 유도하는 문구	최대 7자	-	생략 부호로 일정 길이 이상은 생략 가능 보상형 광고에는 포인트 정보도 포함해야 합니다.
필수Icon image view	광고주 아이콘 이미지	80x80 px	종횡비 유지	-
임의Sponsored view	사용자에게 광고임을 알리는 문구 또는 이미지	-	-	예시) “광고”, “ad”, “스폰서”, “Sponsored”

다음은 Native 광고 레이아웃을 초기화하는 예시입니다.

Objective-C

@implementation ViewController {

  // Native 관련 뷰
  BABNativeAdView *_adView;
  BABMediaView *_mediaView;
  UILabel *_titleLabel;
  ...
}

- (void)viewDidLoad {
  [super viewDidLoad];
  
  _adView = [[BABNativeAdView alloc] initWithFrame:CGRectZero];
  _mediaView = [[BABMediaView alloc] initWithFrame:CGRectZero];
  _titleLabel = [[UILabel alloc] initWithFrame:CGRectZero];
  ...
  
  [self addSubview:_adView];
  [_adView addSubview:_mediaView];
  [_adView addSubview:_titleLabel];
  ...
  
  // LayoutConstraint 설정
  ...
}
@end

Swift

class ViewController: UIViewController {
  // Native 관련 뷰
  private var adView = BABNativeAdView()
  private var mediaView = BABMediaView()
  private var titleLabel = UILabel()
  ...
  
  override func viewDidLoad() {
    super.viewDidLoad()
 
    addSubview(self.adView)
    adView.addSubview(self.mediaView)
    adView.addSubview(self.titleLabel)
    ...
    
    // LayoutConstraint 설정
    ...
  }
}

광고 요청

광고 레이아웃에 추가할 광고를 할당받습니다.

BABAdLoader의 loadAd를 실행하면 광고 데이터를 요청합니다. 다음은 광고 할당 요청 예시입니다.

Objective-C

BABAdLoader *adLoader = [[BABAdLoader alloc] initWithUnitId:@"YOUR_NATIVE_UNIT_ID"];
// 버즈빌 서버에서 광고 정보를 받아옵니다
[adLoader loadAdWithOnSuccess:^(BABAd * _Nonnull ad) {
  [self renderAd:ad];
} onFailure:^(NSError * _Nullable error) {
  // 광고가 없을 경우 호출됩니다. error를 통해 발생한 error의 원인을 알 수 있습니다
}];

renderAd는 아래 광고 표시를 참고하시기 바랍니다.

Swift

let adLoader = BABAdLoader(unitId: "YOUR_NATIVE_UNIT_ID")
// 버즈빌 서버에서 광고 정보를 받아옵니다
adLoader.loadAdWith(onSuccess: { ad in
  self.renderAd(ad)
}, onFailure: { error in
  // 광고가 없을 경우 호출됩니다. error를 통해 발생한 error의 원인을 알 수 있습니다
})

renderAd는 아래 광고 표시를 참고하시기 바랍니다.

광고 표시

할당받은 광고 데이터를 직접 구현한 광고 레이아웃에 추가합니다. 다음은 광고를 표시하는 예시입니다. (아래 예시에서는 SDWebImage 라이브러리를 사용하였습니다.)

Objective-C

- (void)renderAd(BABAd *ad) {
  // (1) Ad 의 각 요소를 세팅합니다.
  self.titleLabel.text = ad.creative.title;
  
  // description 필드가 objc 객체에 기본으로 있어서 body로 컨버팅 하여 사용
  self.descriptionLabel.text = ad.creative.body;

  [self.iconImageView sd_setImageWithURL:[NSURL URLWithString:ad.creative.iconUrl]];
  self.ctaLabel.text = [NSString stringWithFormat:@"+%d %@", (int)ad.reward, ad.creative.callToAction];
  [self.rewardIcon setImage:[UIImage imageNamed:@"point_icon"]];

  // (2) NativeAdView 에 다음의 항목을 추가합니다.
  self.adView.ad = ad;
  self.adView.mediaView = self.mediaView;    

  // (3) 광고 클릭이 가능한 영역을 지정합니다.
  self.adView.clickableViews = @[self.ctaButton, self.iconImageView];
}

Swift

func renderAd(ad: BABAd) {
  // (1) Ad 의 각 요소를 세팅합니다.
  self.titleLabel.text = ad.creative.title

  // description 필드가 objc 객체에 기본으로 있어서 body로 컨버팅 하여 사용
  self.descriptionLabel.text = ad.creative.body

  self.iconImageView.sd_setImage(with: URL(string: ad.creative.iconUrl))
  self.ctaLabel.text = "\(Int(ad.reward))P \(ad.creative.callToAction ?? "디폴트 스트링")"
  self.rewardIcon.image = UIImage(named: "point_icon")

  // (2) NativeAdView 에 다음의 항목을 추가합니다.
  self.adView.ad = ad
  self.adView.mediaView = self.mediaView

  // (3) 광고 클릭이 가능한 영역을 지정합니다.
  self.adView.clickableViews = [self.ctaButton, self.iconImageView]
}

광고 이벤트 수신

사용자가 광고와 상호작용하면서 발생하는 이벤트를 수신할 수 있습니다. 일반 광고와 동영상 광고에 따라 리스너가 상이합니다. 광고 참여 후 문구 변경 등을 이벤트를 수신하여 처리할 수 있습니다.

BABNativeAdViewDelegate: 일반 광고
BABNativeAdViewVideoDelegate: 동영상 광고

이벤트의 정의 및 동작을 광고 노출/클릭/참여와 관련한 콜백 변화 문서를 참고하여 확인할 수 있습니다.

아래는 일반 광고와 동영상 광고 이벤트를 수신하는 예시입니다.

Objective-C

@interface SampleViewController: UIViewController <BABNativeAdViewDelegate, BABNativeAdViewVideoDelegate>
@end

@implementation SampleViewController

- (void)viewDidLoad {
  adView.deleagte = self;
  adView.videoDelegate = self;
}

#pragma mark - BABNativeAdViewDelegate

// 광고가 impress 되었을 때 호출됩니다.
- (void)BABNativeAdView:(BABNativeAdView *)adView didImpressAd:(BABAd *)ad {
}

// 광고가 click 되었을 때 호출됩니다.
- (void)BABNativeAdView:(BABNativeAdView *)adView didClickAd:(BABAd *)ad {
}

// 리워드 요청이 시작될 때 호출됩니다.
- (void)BABNativeAdView:(BABNativeAdView *)adView willRequestRewardForAd:(BABAd *)ad {
}

// 리워드 요청이 완료되었을 때 호출됩니다. 결과는 `result` 인자에 담겨있습니다.
- (void)BABNativeAdView:(BABNativeAdView *)adView didRewardForAd:(BABAd *)ad withResult:(BABRewardResult)result {
}

// 광고에 참여 완료 되었을 때 호출됩니다. 이곳에서 UI를 참여 완료 상태로 변경합니다.
- (void)BABNativeAdView:(BABNativeAdView *)adView didParticipateAd:(BABAd *)ad {
    [self.rewardIcon setImage:[UIImage imageNamed:@"participated_icon"]];
}

#pragma mark - BABNativeAdViewVideoDelegate

- (void)BABNativeAdViewWillStartPlayingVideo:(BABNativeAdView *)adView {
}

- (void)BABNativeAdViewDidResumeVideo:(BABNativeAdView *)adView {
}

- (void)BABNativeAdViewWillReplayVideo:(BABNativeAdView *)adView {
}

- (void)BABNativeAdViewDidPauseVideo:(BABNativeAdView *)adView {
}

- (void)BABNativeAdView:(BABNativeAdView *)adView didFinishPlayingVideoAd:(BABAd *)ad {
}

@end

Swift

class SampleViewController: UIViewController {
    override func viewDidLoad {
        adView.deleagte = self
        adView.videoDelegate = self
    }
}

extension SampleViewController: BABNativeAdViewDelegate {
    // 광고가 impress 되었을 때 호출됩니다.
    func babNativeAdView(_ adView: BABNativeAdView, didImpress ad: BABAd) { }
  
    // 광고가 click 되었을 때 호출됩니다.
    func babNativeAdView(_ adView: BABNativeAdView, didClick ad: BABAd) { }
  
    // 리워드 요청이 시작될 때 호출됩니다.
    func babNativeAdView(_ adView: BABNativeAdView, willRequestRewardFor ad: BABAd) {
    }
  
    // 리워드 요청이 완료되었을 때 호출됩니다. 결과는 `result` 인자에 담겨있습니다.
    func babNativeAdView(_ adView: BABNativeAdView, didRewardFor ad: BABAd, with result: BABRewardResult) {
    }
  
    // 광고에 참여 완료 되었을 때 호출됩니다. 이곳에서 UI를 참여 완료 상태로 변경합니다.
    func babNativeAdView(_ adView: BABNativeAdView, didParticipateAd ad: BABAd) {
        self.rewardIcon.image = UIImage(named: "participated_icon")
    }
}
    
extension SampleViewController: BABNativeAdViewVideoDelegate {
    // 동영상 광고 Delegate
    func babNativeAdViewWillStartPlayingVideo(_ adView: BABNativeAdView) {
    }
  
    func babNativeAdViewDidResumeVideo(_ adView: BABNativeAdView) {
    }
  
    func babNativeAdViewWillReplayVideo(_ adView: BABNativeAdView) {
    }
  
    func babNativeAdViewDidPauseVideo(_ adView: BABNativeAdView) {
    }
  
    func babNativeAdView(_ adView: BABNativeAdView, didFinishPlayingVideoAd ad: BABAd) {
    }
}

4.1. iOS 2.3.x 기본 설정

목차

개요

준비사항

광고 레이아웃 구성

광고 요청

광고 표시

광고 이벤트 수신