...
본 가이드는 BuzzAd iOS SDK의 Native 지면을 연동하는 방법은 안내합니다. Native 지면은 광고 지면 레이아웃을 직접 구성한 후, 버즈빌 서버로부터 광고 데이터를 할당받아 광고 지면에 표시합니다
준비사항
...
Native 지면은 광고 레이아웃을 자유롭게 구성하여 노출하는 지면입니다. 광고 레이아웃의 최상위 컴포넌트는 BABNativeAdView이며, 아래 컴포넌트는 BABNativeAdView의 하위 컴포넌트로 구현해야 합니다.
Component | Description | Size | 제약 사항 | 비고설명 | 비고 |
|---|
| 광고 제목 | 광고의 제목 | 최대 10자 생략 부호로 일정 길이 이상은 생략 가능
|
|
Media view1200x627 pxTitle view광고의 제목 | 최대 10자 | - | 광고 설명 | 광고에 대한 상세 설명 | 생략 부호로 일정 길이 이상은 생략 가능 최대 40자
|
|
Description view광고에 대한 상세 설명 | 최대 40자 | - | 생략 부호로 일정 길이 이상은 생략 가능 광고주 아이콘 | 광고주 아이콘 이미지 | 종횡비 유지 필수 이미지 사이즈 80x80 [px]
|
| CTA |
view광고 문구- | 보상형 광고에는 포인트 정보도 포함해야 합니다.| colour | Green |
|---|
필수 | Icon image view광고주 아이콘 이미지 | 80x80 px | 종횡비 유지 | - | Sponsored view | 사용자에게 광고임을 알리는 문구 또는 이미지 | - | - | 다음은 Native 광고 레이아웃을 초기화하는 예시입니다.
...
| Expand |
|---|
|
| Code Block |
|---|
| class ViewController: UIViewController {
// Native 관련 뷰
private var adView = BABNativeAdView()
private var mediaView = BABMediaView()
private var titleLabel = UILabel()
...
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(self.adView)
adView.addSubview(self.mediaView)
adView.addSubview(self.titleLabel)
...
// LayoutConstraint 설정
...
}
} |
|
...
| Expand |
|---|
|
| Code Block |
|---|
| let adLoader = BABAdLoader(unitId: "YOUR_NATIVE_UNIT_ID")
// 버즈빌 서버에서 광고 정보를 받아옵니다
adLoader.loadAdWith(onSuccess: { ad in
self.renderAd(ad)
}, onFailure: { error in
// 광고가 없을 경우 호출됩니다. error를 통해 발생한 error의 원인을 알 수 있습니다
}) |
renderAd는 아래 광고 표시를 참고하시기 바랍니다.
|
...
| Expand |
|---|
|
| Code Block |
|---|
| - (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];
} |
|
| Expand |
|---|
|
| Code Block |
|---|
| 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]
} |
|
...