ネイティブ広告実装手順 - fan-ADN/nendSDK-iOS GitHub Wiki
まだ広告枠作成、SDKダウンロードを行っていない場合、下記リンク先を参照してください。
プロジェクトにSDKを追加していない場合、以下のいずれかの方法でSDKを追加してください。
ネイティブ広告の実装は以下の3ステップで完了します。
アプリ側で広告を表示するためのViewを用意します。
広告表示用のViewはUIViewもしくはそのサブクラスであり、NADNativeViewRenderingプロトコルに準拠している必要があります。
NADNativeViewRenderingプロトコルは、アプリからSDK側に以下に記す広告の各要素を表示するためのViewを通知するIFを提供します。
- 広告明示
- 広告見出し
- 広告文
- プロモーション名
- 表示URL
- アクションボタン
- 広告画像
- ロゴ画像
各IFの内容は下表の通りです。
| メッセージ | 実装 | 内容 |
|---|---|---|
| - (UILabel *)prTextLabel | required | 広告明示を表示するためのUILabelを返却します |
| - (UILabel *)shortTextLabel | optional | 広告見出しを表示するためのUILabelを返却します |
| - (UILabel *)longTextLabel | optional | 広告文を表示するためのUILabelを返却します |
| - (UILabel *)promotionNameLabel | optional | プロモーション名を表示するためのUILabelを返却します |
| - (UILabel *)promotionUrlLabel | optional | 表示URLを表示するためのUILabelを返却します |
| - (UILabel *)actionButtonTextLabel | optional | アクションボタンテキストを表示するためのUILabelを返却します |
| - (UIImageView *)adImageView | optional | 広告画像を表示するためのUIImageViewを返却します |
| - (UIImageView *)nadLogoImageView | optional | ロゴ画像を表示するためのUIImageViewを返却します |
また、NADNativeViewRenderingプロトコルを介して返却されるViewは、NADNativeViewRenderingプロトコルに準拠したViewの子孫である必要があります。
ネイティブ広告は以下の制限内で表示してください。
- 広告明示は必ず表示させる必要があります
- 広告見出しと広告文、プロモーション名のうちいずれか一つを表示させる必要があります
- 広告画像を含む広告枠を選択された場合は、広告画像を必ず表示させる必要があります
- 画像は下記の制限内で表示させる必要があります
| 要素 | 拡縮 | 切り抜き |
|---|---|---|
| 広告画像 | 30%～150% | 上下左右6%ずつまで |
| ロゴ画像 | 制限なし | 禁止 |
拡縮を行う場合は縦横の比率が同じである必要があります。
Swift
import NendAd
class YourNativeAdView: UIView, NADNativeViewRendering {
@IBOutlet private weak var nativeAdPrTextLabel: UILabel!
@IBOutlet private weak var nativeAdShortTextLabel: UILabel!
@IBOutlet private weak var nativeAdLongTextLabel: UILabel!
@IBOutlet private weak var nativeAdPromotionNameLabel: UILabel!
@IBOutlet private weak var nativeAdPromotionUrlLabel: UILabel!
@IBOutlet private weak var nativeAdActionButtonTextLabel: UILabel!
@IBOutlet private weak var nativeAdImageView: UIImageView!
@IBOutlet private weak var nativeAdLogoImageView: UIImageView!
// MARK: - NADNativeViewRendering
func prTextLabel() -> UILabel! {
return self.nativeAdPrTextLabel
}
func shortTextLabel() -> UILabel! {
return self.nativeAdShortTextLabel
}
func longTextLabel() -> UILabel! {
return self.nativeAdLongTextLabel
}
func promotionNameLabel() -> UILabel! {
return self.nativeAdPromotionNameLabel
}
func promotionUrlLabel() -> UILabel! {
return self.nativeAdPromotionUrlLabel
}
func actionButtonTextLabel() -> UILabel! {
return self.nativeAdActionButtonTextLabel
}
func adImageView() -> UIImageView! {
return self.nativeAdImageView
}
func nadLogoImageView() -> UIImageView! {
return self.nativeAdLogoImageView
}
}Objective-C
#import <NendAd/NADNativeViewRendering.h>
@interface YourNativeAdView () <NADNativeViewRendering>
@property (nonatomic, weak) IBOutlet UILabel *nativeAdPrTextLabel;
@property (nonatomic, weak) IBOutlet UILabel *nativeAdShortTextLabel;
@property (nonatomic, weak) IBOutlet UILabel *nativeAdLongTextLabel;
@property (nonatomic, weak) IBOutlet UILabel *nativeAdPromotionNameLabel;
@property (nonatomic, weak) IBOutlet UILabel *nativeAdPromotionUrlLabel;
@property (nonatomic, weak) IBOutlet UILabel *nativeAdActionButtonTextLabel;
@property (nonatomic, weak) IBOutlet UIImageView *nativeAdImageView;
@property (nonatomic, weak) IBOutlet UIImageView *nativeAdLogoImageView;
@end
@implementation YourNativeAdView
...
#pragma mark - NADNativeViewRendering
- (UILabel *)prTextLabel
{
return self.nativeAdPrTextLabel;
}
- (UILabel *)shortTextLabel
{
return self.nativeAdShortTextLabel;
}
- (UILabel *)longTextLabel
{
return self.nativeAdLongTextLabel;
}
- (UILabel *)promotionNameLabel
{
return self.nativeAdPromotionNameLabel;
}
- (UILabel *)promotionUrlLabel
{
return self.nativeAdPromotionUrlLabel;
}
- (UILabel *)actionButtonTextLabel
{
return self.nativeAdActionButtonTextLabel;
}
- (UIImageView *)adImageView
{
return self.nativeAdImageView;
}
- (UIImageView *)nadLogoImageView
{
return self.nativeAdLogoImageView;
}
@endまず、NADNativeClientクラスのインスタンスを生成します。
Swift
import NendAd
// インスタンスを保持します
private var client: NADNativeClient!
...
self.client = NADNativeClient(spotID: spotID, apiKey: "apiKey")Objective-C
#import <NendAd/NADNativeClient.h>
// インスタンスを保持します
@property (nonatomic, strong) NADNativeClient *client;
...
self.client = [[NADNativeClient alloc] initWithSpotID:spotID apiKey:@"apiKey"];インスタンス生成時に必要な情報は以下の通りです。
| 引数名 | 型 | 説明 |
|---|---|---|
| spotID | NSInteger |
管理画面より発行されたSpotID |
| apiKey | NSString |
管理画面より発行されたApiKey |
続いて、NADNativeClientクラスのloadWithCompletionBlock:メソッドで広告のロードを行います。
ロードに成功した場合は引数のBlocksにNADNativeオブジェクトが渡されます。
ロードに失敗した場合は引数のBlocksにエラー情報を格納したNSErrorオブジェクトが渡されます。
Swift
self.client.load() { (ad, error) in
if let nativeAd = ad {
// 成功
} else {
// 失敗
print("error:\(error!)")
}
}Objective-C
[self.client loadWithCompletionBlock:^(NADNative *ad, NSError *error) {
if (ad) {
// 成功
} else {
// 失敗
NSLog(@"error: %@", error);
}
}];ロード失敗時にNSErrorに設定されるエラーコードは以下の通りです。
| コード | 内容 | 備考 |
|---|---|---|
| kNADNativeErrorCodeFailedToRequest | リクエスト失敗 | インターネット未接続等 (詳細はNSErrorのlocalizedDescriptionで確認できます) |
| kNADNativeErrorCodeInvalidResponseType | レスポンスタイプ不正 | SDK内部のエラー (発生は稀です) |
前項で取得したNADNativeクラスのintoView:advertisingExplicitly:メソッドで、広告情報をView内に描画します。
引数は以下の通りです。
| 引数名 | 型 | 説明 |
|---|---|---|
| adView | UIView<NADNativeViewRendering> |
前述広告情報をレイアウトしたView |
| advertisingExplicitly | NADNativeAdvertisingExplicitly |
広告明示の表示文言 |
NADNativeAdvertisingExplicitlyの定義内容は以下の通りです。
| 名前 | 表示文言 |
|---|---|
| NADNativeAdvertisingExplicitlyPR | PR |
| NADNativeAdvertisingExplicitlySponsored | Sponsored |
| NADNativeAdvertisingExplicitlyAD | 広告 |
| NADNativeAdvertisingExplicitlyPromotion | プロモーション |
Swift
var nativeAd: NADNative = ... // 広告オブジェクト
var adView: YourNativeAdView = ... // 広告情報をレイアウトしたView
nativeAd.intoView(adView, advertisingExplicitly: .PR)Objective-C
NADNative *nativeAd = ...; // 広告オブジェクト
YourNativeAdView *adView = ...; // 広告情報をレイアウトしたView
[nativeAd intoView:adView advertisingExplicitly:NADNativeAdvertisingExplicitlyPR];NADNativeClientクラスのenableAutoReloadWithInterval:completionBlockメソッドで広告の自動リロードが行えます。
Swift
self.client.enableAutoReload(withInterval: interval, completionBlock: { (ad, error) in
if let nativeAd = ad {
// 成功
} else {
// 失敗
}
})Objective-C
[self.client enableAutoReloadWithInterval:interval completionBlock:^(NADNative *ad, NSError *error) {
if (ad) {
// 成功
} else {
// 失敗
NSLog(@"error: %@", error);
}
}];| 引数名 | 型 | 説明 |
|---|---|---|
| interval | NSTimeInterval |
自動リロード間隔 |
| 自動リロード間隔は30秒以上を指定してください |
また、NADNativeClientクラスのdisableAutoReloadメソッドで広告の自動リロードを止めることができます。
Swift
self.client.disableAutoReload()Objective-C
[self.client disableAutoReload];NADNativeクラスにNADNativeDelegateプロコトルに準拠したdelegateを設定することで、広告のイベント通知を受け取ることができます。
Swift
import NendAd
class YourClass: NSObject, NADNativeDelegate {
private var client: NADNativeClient!
...
private func exampleLoadAd() {
self.client.load() { (ad, error) in
if let nativeAd = ad {
nativeAd.delegate = self
}
}
}
// MARK: - NADNativeDelegate
// 広告がクリックされた時に呼び出されます
func nadNativeDidClickAd(_ ad: NADNative!) {
print("Click ad.")
}
}Objective-C
#import <NendAd/NADNativeClient.h>
@interface YourClass : NSObject <NADNativeDelegate>
@property (nonatomic, strong) NADNativeClient *client;
@end
...
@implementation YourClass
...
__weak typeof(self) weakSelf = self;
[self.client loadWithCompletionBlock:^(NADNative *ad, NSError *error) {
if (ad) {
ad.delegate = weakSelf;
...
}
}];
...
@end
...
#pragma mark - NADNativeDelegate
///-----------------------------------------------
/// @optional
///-----------------------------------------------
// 広告がクリックされた時に呼び出されます
- (void)nadNativeDidClickAd:(NADNative *)ad
{
NSLog(@"click ad.");
}