Banner Integration For iOS - Hiroaki-Shinoda/Geniee-iOS-SDK GitHub Wiki

通常バナー広告の実装

iOS バナー広告の実装

バナー広告は、アプリ画面の下部、上部に配置する広告です。
広告枠のサイズ設定より、アイコン型広告、インライン型広告として配置可能です。

実装準備

バナー広告の実装準備は、下記スタートガイドより、
Geniee SDK をプロジェクトにインストール必要です。
スタートガイド

クラスとプロトコル

iOS バナー広告配信には、下記クラスを使用します。

  • GNAdView 非同期でバナー広告を取得、表示用クラス
  • GNAdViewDelegate バナー広告サイクルイベント処理用プロトコル

バナー広告の取得と表示

  1. GNAdSDK.frameworkをプロジェクトに追加します。スタートガイド

  2. GNAdView.hをインポートします。

    #import <GNAdSDK/GNAdView.h>
  3. GNAdViewDelegateプロトコルを採用します。

    @interface MyViewController : UIViewController<GNAdViewDelegate>
    {
    }
  4. GNAdViewの変数を宣言します。

    GNAdView *_adView;
  5. GNAdView のインスタンスを初期化します。

    _adView = [[GNAdView alloc] initWithFrame:CGRectMake(0, 20, 320, 50)
                                   adSizeType:GNAdSizeTypeSmall appID:@"YOUR_SSP_APP_ID"];

initWithFrameパラメータは、広告の画面配置領域を設定します。
adSizeTypeパラメータは、広告のサイズタイプを設定します。
YOUR_SSP_APP_IDは、Geniee内での枠の管理IDを設定します。

  1. GNAdViewのdelegateを設定します。
    バナー広告処理サイクルイベントのは、delegate経由で通知されます。
    GNAdViewDelegateプロトコルを採用したインスタンス変数を設定します。

    _adView.delegate = self;
  2. GNAdViewのrootViewControllerを設定します。

    _adView.rootViewController = self;
  3. 広告を画面に追加します。

    [self.view addSubview:_adView];
  4. 広告をロード、表示します。

    [_adView startAdLoop];
  5. GNAdView のインスタンスをリリースする際に、リフレッシュ停止とdelegateをnilに設定します。

    - (void)dealloc
    {
        [_adView stopAdLoop]; 
        _adView.delegate = nil;
    }
  • MyViewControllerの実装例:
    #import <GNAdSDK/GNAdView.h>
    
    @interface MyViewController : UIViewController<GNAdViewDelegate>
    {
       GNAdView *_adView;
    }
    @end
    
    @implementation MyViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
    
        _adView = [[GNAdView alloc] initWithFrame:CGRectMake(0, 20, 320, 50)
                                       adSizeType:GNAdSizeTypeSmall appID:@"YOUR_SSP_APP_ID"];
        _adView.delegate = self;
        _adView.rootViewController = self;
        [self.view addSubview:_adView];
    
        _adView.center = CGPointMake(self.view.center.x, _adView.center.y);
        [_adView startAdLoop];
    }
    
    - (void)dealloc
    {
        [_adView stopAdLoop];
        _adView.delegate = nil;
    }

広告のサイズタイプの設定

広告枠のサイズタイプ設定より、アイコン型広告、インライン型広告として配置可能です。

  • バナー型広告 : GNAdSizeTypeSmall、GNAdSizeTypeTall、GNAdSizeTypeW320H100

  • アイコン型広告 : GNAdSizeTypeW57H57、GNAdSizeTypeW76H76

    adSizeTypeの定義 定義の意味
    GNAdSizeTypeSmall 320x50
    GNAdSizeTypeTall 300x250
    GNAdSizeTypeW320H100 320x100
    GNAdSizeTypeW57H57 57x57
    GNAdSizeTypeW76H76 76x76

バナーローテーション(リフレッシュ)

管理画面より、バナーローテーション(リフレッシュ)を設定できます。
設定した場合、広告が指定した間隔秒数(30 ~ 120)で自動的にリフレッシュします。
リフレッシュを停止する場合、下記のいずれか方法で可能です。

  • 管理画面より、「Enable banner rotation」を無効に設定します。

  • stopAdLoop関数を呼び出します。

    - (void)dealloc
    {
        [_adView stopAdLoop];
        _adView.delegate = nil;
    }

GNAdViewDelegateプロトコル

  • GNAdViewDelegateのコールバック関数実装し、広告処理サイクルイベントを受け取ります。

    @protocol GNAdViewDelegate <NSObject>
    
    @optional
    
    /// 広告データの読み込みが完了した時に送られます。
    - (void)adViewDidReceiveAd:(GNAdView *)adView;
    
    /// ネットワークエラー等の原因で広告の読み込みに失敗した時に送られます。
    - (void)adView:(GNAdView *)adView didFailReceiveAdWithError:(NSError *)error;
    
    /// 広告のタッチにより端末のブラウザが起動する直前に送られます。
    - (BOOL)shouldStartExternalBrowserWithClick:(GNAdView *)adView landingURL:(NSString *)landingURL;
    
    /// 広告のタッチにより端末のブラウザが起動する直前に送られます。
    - (void)adViewWillShowInDefaultBrowser:(GNAdView *)adView;
    
    /// 広告がタップされ、アプリ内ブラウザが起動する直前に送られます。
    - (void)adViewWillShowInInternalBrowser:(GNAdView *)adView;
    
    /// アプリ内ブラウザでの操作により端末のブラウザが起動する直前に送られます。
    - (void)adViewWillShiftToDefaultBrowser:(GNAdView *)adView;
    
    /// アプリ内ブラウザが閉じられる直前に送られます。
    - (void)adViewWillTerminateInternalBrowser:(GNAdView *)adView;
    
    @end

ランディングページの画面遷移の制御

広告のランディングページは、デフォルトで外部ブラウザで起動します。
GNAdViewDelegateのコールバック関数実装し、
ランディングページのURLを使ってアプリ内ブラウザで起動することは可能です。
また、関数の戻り値によって、外部ブラウザを起動しないことを制御します。

  • YES 外部ブラウザを起動します。

  • NO 外部ブラウザを起動しません。

    /**
     * Sent before ad begins open landingURL in External Browser.
     *
     * @param adView The GNAdView Ad.
     * @param landingURL The URL of the landing page.
     * @return BOOL YES if the ad should begin start External Browser; otherwise, NO .
     */
    - (BOOL)shouldStartExternalBrowserWithClick:(GNAdView *)adView landingURL:(NSString *)landingURL;

広告表示領域の拡大と縮小

iPhone6等の端末で広告の表示領域を拡大、縮小することができます。

  • 表示領域の変更

        _adView = [[GNAdView alloc] initWithFrame:CGRectMake(0, 20, 320, 50)
                                       adSizeType:GNAdSizeTypeSmall appID:@"YOUR_SSP_APP_ID"];
        _adView.delegate = self;
        _adView.rootViewController = self;
        [self.view addSubview:_adView];
        // 320x50バナー広告の拡大
        // frame:表示領域 adSize:管理画面で設定した広告サイズ
        [_adView showBannerWithFrame:CGRectMake(0, 20, 375, 58)
                                     adSize:CGSizeMake(320, 50)];
        [_adView startAdLoop];

SwiftからiOS SDK の利用について

SwiftからiOS SDK (Objective-C) クラスを利用するには、Objective-C bridging headerと呼ばれるファイルに ヘッダファイルのインポート文を書くことで可能です。

  • <プロジェクト名>-Bridging-Header.hファイルをプロジェクトに追加します。

  • <プロジェクト名>-Bridging-Header.hファイルにインポート文を記述します。

    #import <GNAdSDK/GNAdView.h>
  • ファイル名をプロジェクトの「Build Settings」に設定します。
    設定には、プロジェクトルートでターゲットを選択し、「Build Settings」->「Swift Compiler - Code Generattion」->「Objective-C bridging header」に <プロジェクト名>-Bridging-Header.hを設定します。
    image

  • MyViewController.swiftの実装例:

    import UIKit
    
    class MyViewController: UIViewController, GNAdViewDelegate {
    
        var _adView : GNAdView = GNAdView(frame: CGRectMake(0, 20, 320, 50),
                                     adSizeType:GNAdSizeTypeSmall,
                                          appID:"YOUR_SSP_APP_ID")
    
        override func viewDidLoad() {
            super.viewDidLoad()
            
            _adView.delegate = self
            _adView.rootViewController = self
            //_adView.bgColor = YES
            //_adView.geoLocationEnable = YES
            //_adView.GNAdlogPriority = GNLogPriorityInfo
            _adView.center = CGPointMake(self.view.center.x, _adView.center.y);
            
            self.view.addSubview(_adView)
            _adView.startAdLoop()
        }
    
        func shouldStartExternalBrowserWithClick(nativeAd: GNAdView, landingURL: String) -> Bool {
            NSLog("ViewController: shouldStartExternalBrowserWithClick : %@.", landingURL);
            return true;
        }
    }

複数枠広告の同時取得の実装

複数広告の同時取得は、以下の実装方法で実装します。

  • 複数枠の広告を同時に取得には、複数枠の APPID を指定してインスタンスを初期化します。

  • 最大10枠の広告を同時取得できます。

  • 各 APPID をカンマで区切り、APPID の間はスペースを入れないでください。

    _adViewRequest = [[GNAdViewRequest alloc] initWithID:@"APPID1,APPID2,APPID3,...,APPID10"];
  • 複数枠同時取得の広告重複除外には、管理画面で各枠の「バナーローテーションを使用するか」のチェックを外してください。

クラスとプロトコル

iOS 複数枠の広告同時取得には、下記クラスを使用します。

  • GNAdViewRequest 非同期で複数枠の広告を取得用クラス
  • GNAdView 表示する広告クラス
  • GNAdViewRequestDelegate 広告のロード結果を受け取る用プロトコル

複数枠の広告の取得

  1. GNAdViewRequest.hGNAdView.hをインポートします。

    #import <GNAdSDK/GNAdViewRequest.h>
    #import <GNAdSDK/GNAdView.h>
  2. GNAdViewRequestDelegateプロトコルを採用します。

    @interface TableViewController () <GNAdViewRequestDelegate>
    {
    }
  3. GNNativeAdRequestの変数を宣言します。

    GNAdViewRequest *_adViewRequest;
  4. GNNativeAdRequest のインスタンスを初期化します。

    _adViewRequest = [[GNAdViewRequest alloc] initWithID:@"APPID1,APPID2,APPID3,...,APPID10"];
  5. GNAdViewRequestDelegateのdelegateを設定します。
    複数広告ロードイベントの結果は、delegate経由で通知されます。
    GNAdViewRequestDelegateプロトコルを実装したインスタンス変数を設定します。

    _adViewRequest.delegate = self;
  6. 複数広告の取得をロードします。

    [_adViewRequest loadAds];
  7. GNAdViewRequestDelegateプロトコルの実装
    GNAdViewRequestDelegateのコールバック関数実装し、
    ネイティブ広告のロードイベントの結果を受け取ります。

    - (void)gnAdViewRequestDidReceiveAds:(NSArray*)gnAdViews;
    - (void)gnAdViewRequest:(GNAdViewRequest *)request didFailToReceiveAdsWithError:(NSError *)error;

受信した広告GNAdViewは、配列のgnAdViews引数で渡されます。
複数広告の振り分け処理には、GNAdViewappID情報で行います。
配列gnAdViewsの要素数: - 1個 GNAdViewRequest 初期化時、APP_IDを1つ指定した場合 - 複数個 GNAdViewRequest 初期化時、APP_IDを複数指定した場合

  1. GNAdViewRequest のインスタンスをリリースする際に、delegateをnilに設定します。
    - (void)dealloc
    {
        _adViewRequest.delegate = nil;
    }
  • UITableViewControllerの実装例:
    #import <GNAdSDK/GNAdViewRequest.h>
    #import <GNAdSDK/GNAdView.h>
    
    @interface TableViewController () <GNAdViewRequestDelegate>
    {
        GNAdViewRequest *_adViewRequest;
    }
    @property (nonatomic, strong) NSMutableArray *cellDataList;
    @end
    
    @implementation TableViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
    
        _adViewRequest = [[GNAdViewRequest alloc] initWithID:@"APPID1,APPID2,APPID3,...,APPID10"];
        _adViewRequest.delegate = self;
        [_adViewRequest loadAds];
    }
    
    - (void)gnAdViewRequestDidReceiveAds:(NSArray*)gnAdViews
    {
        for (GNAdView *adView in gnAdViews) {
            // You can identify the GNAdView by using the zoneID field of GNAdView.
            //if ([adView.zoneID isEqualToString:@"YOUR_SSP_APP_ID"]) {
            //    [_cellDataList addObject:adView];
            //}
            [_cellDataList addObject:adView];
        }
    }
    
    - (void)gnAdViewRequest:(GNAdViewRequest *)request didFailToReceiveAdsWithError:(NSError *)error
    {
        NSLog(@"TableViewController: didFailToReceiveAdsWithError : %@.", [error localizedDescription]);
    }

広告のレンダリング

取得した複数広告のレンダリング

  • 広告のレンダリングは、表示領域サイズ、広告サイズを指定して行います。

    - (void)showBannerWithFrame:(CGRect)frame adSize:(CGSize)adSize;
  • frame 表示領域サイズ、アプリで広告を表示する領域サイズ

  • adSize 広告サイズ、管理画面で枠登録際に指定した広告サイズ

レンダリング実装例

  • UITableViewControllerの実装例:
    - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
    {
        return 1;
    }
    
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
    {
        return _cellDataList.count;
    }
    
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        static NSString *CellIdentifier = @"SampleDataCell";
        TableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
        
        if ([[_cellDataList objectAtIndex:indexPath.row] isKindOfClass:[GNAdView class]]) {
            GNAdView *adView = (GNAdView *)[_cellDataList objectAtIndex:indexPath.row];
            if (adView != nil) {
                // remove old adview from cell
                ...
                // add adView to cell
                [cell addSubview:adView];
                // show adView with frame and adsize
                [adView showBannerWithFrame:CGRectMake(0, 0, 320, 50)
                                     adSize:CGSizeMake(320, 50)];
                // start auto-refreshing
                [adView startAdLoop];
                ...
            }
        } else {
            // GNNativeAd以外セルの表示処理
        }
        return cell;
    }

広告のインプレッション報告

インプレッションの発生タイミング

  • 広告のレンダリング共に、自動的にインプレッションが発生して報告されます。
  • インプレッション報告済みの広告に対して、再度報告ができません。
  • 新しい広告表示には、広告を再取得(或いは、リフレッシュ)必要です。

広告のクリックトラッキング

  • 広告がクリックされた時、広告のランディングページを外部ブラウザで起動します。
  • 広告クリックされた回数を自動的にカウントされます。

ランディングページの画面遷移の制御

広告のランディングページは、デフォルトで外部ブラウザで起動します。
GNAdViewRequestDelegateのコールバック関数実装し、
ランディングページのURLを使ってアプリ内ブラウザで起動することは可能です。
また、関数の戻り値によって、外部ブラウザを起動しないことを制御します。

  • YES 外部ブラウザを起動します。

  • NO 外部ブラウザを起動しません。

    - (BOOL)shouldStartExternalBrowserWithClick:(GNAdView *)gnAdView landingURL:(NSString *)landingURL;

複数広告の同時再取得

  • 新しい広告表示には、広告を再取得必要です。

    [_adViewRequest loadAds];
  • UITableViewControllerの実装例:

    - (void)scrollViewDidScroll:(UIScrollView *)scrollView
    {
        [_adViewRequest loadAds];
    }
  • GNAdViewRequestDelegateのコールバック関数で取得結果を受け取ります。

    - (void)gnAdViewRequestDidReceiveAds:(NSArray*)gnAdViews;
    - (void)gnAdViewRequest:(GNAdViewRequest *)request didFailToReceiveAdsWithError:(NSError *)error;

SwiftからiOS SDK の利用について

SwiftからiOS SDK (Objective-C) クラスを利用するには、Objective-C bridging headerと呼ばれるファイルに ヘッダファイルのインポート文を書くことで可能です。

  • <プロジェクト名>-Bridging-Header.hファイルをプロジェクトに追加します。

  • <プロジェクト名>-Bridging-Header.hファイルにインポート文を記述します。

    #import <GNAdSDK/GNAdViewRequest.h>
    #import <GNAdSDK/GNAdView.h>
  • ファイル名をプロジェクトの「Build Settings」に設定します。
    設定には、プロジェクトルートでターゲットを選択し、「Build Settings」->「Swift Compiler - Code Generattion」->「Objective-C bridging header」に <プロジェクト名>-Bridging-Header.hを設定します。
    image

⚠️ **GitHub.com Fallback** ⚠️