iOS_Type A_Native(インフィード型ネイティブ広告)
BuzzAd-Benefit SDK: Type A - Native Ads
本ドキュメントは BuzzAd-Benefit SDKのType A(インフィード型ネイティブ広告)を実装する際に必要な技術情報をまとめた文書です。
※ 注意事項
Type A Nativeタイプの実装を行う前に、導入ガイドの内容がすべて適用されているかどうかを確認してください。
index
基本設定 Basic Usage
Step 1: BABAdLoader に広告をリクエスト
BABAdLoaderオブジェクトをインスタンス化するYOUR_NATIVE_AD_UNIT_IDをセットする
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クラスは1つの広告に対応する UIView componentとして、広告を表示させるための下位コンポーネントは必ずこのオブジェクトのchild として登録する必要があります。
広告素材を表示するViewには
BABMediaViewが必ず含まれていなければなりません。Interface builder(xib/storyboard) またはコードを通じて自由にレイアウトを構成することができます。
下位コンポーネント
コンポーネント | 説明 | サイズ | 詳細 | 必須/任意 |
|---|---|---|---|---|
Media view | 画像・動画等の広告素材 | 1200x627 px |
| 必須 |
Title view | 広告のタイトル | 最大 25字 日本語の場合は最大10字 | 省略符号(…)で一定数以上の文字を省略可能 | 必須 |
Description view | 広告の詳細説明 | 最大 100字 日本語の場合は最大30字 | 省略符号(…)で一定数以上の文字を省略可能 | 必須 |
CTA view |
| 最大 15字 日本語の場合は4〜7字 | 省略符号(…)で一定数以上の文字を省略可能 | 必須 |
Icon image view | 広告主のアイコン | 80x80 px | アスペクト比の維持を推奨(正方形) | 任意 |
Sponsored image/text view | 広告であることを明示するテキストまたは画像 |
| 広告, ad, スポンサード, Sponsored 等の文言を表示 | 任意 |
Step 3: BABAd オブジェクトでレイアウトを構成
Step 1 の onSuccess にて取得した BABAd オブジェクトを利用して広告ビューを作成します。
上のStep 2で生成した広告コンポーネントに広告の各要素をセットします。
NativeAdViewにMediaView,adをセットします。clickableViewslistを生成し、広告のクリックが可能になるよう設定した領域を指定します。該当ビューをクリックすると、広告ランディングページに遷移します。
// 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: BABNativeAdViewDelegate, BABNativeAdViewVideoDelegateを通じた広告イベントの処理
BABAdViewに delegateを設定して広告についてのイベントを受け取ることができます(イベントの定義及び動作はこちらを参照).
BABAdViewに delegateとvideoDelegateを設定して広告についてのイベントを受け取ることができます。 (広告のステータス別コールバックについてのカスタマイズを行う場合、コールバックの定義及び動作については https://buzzvil.atlassian.net/wiki/spaces/BDG/pages/502497748 を参照してください。)
応用設定 Advanced Usage
複数件のネイティブ広告読み込み
広告参加ステータスに応じたCTAボタン表示の分岐処理
Buzzvil Benefit SDKを通じて配信される広告は、基本的にすべてリワードが割り当てられています。 ただし、広告ごとにリワードの付与間隔(通常2時間に1回程度)がそれぞれ設定されており、ユーザーが次回のリワード付与タイミングよりも前に同一の広告に再度参加した場合はリワードが付与されません。よって、広告レンダリング時に次の方法で分岐処理を行い、適切なUIを用いて該当の広告がリワード付与の対象かどうかをユーザーに知らせる必要があります。
例えばある広告のIPU(1時間あたりの最大表示数上限)を無制限にし、リワード付与間隔が1時間の場合、最初の広告参加時にはリワードが付与されます。しかし、その後1時間以内に同じ広告が表示された場合には広告に参加してもリワードが付与されません。その旨をユーザーに知らせるため、CTA等のUIを「参加済み」または「0P(0ポイント)」と表示し、ユーザーにリワードが付与されない旨を通知する必要があります。
UI分岐処理の際に使用されるフィールド
広告オブジェクトの reward_status: Buzzvilサーバーにて広告を割り当てる時に該当の広告についてリワード付与周期内にユーザーの付与履歴がすでに存在する場合、"received" という戻り値を返します。(注意: reward_statusが"received"であってもrewardの値にはもともとリワード金額がそのまま記録されています。)
広告オブジェクトの is_participated: 現在割り当てられている広告の参加ステータスを確認するためのパラメータです。広告参加済みの状態になると該当の広告及びメモリ上の同一広告のis_participated値がtrueに変わり、onParticipateコールバックが呼び出されます。(注意: reward_statusが"received"であっても今回の割り当てにおいては再度参加する前まで is_participatedは "false" に設定されています。rewardの値にはもともとリワード金額がそのまま記録されています。)
分岐処理の例と疑似コード(pseudo code)