Native Ads 타입 (iOS)

BuzzAd-Benefit SDK: Type A - Native Ads


본 가이드는 BuzzAd-Benefit SDK의 네이티브 타입 광고를 연동하는 방법을 다루는 문서입니다.

※ 주의사항

  1. Native Ads 타입을 연동하기 전, 공통 가이드의 연동 사항을 모두 적용했는지 확인해 주세요.

 

Index

 

Basic Usage


Step 1: BABAdLoader 로 광고 요청

  1. BABAdLoader 객체를 인스턴스화

    • YOUR_NATIVE_AD_UNIT_ID 세팅

  2. loadAdWithOnSuccess:OnFailure 호출



// Objective-C BABAdLoader *adLoader = [[BABAdLoader alloc] initWithUnitId:YOUR_NATIVE_AD_UNIT_ID]; [adLoader loadAdWithOnSuccess:^(BABAd * _Nonnull ad) { [self renderAd:ad]; // Step 3 참조 } onFailure:^(NSError * _Nullable error) { // Handle error }];

 

// Swift let adLoader = BABAdLoader(unitId: YOUR_NATIVE_AD_UNIT_ID) adLoader.loadAdWith(onSuccess: { ad in self.renderAd(ad) // Step 3 참조 }, onFailure: { error in // Handle error })

Step 2: 광고 레이아웃 생성

매체사 앱 내에 레이아웃을 생성하고 광고 컴포넌트들을 관련 뷰에 연결합니다. 

  • BuzzAd Benefit 광고 레이아웃의 Root 는 BABNativeAdView로 설정되어야 합니다.

    • BABNativeAdView 클래스는 하나의 광고에 대응되는 UIView component로, 광고를 표시하기 위한 하위 컴포넌트들은 반드시 이 오브젝트의 subview 로 등록되어야 합니다.

  • 광고 소재를 보여주는 뷰에는 BABMediaView가 반드시 포함되어야 합니다.

  • Interface builder(xib/storyboard) 또는 코드를 통해 자유롭게 레이아웃을 구성할 수 있습니다.

 

하위 컴포넌트

Component

Description

Size

Requirements

Required

Component

Description

Size

Requirements

Required

Media view

이미지, 동영상 등 광고 소재

1200x627 px

  • Aspect ratio 유지 권장

  • 이미지 주위에 패딩 추가 가능

Y

Title view

광고의 제목

최대 10자

생략 부호로 일정 길이 이상은 생략 가능

Y

Description view

광고에 대한 상세 설명

최대 40자

생략 부호로 일정 길이 이상은 생략 가능

Y

CTA view

  • Reward text view: 액션 시 지급되는 포인트 금액

  • CTA text view: 광고의 액션을 유도하는 문구

최대 7자

생략 부호로 일정 길이 이상은 생략 가능

Y

Icon image view

광고주 아이콘 이미지

80x80 px

Aspect ratio 유지 권장

Y

Sponsored 
image/ text view

광고임을 나타내는 텍스트 또는 이미지

  •  

광고, ad, 스폰서, Sponsored 등의 문구를 노출

N

 

Step 3: BABAd 오브젝트로 레이아웃 구성

Step 1 의 onSuccess 에서 받은 BABAd 오브젝트를 이용하여 광고 뷰를 그립니다.

  1. 위 Step 2에서 생성한 광고 컴포넌트에 Ad 의 각 요소를 세팅합니다.

  2. NativeAdView 에 MediaViewad 를 세팅합니다.

  3. clickableViews list를 생성하여 광고 클릭이 가능하도록 설정할 영역을 지정합니다. 해당 뷰 영역을 클릭 시 광고 랜딩 페이지로 이동하게 됩니다.


    // Objective-C - (void)renderAd(BABAd *ad) { // 1) 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) self.adView.ad = ad; self.adView.mediaView = self.mediaView; // 3) self.adView.clickableViews = @[self.ctaButton, self.iconImageView]; }



     

Step 4: BABNativeAdViewDelegateBABNativeAdViewVideoDelegate를 통해 ad 이벤트 처리

BABAdView에 delegate와 videoDelegate를 설정하여 광고에 대한 이벤트를 전달 받을 수 있습니다. (광고의 상태별 콜백에 대해 다양한 커스터마이즈를 원하는 경우 콜백의 정의 및 동작은 광고 노출/클릭/참여와 관련한 콜백 변화 문서 참고)

 

 

 

Advanced Usage


복수 개의 Native 광고 로드하기

 

 

 

광고 참여 상태에 따른 CTA 등 소재 표시 분기 처리 방법

Buzzvil Benefit SDK를 통해 내려가는 광고는 기본적으로 모두 리워드가 할당되어 있습니다. 다만 광고마다 리워드 적립 주기(기본 2시간)를 설정되어 있고 사용자가 리워드 적립 주기 내에 동일 광고를 다시 참여하는 경우 리워드가 적립되지 않습니다. 따라서 광고 렌더링시 다음과 같은 방법으로 분기 처리를 하여 기획 의도에 맞는 UI를 사용자에게 보여주어야 합니다. 

예를 들어 어떤 광고의 IPU는 무제한이고 리워드 적립 주기는 1시간인 경우, 최초 참여시에는 리워드가 지급 되고 이후 1시간 내에 동일 광고가 노출되었을 때에는 광고를 참여하여도 리워드 지급이 되지 않으므로 CTA 등 UI를 "참여완료" 또는 "0P" 등으로 표시하여 사용자에게 리워드가 지급되지 않는 광고임을 알려주어야 합니다.

 

  • 분기 처리시 사용되는 필드

    • Ad 객체의 reward_status: 버즈빌 서버에서 광고를 할당할 때 해당 광고에 대하여 리워드 적립 주기 내에 현재 사용자의 적립 내역이 존재하면 "received" 값을 넣어줍니다. (주의: reward_status가 "received"여도 reward의 값은 원래 리워드 금액이 그대로 기록되어 있습니다.)

    • Ad 객체의 is_participated: 현재 할당 받은 광고들의 참여 상태를 sync하기 위한 값입니다. 광고 참여가 일어나면 해당 광고 및 메모리 상의 동일 광고들의 is_participated값이 true로 바뀌며 onParticipate 콜백이 호출됩니다. (주의: 버즈빌 서버에서 광고의 reward_status가 "received"로 내려온 경우에도 이번 할당에서 참여를 다시 하기 전까지 is_participated는 "false"로 설정되어 있습니다.)

  • 분기 처리 예시 pseudo code