...
우선 광고 레이아웃을 생성합니다. 아래 예시에서는 CustomAdViewHolder
로 정의합니다. 광고 레이아웃의 최상위 컴포넌트는 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” |
광고 레이아웃을 생성한 후, BABAdViewHolder
의 구현 클래스를 구현합니다. BABAdViewHolder
의 구현 클래스는 BABFeedConfig
에 설정합니다.
...
Expand |
---|
|
Code Block |
---|
| @interface CustomAdViewHolder: BABAdViewHolder {
BABNativeAdView *_adView;
BABMediaView *_mediaView;
UILabel *_titleLabel;
...
}
@end
@implementation CustomAdViewHolder
- (instancetype)initWithCoder:(NSCoder *)coder {
if (self = [super initWithCoder:coder]) {
[self setUpView];
}
return self;
}
- (instancetype)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
[self setUpView];
}
return self;
}
- (void)setUpView {
_adView = [[BABNativeAdView alloc] initWithFrame:CGRectZero];
_mediaView = [[BABMediaView alloc] initWithFrame:CGRectZero];
_titleLabel = [[UILabel alloc] initWithFrame:CGRectZero];
...
_adView.delegate = self;
[self addSubview:_adView];
[_adView addSubview:_mediaView];
[_adView addSubview:_titleLabel];
...
// LayoutConstraint 설정
...
}
// Bind view with ad
- (void)renderAd:(BABAd *)ad {
[super renderAd: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.adView.ad = ad;
// reward 가 없다면 포인트 미표시
self.adView.mediaView = self.mediaView;
if (ad.reward > 0) {self.adView.clickableViews = @[self.ctaButton, self.iconImageView];
[self.ctaLabel.text = [NSString stringWithFormat:@"+%d %@", (int)ad.reward, updateCtaButtonWithAd:ad];
}
- (void)updateCtaButtonWithAd:(BABAd *)ad {
NSString *callToAction = ad.creative.callToAction];
double reward = ad.reward;
double totalReward = [self.rewardIcon setImage:[UIImage imageNamed:@"point_icon"]];
} else {
self.ctaLabel.text = ad.creative.callToAction;
[self.rewardIcon setImage:nilad getTotalReward];
BOOL isParticipated = [ad isParticipated];
BOOL isClicked = [ad isClicked];
BOOL isActionType = [ad isActionType];
if (isClicked }&& isActionType && !isParticipated) {
self.adView.ad _rewardIcon.image = adnil;
self.adView.mediaView = self.mediaView;
self.adView.clickableViews = @[self.ctaButton, self.iconImageView];
}_ctaLabel.text = @"참여 확인 중";
} else {
if (totalReward > 0 && isParticipated) {
_rewardIcon.image = [UIImage imageNamed:@"ic_check"];
_ctaLabel.text = @"참여 완료";
} else if (reward > 0) {
_rewardIcon.image = [UIImage imageNamed:@"ic_coin"];
_ctaLabel.text = [NSString stringWithFormat:@"+%d %@", (int)reward, callToAction];
} else {
_rewardIcon.image = nil;
_ctaLabel.text = callToAction;
}
}
}
#pragma mark -- BABNativeAdViewDelegate
- (void)BABNativeAdView:(BABNativeAdView *)adView didImpressAd:(BABAd *)ad {
}
- (void)BABNativeAdView:(BABNativeAdView *)adView didClickAd:(BABAd *)ad {
[self updateCtaButtonWithAd:ad];
}
- (void)BABNativeAdView:(BABNativeAdView *)adView willRequestRewardForAd:(BABAd *)ad {
}
- (void)BABNativeAdView:(BABNativeAdView *)adView didRewardForAd:(BABAd *)ad withResult:(BABRewardResult)result {
[self updateCtaButtonWithAd:ad];
}
- (void)BABNativeAdView:(BABNativeAdView *)adView didParticipateAd:(BABAd *)ad {
[self updateCtaButtonWithAd:ad];
}
@end |
Code Block |
---|
| BABFeedConfig *config = [[BABFeedConfig alloc] initWithUnitId:@"YOUR_FEED_UNIT_ID"];
config.adViewHolderClass = [CustomAdViewHolder class]; |
|
...
우선 광고 레이아웃을 생성합니다. 아래 예시에서는 CustomCpsAdViewHolder
로 정의합니다. 광고 레이아웃의 최상위 컴포넌트는 BABNativeAdView
이며, 아래 컴포넌트는 BABNativeAdView
의 하위 컴포넌트로 구현해야 합니다.
...
Component | Description | Size | 제약 사항 | 비고 |
---|
일반 광고의 필수 컴포넌트 | 일반 광고에서 정의하는 컴포넌트 | - | - | Sponsored view는 권장 |
Category View | 상품의 카테고리를 표시합니다. | - | - | - |
OriginalPrice View | 상품의 원가를 표시합니다. | - | - | - |
Price View | 상품의 할인된 가격을 표시합니다. | - | - | - |
DiscountRate View | 상품 가격의 할인율을 표시합니다. | - | - | 할인율은 원가와 할인가로 비교하여 산출해야 합니다. |
광고 레이아웃을 생성한 후, BABAdViewHolder
의 구현 클래스를 구현합니다. BABAdViewHolder
의 구현 클래스는 BABFeedConfig
에 설정합니다.
...