iOS SDK ネイティブ広告

はじめに

開発環境にXcodeを使用することを前提とします。

対応バージョン

iOS 12.0以降

導入の流れ

1. SDKをダウンロードします
   ↓
2. 例を参考に広告表示の実装を行います

1. SDKをダウンロードする

iOS SDK Getting Started / バナー広告からご確認ください。

2. 広告表示を実装する

loadRequestを行う前に、ネイティブ広告オブジェクトをdelegateメソッドで取得するためのsetUsePartsResponseの設定を行います。

/*
locationID:  管理画面から払い出された広告枠ID
adType:      枠サイズ kADG_AdType_Free:自由設定
rootViewController: 広告を配置するViewController
*/
adg = ADGManagerViewController(locationID: "48635", adType: .adType_Free, rootViewController: self)

// HTMLテンプレートを使用したネイティブ広告を表示するためには以下のように配置するViewを指定します
adg?.adSize = CGSize.init(width: 300, height: 250)
adg?.addAdContainerView(adView)

adg?.delegate = self

// ネイティブ広告パーツ取得を有効
adg?.usePartsResponse = true

/*
locationID:  管理画面から払い出された広告枠ID
adType:      枠サイズ kADG_AdType_Free:自由設定
rootViewController: 広告を配置するViewController
*/
self.adg = [[ADGManagerViewController alloc] initWithLocationID:@"48635"
                                                            adType:kADG_AdType_Free
                                                rootViewController:self];

// HTMLテンプレートを使用したネイティブ広告を表示するためには以下のように配置するViewを指定します
self.adg.adSize = CGSizeMake(300, 250);
[self.adg addAdContainerView:self.adView];

self.adg.delegate = self;

// ネイティブ広告パーツ取得を有効
self.adg.usePartsResponse = YES;

ネイティブ広告オブジェクトが取得できた場合、delegateメソッドの以下が呼び出されます。

func adgManagerViewControllerReadyMediation(_ adgManagerViewController: ADGManagerViewController, mediation: Any)

- (void)ADGManagerViewControllerReceiveAd:(ADGManagerViewController *)adgManagerViewController
                        mediationNativeAd:(id)mediationNativeAd

mediationNativeAdからネイティブ広告オブジェクトが取得できます。
ネイティブ広告オブジェクトはADGNativeAdクラスです。
参照するために、該当クラスにimportを追加してください。

import ADG

#import <ADG/ADGNativeAd.h>

id型からADGNativeAdへキャストし、クラス判定を行ってからアクセスしてください。

ADGNativeAdからネイティブ広告パーツを取得するパラメーターは以下の通りです。

要素名	object
タイトル	ADGNativeAd.title.text
メイン画像(長方形画像)URL	ADGNativeAd.mainImage.url
アイコン画像(正方形画像)URL	ADGNativeAd.iconImage.url
リード文	ADGNativeAd.desc.value
CTA(Call to action)のテキスト	ADGNativeAd.ctatext.value
広告主	ADGNativeAd.sponsored.value

実装例

#import "NativeAdsObjCViewController.h"
#import "ADGNativeAdView.h"
#import <ADG/ADGManagerViewController.h>
#import <ADG/ADGNativeAd.h>

@interface NativeAdsObjCViewController () <ADGManagerViewControllerDelegate>

@property (weak, nonatomic) IBOutlet UIView *adView;
@property (nonatomic) ADGManagerViewController *adg;

@end

@implementation NativeAdsObjCViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    /*
     locationID:  管理画面から払い出された広告枠ID
     adType:      枠サイズ kADG_AdType_Free:自由設定
     rootViewController: 広告を配置するViewController
     */
    self.adg = [[ADGManagerViewController alloc] initWithLocationID:@"48635"
                                                             adType:kADG_AdType_Free
                                                 rootViewController:self];

    // HTMLテンプレートを使用したネイティブ広告を表示するためには以下のように配置するViewを指定します
    self.adg.adSize = CGSizeMake(300, 250);
    [self.adg addAdContainerView:self.adView];

    self.adg.delegate = self;

    // ネイティブ広告パーツ取得を有効
    self.adg.usePartsResponse = YES;

    // インフォメーションアイコンのデフォルト表示
    // デフォルト表示しない場合は必ずADGInformationIconViewの設置を実装してください
    self.adg.informationIconViewDefault = false;

}

- (IBAction)didTapLoadRequestButton:(id)sender {
    // 広告リクエスト
    [self.adg loadRequest];
}

- (void)dealloc {
    // インスタンスの破棄
    self.adg.delegate = nil;
    self.adg = nil;
}

- (void)ADGManagerViewControllerReceiveAd:(ADGManagerViewController *)adgManagerViewController {
    NSLog(@"Received an ad.");
}

- (void)ADGManagerViewControllerReceiveAd:(ADGManagerViewController *)adgManagerViewController
                        mediationNativeAd:(id)mediationNativeAd {
    NSLog(@"Received an ad.");

    UIView *nativeAdView;
    if ([mediationNativeAd isKindOfClass: [ADGNativeAd class]]) {
        ADGNativeAdView *adgNativeAdView = [ADGNativeAdView view];
        [adgNativeAdView apply:(ADGNativeAd *)mediationNativeAd viewController:self];
        nativeAdView = adgNativeAdView;
    }

    if (nativeAdView) {
        // ローテーション時に自動的にViewを削除します
        [adgManagerViewController setAutomaticallyRemoveOnReload:nativeAdView];

        [self.adView addSubview:nativeAdView];
    }
}

- (void)ADGManagerViewControllerFailedToReceiveAd:(ADGManagerViewController *)adgManagerViewController
                                             code:(kADGErrorCode)code {
    NSLog(@"Failed to receive an ad.");
    // エラー時のリトライは特段の理由がない限り必ず記述するようにしてください。
    switch (code) {
        case kADGErrorCodeNeedConnection:   // ネットワーク不通
        case kADGErrorCodeExceedLimit:      // エラー多発
        case kADGErrorCodeNoAd:             // 広告レスポンスなし
            break;
        default:
            [adgManagerViewController loadRequest];
            break;
    }
}

ネイティブ広告デザイン例

• 作成される広告イメージ
  
• アプリに応じてカスタマイズしてください（画像ロード処理の非同期化など）。
• XIBはサンプルを参考にしてください。
  https://github.com/AdGeneration/ADG-iOS-SDK/tree/master/Samples

#import "ADGNativeAdView.h"
#import <ADG/ADGNativeAd.h>
#import <ADG/ADGMediaView.h>
#import <ADG/ADGInformationIconView.h>

@interface ADGNativeAdView()

@property (weak, nonatomic) IBOutlet UIImageView *iconImageView;
@property (weak, nonatomic) IBOutlet UILabel *titleLabel;
@property (weak, nonatomic) IBOutlet UILabel *descriptionLabel;
@property (weak, nonatomic) IBOutlet UIView *mediaViewContainerView;
@property (weak, nonatomic) IBOutlet UILabel *sponsoredLabel;
@property (weak, nonatomic) IBOutlet UILabel *ctaLabel;

@end

@implementation ADGNativeAdView

+ (instancetype)view {
    NSString *className = NSStringFromClass([self class]);
    return [[[NSBundle mainBundle] loadNibNamed:className
                                          owner:nil
                                        options:0] firstObject];
}

- (void)awakeFromNib {
    [super awakeFromNib];
    self.layer.borderWidth = 1.0f;
    self.layer.borderColor = UIColor.lightGrayColor.CGColor;

    self.iconImageView.contentMode = UIViewContentModeScaleAspectFit;
    self.iconImageView.clipsToBounds = YES;

    self.ctaLabel.backgroundColor = UIColor.whiteColor;
    self.ctaLabel.clipsToBounds = YES;
    self.ctaLabel.textColor = self.ctaLabel.tintColor;
    self.ctaLabel.layer.borderWidth = 1.0f;
    self.ctaLabel.layer.borderColor = self.ctaLabel.tintColor.CGColor;
    self.ctaLabel.layer.cornerRadius = 5.0f;
}

- (void)apply:(ADGNativeAd *)nativeAd viewController:(UIViewController *)viewController {
    if (!nativeAd) {
        return;
    }
    // タイトル
    self.titleLabel.text = nativeAd.title ? nativeAd.title.text : @"";

    // リード文
    self.descriptionLabel.text = nativeAd.desc ? nativeAd.desc.value : @"";

    // アイコン画像
    if (nativeAd.iconImage.url.length > 0) {
        NSURL *iconImageUrl = [NSURL URLWithString:nativeAd.iconImage.url];
        NSData *iconImageData = [NSData dataWithContentsOfURL:iconImageUrl];
        self.iconImageView.image = [UIImage imageWithData:iconImageData];
    }

    // メイン画像・動画
    for (UIView *v in self.mediaViewContainerView.subviews) {
        [v removeFromSuperview];
    }

   // メイン画像または動画が利用できるかどうかをチェックします。
   if (nativeAd.canLoadMedia) {
        CGRect mediaViewFrame = CGRectMake(0, 0,
                                           self.mediaViewContainerView.bounds.size.width,
                                           self.mediaViewContainerView.bounds.size.height);

       // ADGMediaViewを生成します。
       ADGMediaView *mediaView = [[ADGMediaView alloc] initWithFrame:mediaViewFrame];

        // 必ずADGNativeAdとUIViewControllerの参照を追加してください。
        mediaView.nativeAd = nativeAd;
        mediaView.viewController = viewController;

        // Viewへ配置します。
        [self.mediaViewContainerView addSubview:mediaView];

        // メイン画像または動画のロードを開始します。
        [mediaView load];
    }

    // インフォメーションアイコン
    ADGInformationIconView *infoIconView = [[ADGInformationIconView alloc] initWithNativeAd:nativeAd];
    if (infoIconView) {
        [self.mediaViewContainerView addSubview:infoIconView];
        [infoIconView updateFrameFromSuperview:UIRectCornerTopRight];
    }

    // 広告主
    self.sponsoredLabel.text = nativeAd.sponsored.value.length > 0 ?
        [NSString stringWithFormat:@"sponsored by %@",nativeAd.sponsored.value] :
        @"sponsored";

    // CTAボタン
    NSString *ctaText = nativeAd.ctatext.value.length > 0 ?
                        nativeAd.ctatext.value : @"詳しくはこちら";
    self.ctaLabel.text = ctaText;

    // クリックイベント
    [nativeAd setTapEvent:self handler:nil];
}

@end

注意事項

• v2.8.0から ADGManagerViewController#delegateViewManagement:は非推奨となりました。
• 代わりに ADGNativeAd#setTapEvent:handler および ADGManagerViewController#setAutomaticallyRemoveOnReload を使用してください。
• 画像は、アスペクト比を変えず、必ず切れることのないようしてください。　万が一、縦横比が正常ではない表示になっている場合、レギュレーションに反してしまう恐れがございます。
  (UIImageViewのcontentModeをScaleAspectFitに設定)
• 画像のアスペクト比に関しましては、ADGMediaViewを利用することで正しいアスペクト比を保持して表示がおこなえますので実装例をご参考にしてください。その際は下部に記載の「ADGMediaView注意事項」につきましてもお目通しください。
• 広告破棄のタイミングにて、setAutomaticallyRemoveOnReloadにセットされたUIViewインスタンスに対してremoveFromSuperViewが呼び出されます。
• 広告の破棄は画面のdealloc等、広告の表示が終わるタイミングで行ってください。
• テストではタップの確認も行ってください。
• ADGManagerViewControllerクラスは1つの広告枠に対して1つのインスタンスを生成してください。
• 広告枠の設定によっては各ネイティブ広告オブジェクトのパラメーターの値がnilになる場合があります。
  たとえば、GunosyAdsではCTA取得できません。画像の縦横サイズも含め、すべてがoptionalな値です。
• PR表記をつける等して広告であることを示してください。
• レスポンスにSponsoredがある場合はできる限り表示をしてください。(特定のアドネットワークではSponsoredの表示要望がございます)
  

インフォメーションアイコン（オプトアウトリンク）について

※ 2016/12/8(v2.4.2)より必須項目となりました

v2.4.2より、ターゲティングを行っている広告の場合にはデフォルトでインフォメーションアイコン（オプトアウトリンク）が表示されるようになります（ターゲティングを行っていない広告の場合は表示されません）。
インフォメーションアイコンはタップすることで、DSP事業者が指定したオプトアウトWebサイトページへ遷移します。
オプトアウトリンクはユーザーが広告のターゲティングをオプトアウト（拒否）することにより、ユーザーに関する情報の関連付けを防ぐことを可能とし、設置することで配信できるDSP事業者が増加します。

表示される場所は、setTapEvent:nativeAd:handler:で指定したViewの右上に設置されます。
デフォルトの表示位置から変更する場合は、ADGManagerViewController.informationIconViewDefaultを設定し、ADGInformationIconViewを生成してください。
ターゲティングを行っていない広告の場合は、ADGInformationIconViewを生成してもアイコンは表示されません。

インフォメーションアイコンの表示確認は、テストID48635を使用してください。

動画広告の実装について(iOS: v2.9.0~ (ADG.framework))

ADGMediaViewを利用することで、動画広告を配置できます。

// メイン画像または動画が利用できるかどうかをチェックします。
if (nativeAd.canLoadMedia) {
    // ADGMediaViewを生成します。
    ADGMediaView *mediaView = [[ADGMediaView alloc]
                                initWithFrame:CGRectMake(0, 0, width, height)];

    // 必ずADGNativeAdとUIViewControllerの参照を追加してください。
    mediaView.nativeAd = nativeAd;
    mediaView.viewController = viewController;

    // Viewへ配置します。
    [self.mediaViewContainerView addSubview:mediaView];

    // メイン画像または動画のロードを開始します。
    [mediaView load];
}

ADGMediaView注意事項

• 動画と静止画が利用できる場合は、動画が優先されます。
• 動画や静止画は配信案件によるため、必ずしも配信されるわけではありません。

テスト用ID

審査完了前に広告の掲載イメージをご確認頂く際は、以下のIDに置き換えご確認ください。
このIDをセットしたままアプリをリリースしないようご注意ください。

テストID	配信広告
48635	テスト広告