Skip to content

Native_Ad_iOS

AdGeneration edited this page May 23, 2019 · 18 revisions

iOS SDK ネイティブ広告

はじめに

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

対応バージョン

iOS 8.0以降

導入の流れ

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

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

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

2. 広告表示を実装する

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

/*
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メソッドの以下が呼び出されます。

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

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

#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;
    }
}

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

#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 を使用してください。

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

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

※ 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 テスト広告
Clone this wiki locally
You can’t perform that action at this time.