Native Ads Integration For iOS - unigeniee/Geniee-iOS-SDK GitHub Wiki

iOS ネイティブ広告の実装

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

実装準備

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

クラスとプロトコル

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

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

ネイティブ広告の取得

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

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

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

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

@interface TableViewController () <GNNativeAdRequestDelegate>
{
}

GNNativeAdRequestの変数を宣言します。
```
GNNativeAdRequest *_nativeAdRequest;
```

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

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

複数広告表示　初期化例

_nativeAdRequest = [[GNNativeAdRequest sharedMenager] initWithID:@"YOUR_SSP_APP_ID,YOUR_SSP_APP_ID2,.."];

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

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

[_nativeAdRequest loadAds];

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

[_nativeAdRequest multiLoadAds];

GNNativeAdRequestDelegateプロトコルの実装
GNNativeAdRequestDelegateのコールバック関数を実装し、
ネイティブ広告のロードイベントの結果を受け取ります。
```
- (void)nativeAdRequestDidReceiveAds:(NSArray*)nativeAds;
- (void)nativeAdRequest:(GNNativeAdRequest *)request didFailToReceiveAdsWithError:(NSError *)error;
```

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

GNNativeAdRequest のインスタンスをリリースする際に、delegateをnilに設定します。
```
- (void)dealloc
{
    _nativeAdRequest.delegate = nil;
}
```

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_SSP_APP_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_SSP_APP_ID"]) {
        //    [_cellDataList addObject:nativeAd];
        //}
        [_cellDataList addObject:nativeAd];
    }
}

- (void)nativeAdRequest:(GNNativeAdRequest *)request didFailToReceiveAdsWithError:(NSError *)error
{
    NSLog(@"TableViewController: didFailToReceiveAdsWithError : %@.", [error localizedDescription]);
}

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

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

情報データの型は、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;
}

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

名前	型	内容
optout_text	NSString	オプトアウト情報
optout_image_url	NSString	オプトアウト画像URL
optout_url	NSString	オプトアウトページURL

サンプルコード

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];
```

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

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

UITableViewControllerの実装例：

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

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

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

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

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

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

ネイティブ広告の再取得

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

[_nativeAdRequest loadAds];

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

[_nativeAdRequest multiLoadAds];

UITableViewControllerの実装例：

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

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

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

動画ネイティブ広告

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

クラスとプロトコル

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

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

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

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

メソッド	戻り型	内容
hasVideoContent	BOOL	動画広告保有判定

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

動画ネイティブ実装方法

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

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

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

GNNativeAdからの生成例

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

アプリ側での生成例

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

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;

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

GNSNativeVideoPlayerDelegateをGNSNativeVideoViewにセットします。

videoView.nativeDelegate = self; // self implemented GNSNativeVideoPlayerDelegate

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

NativeAdからのGNSNativeVideoPlayerViewを生成した場合は以下でリクエストします。
```
[videoView load];
```
アプリ側でGNSNativeVideoPlayerViewを生成した場合は、GNNativeAdを引数に設定し動画のリクエストをします。
```
[videoView load:nativeAd]
```

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

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

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

   // videoViewの開放
   [videoView remove];
   // mute設定
   [videoView setMuted:YES]
   // mute設定取得
   [videoView getMuted]; // true or false, default true
   // 動画ファイルの横幅
   int *width = [videoView getMediaFileWidth]; // 1600
   // 動画ファイルの縦幅
   int *height = [videoView getMediaFileHeight]; // 900
   // 動画ファイルのアスペクト比
   float *aspect = [videoView getMediaFileAspect]; // 1.777..

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

以下の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つを推奨しております。
不要となった動画インスタンスは開放を推奨しております。

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>

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

Native Ads Integration For iOS - unigeniee/Geniee-iOS-SDK GitHub Wiki

iOS ネイティブ広告の実装

実装準備

クラスとプロトコル

ネイティブ広告の取得

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

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

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

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

ネイティブ広告の再取得

動画ネイティブ広告

クラスとプロトコル

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

動画ネイティブ実装方法

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

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

複数動画について

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

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

⚠️ GitHub.com Fallback ⚠️