iOS SDK Getting Started / ネイティブ広告

はじめに

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

対応バージョン

iOS 12.0以降

導入の流れ

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

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

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

2. 広告表示を実装する

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

Swift
Objective-C

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

// HTMLテンプレートを使用したネイティブ広告を表示するためには以下のように配置するViewを指定します
adg?.adSize = CGSize(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;

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

Swift
Objective-C

func adgManagerViewControllerReceiveAd(_ adgManagerViewController: ADGManagerViewController, mediationNativeAd: Any)

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

mediationNativeAd からネイティブ広告オブジェクトが取得できます。ネイティブ広告オブジェクトは ADGNativeAd クラスです。id型から ADGNativeAd へキャストし、クラス判定を行ってからアクセスしてください。

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

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

クリックイベントの通知が必要な場合は ADGManagerViewControllerReceiveAd 内で ADGNativeAd を取得したタイミングで ADGNativeAd.delegate を設定し、nativeAdDidTap: を実装してください。

Swift
Objective-C

class ViewController: UIViewController, ADGNativeAdDelegate {
    func adgManagerViewControllerReceiveAd(_ adgManagerViewController: ADGManagerViewController, mediationNativeAd: Any) {
        if let nativeAd = mediationNativeAd as? ADGNativeAd {
            nativeAd.delegate = self
            // ネイティブ広告Viewの構築処理など
        }
    }

    func nativeAdDidTap(_ nativeAd: ADGNativeAd) {
        // タップ時の処理
    }
}

@interface ViewController () <ADGNativeAdDelegate>
@end

@implementation ViewController

- (void)ADGManagerViewControllerReceiveAd:(ADGManagerViewController *)adgManagerViewController
                        mediationNativeAd:(id)mediationNativeAd {
    if ([mediationNativeAd isKindOfClass:[ADGNativeAd class]]) {
        ADGNativeAd *nativeAd = (ADGNativeAd *)mediationNativeAd;
        nativeAd.delegate = self;
        // ネイティブ広告Viewの構築処理など
    }
}

- (void)nativeAdDidTap:(ADGNativeAd *)nativeAd {
    // タップ時の処理
}

@end

実装例

Objective-C

#import <ADG/ADG.h>
#import "NativeAdsObjCViewController.h"
#import "ADGNativeAdView.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)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;
    }
}

@end

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

作成される広告イメージ
アプリに応じてカスタマイズしてください（画像ロード処理の非同期化など）
XIBはサンプルを参考にしてください
サンプルコード

ADGNativeAdView実装例

Objective-C

#import <ADG/ADG.h>

#import "ADGNativeAdView.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];
        if (iconImageUrl) {
            // 簡易例です。ビュー再利用時はURL一致チェックやタスクのキャンセルを検討してください。
            NSURLSessionDataTask *task = [[NSURLSession sharedSession]
                dataTaskWithURL:iconImageUrl
                completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
                    // エラーハンドリングを実施してください。
                    if (data) {
                        UIImage *image = [UIImage imageWithData:data];
                        dispatch_async(dispatch_get_main_queue(), ^{
                            self.iconImageView.image = image;
                        });
                    }
                }];
            [task resume];
        }
    }

    // メイン画像・動画
    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の参照を追加してください。
        mediaView.nativeAd = nativeAd;

        // 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

注意事項

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

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

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

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

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

ADGInformationIconView は initWithNativeAd:expandable: で展開可否を指定できます。
背景のマスク色は backgroundType で白/黒を切り替えられます。

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

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

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

//メイン画像または動画が利用できるかどうかをチェックします。
if (nativeAd.canLoadMedia) {
    //ADGMediaViewを生成します。
    ADGMediaView *mediaView = [[ADGMediaView alloc]
                                    initWithFrame:CGRectMake(0, 0, width, height)];
    //必ずADGNativeAdの参照を追加してください。
    mediaView.nativeAd = nativeAd;
    [self.mediaViewContainerView addSubview:mediaView];
    //メイン画像または動画のロードを開始します。
    [mediaView load];
}

ADGMediaView注意事項

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

テストIDについて

広告の掲載イメージを確認したい場合は、テストIDを使用してください。テスト用の広告枠ID一覧

ご注意

テストIDをセットしたままアプリをリリースしないようにしてください。

はじめに​

対応バージョン​

導入の流れ​

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

2. 広告表示を実装する​

実装例​

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

ADGNativeAdView実装例​

注意事項​

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

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

ADGMediaView注意事項​

テストIDについて​