FAN(ネイティブ広告)_SDK連携

SDK実装の流れ

AdGeneraitonのSDKを実装します
　↓
SDK連携にあたっての共通作業を行います
　↓
SDK連携対象アドネットワークのSDKを追加します

1.AdGenerationSDK実装

AdGenerationの広告が表示される最新環境であることを前提とします。

下記の該当するマニュアルにてAdGeneration SDKを実装します。

バナー・ネイティブ広告
- iOS SDK導入マニュアル（バナー・ネイティブ広告）
- Android SDK導入マニュアル（バナー・ネイティブ広告）
インタースティシャル広告
- iOS SDK導入マニュアル（インターステシャル広告）
- Android SDK導入マニュアル（インターステシャル広告）
※Plugin（Unity、Cocos2d-x、Titanium）での対応はお問い合わせください。

2.SDK連携にあたっての共通作業

注意事項

対応のOSバージョンはアドネットワーク毎に異なります。
連携先によっては在庫切れが多いものもございます。
在庫切れ対策としてエラーの際の再リクエストが行われることをご確認ください。
- iOSの場合はADGManagerViewControllerFailedToReceiveAd
- Androidの場合はonFailedToReceiveAd
連携先SDKを抜いた状態で動作させるとエラーを起こすことが可能です。
テスト用IDをセットしたままリリースしないようにしてください。
動画SDKの場合、ローテーション時間は動画の再生完了を基準とします。

iOS実装（共通）

広告のロードに失敗した場合は再リクエストや非表示等の処理を必ず実装してください。

//iOS(Objective-C)エラー時再リクエストコード例
- (void)ADGManagerViewControllerFailedToReceiveAd:(ADGManagerViewController *)adgManagerViewController
                                             code:(kADGErrorCode)code {
    switch (code) {
        case kADGErrorCodeExceedLimit:
        case kADGErrorCodeNeedConnection:
            break;
        default:
            [adgManagerViewController loadRequest];
            break;
    }
}

「広告タップ時のアプリ内ブラウザ起動」「動画のインビュー判定」のため、最前面にあるUIRootViewControllerをセットしてください。

_adg.rootViewController = self;

合わせて広告破棄のタイミングでnilをセットしてください。

- (void) dealloc {
    _adg.rootViewController = nil;

XcodeのOther Linker Flagsに-ObjCを指定します。
接続先SDKをプロジェクトに追加します。
- 対象外バージョンで動作するアプリの場合、追加の際はoptionalを指定してください。
接続先SDKで必要なframeworkをプロジェクトに追加します。
- AdSupport.frameworkはoptionalを指定してください。

Android実装（共通）

広告のロードに失敗した場合は再リクエストや非表示等の処理を必ず実装してください。

//Android(Java)エラー時再リクエストコード例
class AdListener extends ADGListener {
    @Override
    public void onFailedToReceiveAd(ADGErrorCode code) {
        // 不通とエラー過多のとき以外はリトライ
        switch (code) {
        case EXCEED_LIMIT:
        case NEED_CONNECTION:
            break;
        default:
            if (adg != null) {
                adg.start();
            }
            break;
        }
    }
}

接続に必要なファイルをプロジェクトに追加します。
接続に必要なpermissionをAndroidManifestに記述します。
接続に必要なActivityをAndroidManifestに記述します。
Proguardを使う場合は設定をproguard-project.txtに記述します。

3.連携対象アドネットワークSDK追加

「Facebook広告（FAN) SDK」は以下よりダウンロードしてください。

iOS版　
- FBAudienceNetwork.framework ver4.7.1
Android版
- AudienceNetwork.jar ver4.7.0
  （AudienceNetwork/binフォルダ配下です）

FAN NativeAd 詳細

テストについて

実機でのFANの広告はFacebookユーザーとしてのターゲティングができたときに表示されます。
下記の三つをご確認ください。

Facebookアプリにログインした端末でFANの広告が表示されること。
Facebookアプリにログインしていない端末でFAN以外の広告がスムーズに表示されること。
広告のタップによる開閉が正常に行われること。

ターゲティングについて詳しくはオーディエンスネットワークのよくある質問に記載されています。

iOS

対応iOSバージョン

7.0〜

サイズ指定

// iOSでのサイズ指定例
@"adtype" : @(kADG_AdType_Free),
@"w" : @(320),
@"h" :@(50)

// Androidでのサイズ指定例
adg.setAdFrameSize(AdFrameSize.FREE.setSize(320, 50));

必要なframework

AdSupport.framework
StoreKit.framework
CoreMotion.framework
CoreMedia.framework
AVFoundation.framework

無効なプロパティ

adScale
preventAccidentClick

無効なdelegate

ADGManagerViewControllerOpenUrl
ADGManagerViewControllerReceiveFiller

実装方法

インポート

#import <ADG/ADGManagerViewController.h> // ADGインポート
#import <FBAudienceNetwork/FBAdSettings.h> // FB import for test
#import <FBAudienceNetwork/FBNativeAd.h> // FB import
#import <FBAudienceNetwork/FBAdChoicesView.h> // FB import
#import <FBAudienceNetwork/FBMediaView.h> // FB import

Delegate設定

@interface ViewController : UIViewController <ADGManagerViewControllerDelegate>

property

@property (nonatomic, retain) ADGManagerViewController *adg; // AdGeneration
@property (retain, nonatomic) FBNativeAd *nativeAd; // FBNativeAd

AdGeneration枠生成

// 基本的にAdGenerationの通常広告と同様ですが、addChildViewControllerのみNativeAd固有です。
NSDictionary *adgparam = @{
                       @"locationid" : @"広告枠ID", // AdGeneration広告枠ID
                       @"adtype" : @(kADG_AdType_Free),
                       @"originx" : @(0),
                       @"originy" : @(20),
                       @"w":@(300),//横幅
                       @"h":@(250)//縦幅
                       };
_adg = [[ADGManagerViewController alloc] initWithAdParams:adgparam adView:self.view];
[_adg setBackGround:[UIColor whiteColor] opaque:YES];
[_adg stopAutomaticLoad];
_adg.delegate = self;
_adg.rootViewController = self;
[self addChildViewController:self.adg];
[_adg setFillerRetry:NO];

破棄とローテーション停止、再開

// 通常の広告と同様です
- (void) dealloc {
    // アドジェネの破棄
    _adg.delegate = nil;
    _adg.rootViewController = nil;
    _adg = nil;
}
- (void)viewDidAppear:(BOOL)animated{
    [super viewDidAppear:animated];

    // ローテーション再開
    if(_adg)
    {
        [_adg resumeRefresh];
    }
}
- (void) viewDidDisappear:(BOOL)animated{
    [super viewDidDisappear:animated];

    // ローテーション停止
    if(_adg)
    {
        [_adg pauseRefresh];
    }
}

エラー時のリトライ

// 通常の広告と同様です
- (void)ADGManagerViewControllerFailedToReceiveAd:(ADGManagerViewController *)adgManagerViewController code:(kADGErrorCode)code {
    NSLog(@"%@", @"ADGManagerViewControllerFailedToReceiveAd secondView");
    // 不通とエラー過多のとき以外はリトライ
    switch (code) {
     case kADGErrorCodeExceedLimit:
     case kADGErrorCodeNeedConnection:
     break;
     default:
     [adgManagerViewController loadRequest];
     break;
     }
}

NativeAdの配置

(void)ADGManagerViewControllerReceiveAd:(ADGManagerViewController *)adgManagerViewController mediationNativeAd:(id)mediationNativeAd {のDelegateでmediationNativeAdを使って配置します。mediationNativeAdにFBNativeAdのインスタンスが格納されてきます。
下記は実装サンプルとなります。

// native adのreceiveで呼ばれるDelegateです
- (void)ADGManagerViewControllerReceiveAd:(ADGManagerViewController *)adgManagerViewController
                        mediationNativeAd:(id)mediationNativeAd {
    // FBNativeAdクラスか確認
    if ([mediationNativeAd isKindOfClass:[FBNativeAd class]]) {
        if (self.nativeAd) {
            [self.nativeAd unregisterView];
        }

        FBNativeAd *nativeAd = (FBNativeAd *) mediationNativeAd;
        self.nativeAd = nativeAd;

        //アイコン
        NSData *iconImageData = [NSData dataWithContentsOfURL:nativeAd.icon.url];
        UIImage *iconImage = [UIImage imageWithData:iconImageData];
        UIImageView *iconImageView = [[UIImageView alloc] init];
        iconImageView.frame = CGRectMake(4, 4, 30 ,30);
        iconImageView.image = iconImage;

        //タイトル
        UILabel *titleLbl = [[UILabel alloc] initWithFrame:CGRectMake(38, 4, 180, 15)];
        [titleLbl setNumberOfLines:1];
        [titleLbl setFont:[titleLbl.font fontWithSize:15]];
        [titleLbl setText: nativeAd.title];

        //広告マーク
        UILabel *adTextLabel = [[UILabel alloc] initWithFrame:CGRectMake(38, 20, 28, 14)];
        adTextLabel.layer.cornerRadius =5;
        adTextLabel.clipsToBounds = true;
        adTextLabel.baselineAdjustment = UIBaselineAdjustmentAlignCenters;
        adTextLabel.textAlignment = NSTextAlignmentCenter;
        adTextLabel.textColor = [UIColor whiteColor];
        [adTextLabel setFont:[adTextLabel.font fontWithSize:10]];
        [adTextLabel setText:@"広告"];
        [adTextLabel setBackgroundColor:[UIColor colorWithRed:0.827 green:0.827 blue:0.827 alpha:1.0]];



        //カバーイメージ
        //動画を許容しない場合はnativeAd.coverImageを使ってください。
        FBMediaView *coverImageView = [[FBMediaView alloc] initWithFrame:CGRectMake(4, 40 , 292 , 156)];
        [coverImageView setNativeAd:nativeAd];

        //静止画のみのコードイメージ
        /*NSData *coverImageData = [NSData dataWithContentsOfURL:nativeAd.coverImage.url];
         UIImage *coverImage = [UIImage imageWithData:coverImageData];
         UIImageView *coverImageView = [[UIImageView alloc] init];
         coverImageView.frame = CGRectMake(0, 0 , 300 , 156);
         coverImageView.image = coverImage;*/

        //adBody
        UILabel *description = [[UILabel alloc] initWithFrame:CGRectMake(4, 198, 172, 40)];
        [description setNumberOfLines:2];
        [description setFont: [description.font fontWithSize:14]];
        [description setText:nativeAd.body];
        description.textColor = [UIColor lightGrayColor];

        //social
        UILabel *socialLbl = [[UILabel alloc] initWithFrame:CGRectMake(4, 232, 150, 20)];
        [socialLbl setNumberOfLines:1];
        UIFont *socialFont = socialLbl.font;
        socialFont = [socialFont fontWithSize:12];
        [socialLbl setFont:socialFont];
        [socialLbl setTextColor:[UIColor colorWithRed:0.7 green:0.7 blue:0.7 alpha:1.0]];
        [socialLbl setText:nativeAd.socialContext];

        //ボタン
        UIButton *actionBtn = [[UIButton alloc] initWithFrame:CGRectMake(178 , 216 , 114 , 25)];
        [actionBtn setTitle:nativeAd.callToAction forState:UIControlStateNormal];
        [actionBtn setTitleColor:[UIColor colorWithRed:0.12 green:0.56 blue:1.00 alpha:1.0] forState:UIControlStateNormal];
        [actionBtn setBackgroundColor:[UIColor whiteColor]];
        [actionBtn.titleLabel setFont: [UIFont boldSystemFontOfSize:14]];
        actionBtn.layer.borderWidth = 1.0f;
        actionBtn.layer.borderColor = [[UIColor colorWithRed:0.12 green:0.56 blue:1.00 alpha:1.0] CGColor];
        actionBtn.layer.cornerRadius = 5.0f;
        actionBtn.titleEdgeInsets = UIEdgeInsetsMake(1.0f, 1.0f, 1.0f, 1.0f);

        //AdChoices
        FBAdChoicesView *adChoices = [[FBAdChoicesView alloc] initWithNativeAd:nativeAd];
        [adChoices setBackgroundShown:YES];

        UIView *nativeAdView = [[UIView alloc] initWithFrame:CGRectMake(0,0,300,250)];
        [nativeAdView addSubview:iconImageView];
        [nativeAdView addSubview:coverImageView];
        [nativeAdView addSubview:titleLbl];
        [nativeAdView addSubview:adTextLabel];
        [nativeAdView addSubview:actionBtn];
        [nativeAdView addSubview:socialLbl];
        [nativeAdView addSubview:description];
        [nativeAdView addSubview:adChoices];
        [adChoices updateFrameFromSuperview:UIRectCornerTopRight];// AdChoices位置指定

        NSArray *clickableViews = @[coverImageView, titleLbl , actionBtn , socialLbl];
        [nativeAd registerViewForInteraction:nativeAdView withViewController:self withClickableViews:clickableViews];

        [adgManagerViewController addMediationNativeAdView:nativeAdView];
    }
}

テスト広告の表示

下記の手順により実機でテスト広告を表示することが可能です。

FANが配信設定された枠IDをセットして広告のリクエストを行う。
ログにテスト広告表示のための指示が出力される。（XXXXXXXXXXXXXXXXXXXに入る文字列は環境によってユニークです）

2015-11-30 00:00:00.000 SampleApp[99999:9999999] [FBAudienceNetworkLog/FBAdSettings:95] When testing your app with Facebook's ad units you must specify the device hashed ID to ensure the delivery of test ads, add the following code before loading an ad: [FBAdSettings addTestDevice:@"XXXXXXXXXXXXXXXXXXX"]

指示の[FBAdSettings addTestDevice:@"XXXXXXXXXXXXXXXXXXX"]の箇所をコード上にペーストする。
アプリのリリース時はペーストしたコードを削除してください。

テスト用ID

28613

参考

FBNativeAdクラスリファレンス
- https://developers.facebook.com/docs/reference/ios/current/class/FBNativeAd/
FacebookAudienceNetwork 実装ガイドライン
- https://developers.facebook.com/docs/audience-network/guidelines/native-ads?locale=ja_JP
FacebookAudiecneNetwork NativeAd実装サンプル
- 公式ページからSDKをダウンロードし、Samples/FBAudiecneNetowrk/NativeAdSample
- https://developers.facebook.com/docs/ios/downloads

Android

対応AndroidOSバージョン

4.0.3〜

必要なpermission

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

必要なActivity

<activity android:name="com.facebook.ads.InterstitialAdActivity" android:configChanges="keyboardHidden|orientation|screenSize" />

Proguard設定

Proguard適用後の広告表示についても必ずご確認ください。

-keepclasseswithmembers class com.facebook.ads.** { *; }

実装方法

レイアウト設定例

.xml

動画を表示せず静止画のみを表示する場合はcom.facebook.ads.MediaViewではなくImageViewを指定してください。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

    <LinearLayout
        android:id="@+id/native_ad_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <com.facebook.ads.MediaView
            android:id="@+id/native_ad_cover_image"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingBottom="5dp"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="5dp">

            <TextView
                android:id="@+id/native_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingBottom="3dp"
                android:textSize="16sp"
                android:textStyle="bold" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:baselineAligned="false"
                android:orientation="horizontal"
                android:weightSum="7">

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="4"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/native_social_context"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="@android:color/darker_gray"
                        android:textSize="12sp" />

                    <TextView
                        android:id="@+id/native_pr_text"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="sponsored"
                        android:textSize="12sp" />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="3"
                    android:orientation="vertical">

                    <Button
                        android:id="@+id/native_action_btn"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:textSize="12sp" />

                </LinearLayout>

            </LinearLayout>

        </LinearLayout>

    </LinearLayout>

    <RelativeLayout
        android:id="@+id/native_ad_choice_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="left|bottom" />

</FrameLayout>

.java

サンプルのMainActivity.javaをご参照ください。

インポート

// AdGeneration
import com.socdm.d.adgeneration.ADG;
import com.socdm.d.adgeneration.ADG.AdFrameSize;
import com.socdm.d.adgeneration.ADGConsts.ADGErrorCode;
import com.socdm.d.adgeneration.ADGListener;
// Facebook
import com.facebook.ads.AdSettings;
import com.facebook.ads.NativeAd;
import com.facebook.ads.MediaView;
import com.facebook.ads.AdChoicesView;
// その他標準のクラスを必要に応じて追加してください。

AdGeneration枠生成

// 基本的にAdGenerationの通常広告と同様です
adg = new ADG(this);
adg.setLocationId("広告枠ID"); // AdGeneration広告枠ID
adg.setAdFrameSize(AdFrameSize.FREE.setSize(300, 250)); // サイズ指定
adg.setAdListener(new AdListener()); // Listener定義
adg.setReloadWithVisibilityChanged(false);
adg.setFillerRetry(false);

破棄とローテーション停止、再開

@Override
protected void onResume() {
    super.onResume();
    // 広告表示/ローテーション再開
    if (adg != null) {
        adg.start();
    }
}
@Override
protected void onPause() {
    super.onPause();
    // ローテーション停止
    if (adg != null) {
        adg.pause();
    }
}

エラー時のリトライ

// 通常の広告と同様です
@Override
public void onFailedToReceiveAd(ADGErrorCode code) {
    // 不通とエラー過多のとき以外はリトライ
    switch (code) {
        case EXCEED_LIMIT:
        case NEED_CONNECTION:
            break;
        default:
            if (adg != null) {
                adg.start();
            }
            break;
    }
}

NativeAdの配置

onReceiveAd(Object o)のDelegateでNativeAdのインスタンスを用いて実装します。
下記は実装サンプルとなります。

@Override
public void onReceiveAd(Object _nativeAd) {
    if (adg != null && _nativeAd instanceof NativeAd) {
        LayoutInflater inflater = getLayoutInflater();
        LinearLayout container = new LinearLayout(getBaseContext());
        LinearLayout layout = (LinearLayout) inflater.inflate(R.layout.native_ad, container);

        NativeAd nativeAd = (NativeAd) _nativeAd;

        // 動画/静止画兼用のときはMediaViewを使用する
        MediaView mediaView = (MediaView) layout.findViewById(R.id.native_ad_cover_image);

        // 静止画のみのときはMediaViewではなくImageViewを使用する
        // ImageView adCoverView = (ImageView) layout.findViewById(R.id.native_ad_cover_image);

        TextView titleView = (TextView) layout.findViewById(R.id.native_title);
        TextView socialContextView = (TextView) layout.findViewById(R.id.native_social_context);
        Button actionBtn = (Button) layout.findViewById(R.id.native_action_btn);
        RelativeLayout adChoiceContainer = (RelativeLayout) layout.findViewById(R.id.native_ad_choice_container);

        // Setting the Text
        String title = nativeAd.getAdTitle();
        title = title.length() > 20 ? title.substring(0, 20) + "..." : title;
        titleView.setText(title);
        socialContextView.setText(nativeAd.getAdSocialContext());
        actionBtn.setText(nativeAd.getAdCallToAction());
        actionBtn.setVisibility(View.VISIBLE);

        // Downloading and setting the ad cover image.
        // 動画/静止画兼用のとき
        mediaView.setLayoutParams(new LinearLayout.LayoutParams(
                            DisplayUtils.getPixels(getResources(), 300), 
                            DisplayUtils.getPixels(getResources(), 157)));
                    mediaView.setNativeAd(nativeAd);

        // 静止画のみのとき
        /* NativeAd.Image adCoverImage = nativeAd.getAdCoverImage();
        adCoverView.setLayoutParams(new LinearLayout.LayoutParams(
                DisplayUtils.getPixels(getResources(), 300),
                DisplayUtils.getPixels(getResources(), 157)));
        NativeAd.downloadAndDisplayImage(adCoverImage, adCoverView); */

        // Set AdChoices View
        AdChoicesView adChoicesView = new AdChoicesView(MainActivity.this, nativeAd, true);
        adChoiceContainer.addView(adChoicesView);

        nativeAd.registerViewForInteraction(layout.findViewById(R.id.native_ad_container));

        adg.addMediationNativeAdView(container);
    }
}

無効なプロパティ

adScale

無効なListener

onOpenUrl

テスト広告の表示

下記の手順により実機でテスト広告を表示することが可能です。

FANが配信設定された枠IDをセットして広告のリクエストを行う。
ログにテスト広告表示のための指示が出力される。（XXXXXXXXXXXXXXXXXXXに入る文字列は環境によってユニークです）

11-30 00:00:00.000: D/AdSettings(1759): Test mode device hash: XXXXXXXXXXXXXXXXXXX
11-30 00:00:00.000: D/AdSettings(1759): When testing your app with Facebook's ad units you must specify the device hashed ID to ensure the delivery of test ads, add the following code before loading an ad: AdSettings.addTestDevice("XXXXXXXXXXXXXXXXXXX");

指示のAdSettings.addTestDevice("XXXXXXXXXXXXXXXXXXX");の箇所をコード上にペーストする。
アプリのリリース時はペーストしたコードを削除してください。

テスト用ID

28612

参考

FBNativeAdクラスリファレンス
- https://developers.facebook.com/docs/reference/android/current/class/NativeAd/
FacebookAudienceNetwork 実装ガイドライン
- https://developers.facebook.com/docs/audience-network/guidelines/native-ads?locale=ja_JP
FacebookAudiecneNetwork NativeAd実装サンプル
- 公式ページからSDKをダウンロードし、AudienceNetwork/samples/NativeAdSample
- https://developers.facebook.com/docs/android/downloads

AdGeneration/sdk

HTTPS clone URL

Subversion checkout URL

FAN(ネイティブ広告)_SDK連携

Clone this wiki locally

SDK実装の流れ

1.AdGenerationSDK実装

2.SDK連携にあたっての共通作業

注意事項

iOS実装（共通）

Android実装（共通）

3.連携対象アドネットワークSDK追加

FAN NativeAd 詳細

テストについて

iOS

対応iOSバージョン

サイズ指定

必要なframework

無効なプロパティ

無効なdelegate

実装方法

インポート

Delegate設定

property

AdGeneration枠生成

破棄とローテーション停止、再開

エラー時のリトライ

NativeAdの配置

テスト広告の表示

テスト用ID

参考

Android

対応AndroidOSバージョン

必要なpermission

必要なActivity

Proguard設定

実装方法

レイアウト設定例

.xml

.java

インポート

AdGeneration枠生成

破棄とローテーション停止、再開

エラー時のリトライ

NativeAdの配置

無効なプロパティ

無効なListener

テスト広告の表示

テスト用ID

参考