# iOS ネイティブ広告の実装

ネイティブ広告では、完成した広告レイアウトを提供するのではなく、広告コンテンツ(部品)を提供することにより、オリジナルデザインで広告を配信する事ができます。タイトルや説明テキスト、アイコンなど、好きなデザインで配信する事が可能です。 広告インプレッション、広告クリックのトラッキングは、広告SDKで処理します。

# 実装

ネイティブ広告の実装準備は、下記スタートガイドから行ってください。
Geniee SDK をプロジェクトにインストールする必要があります。
スタートガイド

# クラスとプロトコル

iOS ネイティブ広告配信には、下記クラスを使用します。

• GNNativeAdRequest 非同期でネイティブ広告を取得するためのクラス
• GNNativeAd ネイティブ広告の情報を提供するためのクラス
• GNNativeAdRequestDelegate ネイティブ広告のロード結果を受け取るためのプロトコル

# ネイティブ広告の取得

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

2. GNNativeAdRequest.hとGNNativeAd.hをインポートします。

   #import <GNAdSDK/GNNativeAdRequest.h>
   #import <GNAdSDK/GNNativeAd.h>
   

   1
   2
   

3. GNNativeAdRequestDelegateプロトコルを利用します。

   @interface TableViewController () <GNNativeAdRequestDelegate>
   {
   }
   

   1
   2
   3
   

4. GNNativeAdRequestの変数を宣言します。

   GNNativeAdRequest *_nativeAdRequest;
   

   1
   

5. GNNativeAdRequest のインスタンスを初期化します。

   _nativeAdRequest = [[GNNativeAdRequest sharedMenager] initWithID:@"YOUR_ZONE_ID"];
   

   1
   
   • 複数広告表示　初期化例

   _nativeAdRequest = [[GNNativeAdRequest sharedMenager] initWithID:@"YOUR_ZONE_ID_1,YOUR_ZONE_ID_2,.."];
   

   1
   

6. GNNativeAdRequestのdelegateを設定します。
   ネイティブ広告ロードイベントの結果は、delegate経由で通知されます。
   GNNativeAdRequestDelegateプロトコルを実装したインスタンス変数を設定します。

   _nativeAdRequest.delegate = self;
   

   1
   

7. ネイティブ広告をロードします。

• 単一広告取得する場合は下記メソッドで広告をロードして下さい

[_nativeAdRequest loadAds];

• 複数広告を取得する場合は下記メソッドで広告をロードして下さい

[_nativeAdRequest multiLoadAds];

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

   - (void)nativeAdRequestDidReceiveAds:(NSArray*)nativeAds;
   - (void)nativeAdRequest:(GNNativeAdRequest *)request didFailToReceiveAdsWithError:(NSError *)error;
   

   1
   2
   

   受信したネイティブ広告GNNativeAdは、配列のnativeAds引数で渡されます。
   複数ネイティブ広告の振り分け処理には、GNNativeAdのzoneID情報で行います。
   GNNativeAdRequest 初期化時、ZONE_IDを１つ指定した場合、配列 nativeAdsの要素数は1個になります。

8. GNNativeAdRequest のインスタンスをリリースする際に、delegateをnilに設定します。

   - (void)dealloc
   {
       _nativeAdRequest.delegate = nil;
   }
   

   1
   2
   3
   4
   

• UITableViewControllerの実装例：

  #import <GNAdSDK/GNNativeAdRequest.h>
  #import <GNAdSDK/GNNativeAd.h>
  
  @interface TableViewController () <GNNativeAdRequestDelegate>
  {
      GNNativeAdRequest *_nativeAdRequest;
  }
  @property (nonatomic, strong) NSMutableArray *cellDataList;
  @end
  
  @implementation TableViewController
  
  - (void)viewDidLoad {
      [super viewDidLoad];
  
      _nativeAdRequest = [[GNNativeAdRequest shardManager] initWithID:@"YOUR_ZONE_ID"];
      _nativeAdRequest.delegate = self;
      [_nativeAdRequest multiLoadAds];
  }
  
  - (void)nativeAdRequestDidReceiveAds:(NSArray*)nativeAds
  {
      for (GNNativeAd *nativeAd in nativeAds) {
          // You can identify the GNNativeAd by using the zoneID field of GNNativeAd.
          //if ([nativeAd.zoneID isEqualToString:@"YOUR_ZONE_ID"]) {
          //    [_cellDataList addObject:nativeAd];
          //}
          [_cellDataList addObject:nativeAd];
      }
  }
  
  - (void)nativeAdRequest:(GNNativeAdRequest *)request didFailToReceiveAdsWithError:(NSError *)error
  {
      NSLog(@"TableViewController: didFailToReceiveAdsWithError : %@.", [error localizedDescription]);
  }
  

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  

# ネイティブ広告のレンダリング

受信したネイティブ広告の情報に基づいて、ネイティブ広告をレンダリングします。

• 情報データの型は、GNNativeAd.hクラスの定義を参照します。

• 情報データ（NSString型）の値が未設定の場合、nilとなります。

• 情報データ（int、double型）の値が未設定の場合、0となります。

  情報の名前	型	情報の内容
  zoneID	NSString	Geniee内での枠の管理ID
  advertiser	NSString	広告主の名前
  title	NSString	feed広告のタイトル
  description	NSString	広告説明
  cta	NSString	call to actionの文言
  icon_aspectRatio	double	icon画像の横縦比
  icon_url	NSString	icon画像のURL
  icon_height	int	icon画像の高さ
  icon_width	int	icon画像の幅
  screenshots_aspectRatio	double	screenshot画像の横縦比
  screenshots_url	NSString	screenshot画像のURL
  screenshots_height	int	screenshot画像の高さ
  screenshots_width	int	screenshot画像の幅
  app_appName	NSString	アプリの名前
  app_appid	NSString	アプリのID(ios:数値、Android:パッケージ)
  app_rating	double	アプリの評価
  app_storeURL	NSString	アプリのストアのURL
  app_targetAge	NSString	アプリの対象年齢、AppStoreにおけるrating

• UITableViewControllerの実装例：
  管理画面に下記ネイティブ広告の情報を設定した場合

  • title
  • description
  • icon image URL

  - (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:[GNNativeAd class]]) {
          GNNativeAd *nativeAd = (GNNativeAd *)[_cellDataList objectAtIndex:indexPath.row];
          if (nativeAd != nil) {
              cell.nativeAd = nativeAd;
              cell.title.text = nativeAd.title;
              cell.description.text = nativeAd.description;
              cell.icon.image = nil;
              NSURL *url = [NSURL URLWithString:nativeAd.icon_url];
              [TableViewController requestImageWithURL:url completion:^(UIImage *image, NSError *error) {
                  if (error) return;
                  cell.icon.image = image;
              }];
              [nativeAd trackingImpressionWithView:cell];
          }
      }　else {
          // GNNativeAd以外のセルの表示処理
      }
      return cell;
  }
  

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  

• 広告オプトアウトの表示 広告を表示する際にoptout情報を実装して下さい。 オプトアウト変数はGNNativeAd.hインスタンスからアクセス可能です。

サンプルコード

NString *optout_text = nativeAd.optout_text;
NString *optout_image_url = nativeAd.optout_image_url;
NString *optout_url = nativeAd.optout_url;

• 広告のオプトアウトのクリック

「optout_url」内容が設定した場合、オプトアウトの文字、画像がクリックされた際に、「optout_url」を外部ブラウザで実行して下さい。 広告にオプトアウト情報が設定されていない場合はoptout_url が空で返却される場合があります。

• UITableViewController実装例のイメージ

  

# ネイティブ広告のインプレッション報告

• ネイティブ広告がレンダリングされた時、広告のインプレッションを報告します。

• インプレッション報告済みのネイティブ広告に対して、再度報告ができません。

• 新しい広告表示には、ネイティブ広告を再取得する必要があります。

  [nativeAd trackingImpressionWithView:cell];
  

  1
  

# ネイティブ広告のクリックトラッキング

• ネイティブ広告がクリックされた時、広告のランディングページを外部ブラウザで起動します。

  [nativeAd trackingClick:cell];
  

  1
  

• UITableViewControllerの実装例：

  -(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
  {
      TableViewCell *cell = (TableViewCell*)[tableView cellForRowAtIndexPath:indexPath];
      if (cell.nativeAd != nil) {
          [cell.nativeAd trackingClick:cell];
      } else {
          // GNNativeAd以外のセルのクリック処理
      }
  }
  

  1
  2
  3
  4
  5
  6
  7
  8
  9
  

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

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

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

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

  - (BOOL)shouldStartExternalBrowserWithClick:(GNNativeAd *)nativeAd landingURL:(NSString *)landingURL;
  

  1
  

# ネイティブ広告の再取得

• 新しい広告表示には、ネイティブ広告を再取得する必要があります。
• 単一広告取得する場合は下記メソッドで広告をロードして下さい

[_nativeAdRequest loadAds];

• 複数広告を取得する場合は下記メソッドで広告をロードして下さい

[_nativeAdRequest multiLoadAds];

• UITableViewControllerの実装例：

  - (void)scrollViewDidScroll:(UIScrollView *)scrollView
  {
       [_nativeAdRequest loadAds] or [_nativeAdRequest multiLoadAds];
  }
  

  1
  2
  3
  4
  

• GNNativeAdRequestDelegateのコールバック関数で取得結果を受け取ります。

  - (void)nativeAdRequestDidReceiveAds:(NSArray*)nativeAds;
  - (void)nativeAdRequest:(GNNativeAdRequest *)request didFailToReceiveAdsWithError:(NSError *)error;
  

  1
  2
  

# 動画ネイティブ広告

管理画面よりNative Ad設定情報で動画を許可するoptionを追加することで動画ネイティブ広告を取得することができます。

# クラスとプロトコル

動画ネイティブ広告では、下記動画プレイヤークラスとプロトコルを使用します。

• GNSNativeVideoPlayerView 動画ネイティブプレイヤーViewを提供するためのクラス
• GNSNativeVideoPlayerDelegate 動画ネイティブプレイヤーのイベント通知を受け取るためのプロトコル

# 動画ネイティブ用データ取得

動画ネイティブ広告を表示する際はGNNativeAdインスタンスからhasVideoContent()を使って動画判定をして下さい。

 - (void)nativeAdRequestDidReceiveAds:(NSArray*)nativeAds
 {
     for (GNNativeAd *nativeAd in nativeAds) {
         if ([nativeAd hasVideoContent]) {
             //video implements
         }
     }
 }

# 動画ネイティブ実装方法

1. GNSNativeVideoPlayerViewのヘッダーファイルをimportし、Delegateを追加

   #import <GNAdSDK/GNNativeAdRequest.h>
   #import <GNAdSDK/GNNativeAd.h>
   #import <GNAdSDK/GNSNativeVideoPlayerView.h>
   @interface ViewController <GNSNativeVideoPlayerDelegate>
   

   1
   2
   3
   4
   

2. GNSNativeVideoPlayerView のインスタンスの生成とView追加

• GNNativeAdからの生成例

  GNSNativeVideoPlayerView videoView = [nativeAd getVideoView]; // GNNativeAd nativeAd
  [containerView addSubview:videoView]
  

  1
  2
  

• アプリ側での生成例

  GNSNativeVideoPlayerView videoView = [[GNSNativeVideoPlayerView alloc] initWithFrame:rect]; // CGRect rect
  [containerView addSubview:videoView]
  

  1
  2
  

3. GNSNativeVideoPlayerDelegateのメソッドを実装し、 動画ネイティブプレイヤーのイベントを受け取る

   @required
   // Sent when an video ad request succeeded.
   - (void)onVideoReceiveSetting:(GNSVideoPlayerView*)view;
   @optional
   // Sent when an video ad request failed.
   - (void)onVideoFailWithError:(GNSVideoPlayerView*)view error:(NSError *)error;
   
   // Sent when an video ad play started.
   - (void)onVideoStartPlaying:(GNSVideoPlayerView*)view;
   
   // Sent when an video ad okay completed.
   - (void)onVideoPlayComplete:(GNSVideoPlayerView*)view;
   

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   

複数ネイティブ広告の振り分け処理には、ロード完了の第一引数のGNSNativeVideoPlayerView情報で行います。

4. GNSNativeVideoPlayerDelegateをGNSNativeVideoViewにセットします。

   videoView.nativeDelegate = self; // self implemented GNSNativeVideoPlayerDelegate
   

   1
   

5. GNNativeAdを引数に設定し動画のリクエストをします。

• NativeAdからのGNSNativeVideoPlayerViewを生成した場合は以下でリクエストします。

  [videoView load];
  

  1
  
• アプリ側でGNSNativeVideoPlayerViewを生成した場合は、GNNativeAdを引数に設定し動画のリクエストをします。

  [videoView load:nativeAd]
  

  1
  

6. 動画の準備ができれば動画準備完了判定と動画開始を実行します。

   - (void)onVideoReceiveSetting:(GNSVideoPlayerView*)view {
       // 動画準備完了判定
       if ([videoView isReady]) {
           // 動画再生開始
           [videoView show];
       }
   }
   

   1
   2
   3
   4
   5
   6
   7
   

7. オプションで以下の値を取得・設定できます。

   // videoViewの開放
   [videoView remove];
   // リプレイ(頭出し再生。使用する場合は、show後から利用可能).
   [videoView replay];
   // mute設定
   [videoView setMuted:YES]
   // mute設定取得
   [videoView getMuted]; // true or false, default true    
   // muteボタン表示状態設定
   [videoView setVisibilityMuteButton:YES];
   // muteボタン表示状態取得
   [videoView getVisibilityMuteButton]; // true or false, default true
   // プログレスバー表示状態設定
   [videoView setVisibilityProgressbar:YES];
   // プログレスバー表示状態取得
   [videoView getVisibilityProgressbar]; // true or false, default true
   // リプレイボタン表示状態設定
   [videoView setVisibilityReplayButton:YES];
   // リプレイボタン表示状態取得
   [videoView getVisibilityReplayButton]; // true or false default true
   // 動画の横幅取得
   int width = [videoView getMediaFileWidth]; // 1600
   // 動画の縦幅取得
   int height = [videoView getMediaFileHeight]; // 900
   // 動画のアスペクト比取得
   float aspect = [videoView getMediaFileAspect]; // 1.777..
   // 動画の総秒数取得
   float duration = [videoView getDuration]; // 30.000
   // 現在の再生秒数取得
   float playTime = [videoView getCurrentposition]; // 15.000
   // 再生中判定
   [videoView isPlaying]; // true or false
   

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   

# 端末回転時でも引続き動画を再生する方法

以下のIFを使用して、端末回転時のサイズに合わせてGNSNativeVideoPlayerViewのサイズを変更してください。

   -(void)viewDidAppear:(BOOL)animated
   {
       // 回転通知登録.
       [[UIDevice currentDevice] beginGeneratingDeviceOrientationNotifications];
       NSNotificationCenter *nc = [NSNotificationCenter defaultCenter];
       [nc addObserver:self selector:@selector(didChangedOrientation:) name:UIDeviceOrientationDidChangeNotification object:nil];
   }

   - (void)viewDidDisappear:(BOOL)animated
   {
       // 回転通知解除.
       NSNotificationCenter *nc = [NSNotificationCenter defaultCenter];
       [nc removeObserver:self name:UIDeviceOrientationDidChangeNotification object:nil];
       [[UIDevice currentDevice] endGeneratingDeviceOrientationNotifications];
   }

- (void)didChangedOrientation:(NSNotification *)notification
{
   if (videoView) {
       CGRect frame = CGRectMake(0, 0, width, height)
       [videoView setFrame:frame];
   }
}

# 動画の自動再生停止について

動画ネイティブについては以下のように動画面積が端末コンテンツ表示面積の割合によって再生停止します。 スクロールによって割合が変化したタイミングや、別アプリに切り替えたタイミングで再生停止されます。

• 動画再生条件・・・動画面積が端末コンテンツ表示面積の50%以上のとき
• 動画停止条件・・・動画面積が端末コンテンツ表示面積の50%未満のとき

# 複数動画について

• 動画表示についてはメモリ負荷を理由に1画面に1つを推奨しております。
• 不要となった動画インスタンスは開放を推奨しております。

# 動画のレギュレーション

動画広告についてoptout-urlの表示は 必ず行ってください。 アプリの特性上、表示させたくないなどの理由がある場合は Geniee担当者にご相談ください。

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

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

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

  #import <GNAdSDK/GNNativeAdRequest.h>
  #import <GNAdSDK/GNNativeAd.h>
  #import <GNAdSDK/GNSNativeVideoPlayerView.h>
  

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