Skip to content

ネイティブ広告実装手順

fan-t-fukuoka edited this page Jul 4, 2018 · 22 revisions

事前準備

まだ広告枠作成、SDKダウンロードを行っていない場合、下記リンク先を参照してください。

SDKの組み込み

プロジェクトにSDKを追加していない場合、以下の方法でSDKを追加してください。

ネイティブ広告実装手順

ネイティブ広告の実装は以下の3ステップで完了します。

  1. 広告情報をレイアウトしたViewを定義
  2. 広告情報と各Viewの関連付けを行う
  3. ネイティブ広告をロード

また、下記二つの機能をオプションで設定できます。

  1. クリックイベントの通知
  2. 広告の自動リロード

広告情報をレイアウトしたViewを定義

アプリ側で広告を表示するためのViewをレイアウトXMLで用意します。
広告を構成する各Viewは、ImageViewTextViewを使用してください。

要素 使用するView
広告画像 ImageView
ロゴ画像 ImageView
広告明示 TextView
広告見出し TextView
広告文 TextView
プロモーション名 TextView
表示URL TextView
アクションボタン TextView

以下にレイアウトの例を示します。

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ad"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp">
    <TextView
        android:id="@+id/ad_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"/>
    <ImageView
        android:id="@+id/ad_image"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_below="@+id/ad_title"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="10dp"/>
    <TextView
        android:id="@+id/ad_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/ad_title"
        android:layout_toRightOf="@+id/ad_image"/>
    <TextView
        android:id="@+id/ad_pr"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:layout_marginRight="10dp"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:background="#FFC107"
        android:layout_below="@+id/ad_image"/>
    <TextView
        android:id="@+id/ad_promotion_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/ad_image"
        android:layout_toRightOf="@+id/ad_pr"
        android:layout_toLeftOf="@+id/ad_action"/>
    <TextView
        android:id="@+id/ad_promotion_url"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="12sp"
        android:layout_marginLeft="10dp"
        android:layout_below="@+id/ad_promotion_name"
        android:layout_toRightOf="@+id/ad_pr"
        android:layout_toLeftOf="@+id/ad_action"/>
    <TextView
        android:id="@+id/ad_action"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:textColor="@android:color/white"
        android:layout_below="@+id/ad_image"
        android:background="#3b5998"/>
</RelativeLayout>

広告情報と各Viewの関連付けを行う

NendAdNativeViewBinderを使用し、上記で作成したレイアウトの各要素に定義した android:id を指定することで関連付けを行います。
広告明示には、第2引数に表示する文言を指定します。

Java
NendAdNativeViewBinder binder = new NendAdNativeViewBinder.Builder()
        .adImageId(R.id.ad_image)                                // 広告画像
        .logoImageId(R.id.logo_image)                            // ロゴ画像
        .titleId(R.id.ad_title)                                  // 広告見出し
        .contentId(R.id.ad_content)                              // 広告文
        .prId(R.id.ad_pr, NendAdNative.AdvertisingExplicitly.PR) // 広告明示
        .promotionUrlId(R.id.ad_promotion_url)                   // 表示URL
        .promotionNameId(R.id.ad_promotion_name)                 // プロモーション名
        .actionId(R.id.ad_action)                                // アクションボタン
        .build();
Kotlin
val binder = NendAdNativeViewBinder.Builder()
        .adImageId(R.id.ad_image)                                // 広告画像
        .logoImageId(R.id.logo_image)                            // ロゴ画像
        .titleId(R.id.ad_title)                                  // 広告見出し
        .contentId(R.id.ad_content)                              // 広告文
        .prId(R.id.ad_pr, NendAdNative.AdvertisingExplicitly.PR) // 広告明示
        .promotionUrlId(R.id.ad_promotion_url)                   // 表示URL
        .promotionNameId(R.id.ad_promotion_name)                 // プロモーション名
        .actionId(R.id.ad_action)                                // アクションボタン
        .build()
定数 文言
NendAdNative.AdvertisingExplicitly.PR PR
NendAdNative.AdvertisingExplicitly.SPONSORED Sponsored
NendAdNative.AdvertisingExplicitly.AD 広告
NendAdNative.AdvertisingExplicitly.PROMOTION プロモーション

制限事項

  • 「広告明示」は必ず表示させる必要があります
  • 広告見出しと広告文、プロモーション名のうちいずれか一つを表示させる必要があります(※1)
要素 メソッド 備考
広告明示 .prId 必須
広告見出し .titleId ※1
広告文 .contentId ※1
プロモーション名 .promotionNameId ※1
表示URL .promotionUrlId -
アクションボタン .actionId -
  • 広告画像を含む広告枠を選択された場合は、広告画像を必ず表示させる必要があります(※2)
  • 画像は下記の制限内で表示させる必要があります
要素 拡縮 切り抜き メソッド 備考
広告画像 30%~150% 上下左右6%ずつまで .adImageId ※2
ロゴ画像 制限なし 禁止 .logoImageId -

拡縮を行う場合は縦横の比率が同じである必要があります。

ネイティブ広告をロード

まず、NendAdNativeClientクラスのインスタンスを生成します。

Java
import net.nend.android.NendAdNativeClient;
...
NendAdNativeClient client = new NendAdNativeClient(context, spotId, "apiKey");
Kotlin
import net.nend.android.NendAdNativeClient
...
val client = NendAdNativeClient(context, spotId, "apiKey")

インスタンス生成時に必要な情報は以下の通りです。

引数名 説明
context Context
spotId int 管理画面より発行されたSpotId
apiKey String 管理画面より発行されたApiKey

続いて、NendAdNativeClient クラスの loadAdメソッドで広告のロードを行います。
広告のロードに成功すると引数のCallback関数の onSuccess で広告オブジェクト NendAdNative が取得できます。
広告のロードに失敗すると引数のCallback関数の onFailure でエラー内容が取得できます。

Java
NendAdNativeClient client = new NendAdNativeClient(context, spotId, "apiKey");
client.loadAd(new NendAdNativeClient.Callback() {
    @Override
    public void onSuccess(NendAdNative nendAdNative) {
    }

    @Override
    public void onFailure(NendAdNativeClient.NendError nendError) {
        Log.i(TAG, "広告取得失敗 " + nendError.getMessage());
    }
});
Kotlin
val client = NendAdNativeClient(context, spotId, "apiKey")
client.loadAd(object : NendAdNativeClient.Callback {
    override fun onSuccess(nendAdNative: NendAdNative) {
    }

    override fun onFailure(nendError: NendAdNativeClient.NendError) {
        Log.i(TAG, "広告取得失敗: ${nendError.message}")
    }
})

ロード失敗時に NendAdNativeClient.NendError に設定されるエラーコードは以下の通りです。

コード 内容 備考
FAILED_AD_REQUEST リクエスト失敗 インターネット未接続等
INVALID_RESPONSE_TYPE レスポンスタイプ不正 SDK内部のエラー (発生は稀です)

ロードした広告情報をViewに描画する

onSuccess で取得した NendAdNative オブジェクトの intoViewメソッドを使用して、広告を描画することができます。
引数は表示するViewによって異なります。

nendAdNative.intoView(View view, NendAdNativeViewBinder binder)
nendAdNative.intoView(NendAdNativeViewHolder viewHolder)

ViewGroupの場合

広告情報をレイアウトしたViewGroupNendAdNativeViewBinder を使用します。

Java
NendAdNativeViewBinder binder = new NendAdNativeViewBinder.Builder()
        .adImageId(R.id.ad_image)
        .logoImageId(R.id.logo_image)
        .titleId(R.id.ad_title)
        .contentId(R.id.ad_content)
        .prId(R.id.ad_pr, NendAdNative.AdvertisingExplicitly.PR)
        .promotionUrlId(R.id.ad_promotion_url)
        .promotionNameId(R.id.ad_promotion_name)
        .actionId(R.id.ad_action)
        .build();

RelativeLayout adLayout = (RelativeLayout)findViewById(R.id.ad);
NendAdNativeClient client = new NendAdNativeClient(context, spotId, "apiKey");
client.loadAd(new NendAdNativeClient.Callback() {
    @Override
    public void onSuccess(NendAdNative nendAdNative) {
        nendAdNative.intoView(adLayout, binder);
    }

    @Override
    public void onFailure(NendAdNativeClient.NendError nendError) {
        Log.i(TAG, "広告取得失敗 " + nendError.getMessage());
    }
});
Kotlin
val binder = NendAdNativeViewBinder.Builder()
        .adImageId(R.id.ad_image)
        .logoImageId(R.id.logo_image)
        .titleId(R.id.ad_title)
        .contentId(R.id.ad_content)
        .prId(R.id.ad_pr, NendAdNative.AdvertisingExplicitly.PR)
        .promotionUrlId(R.id.ad_promotion_url)
        .promotionNameId(R.id.ad_promotion_name)
        .actionId(R.id.ad_action)
        .build()

val adLayout = findViewById(R.id.ad)
val client = NendAdNativeClient(context, spotId, "apiKey")
client.loadAd(object : NendAdNativeClient.Callback {
    override fun onSuccess(nendAdNative: NendAdNative) {
        nendAdNative.intoView(adLayout, binder)
    }

    override fun onFailure(nendError: NendAdNativeClient.NendError) {
        Log.i(TAG, "広告取得失敗: ${nendError.message}")
    }
})

ListViewGridViewの場合

NendAdNativeViewHolderを使用します。
広告情報をレイアウトしたViewから、NendAdNativeViewBindercreateViewHolder メソッドで NendAdNativeViewHolder を生成します。

Java
class NativeListAdapter extends ArrayAdapter<String> {

    private NendAdNativeClient mClient;
    private NendAdNativeViewBinder mBinder;
    // ポジションとロード済み広告を紐付けて保持する
    private HashMap<Integer, NendAdNative> mLoadedAd = new HashMap<>();
    private Handler mHandler = new Handler();

    public NativeListAdapter(Context context, int resource, List<String> list) {
        super(context, resource, list);

        mBinder = new NendAdNativeViewBinder.Builder()
                .adImageId(R.id.ad_image)
                .titleId(R.id.ad_title)
                .promotionNameId(R.id.ad_promotion_name)
                .prId(R.id.ad_pr, NendAdNative.AdvertisingExplicitly.SPONSORED)
                .build();
        mClient = new NendAdNativeClient(context, spotId, "apiKey");
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        final ViewHolder holder;
        final NendAdNativeViewHolder adHolder;
        switch (getItemViewType(position)){
            case NORMAL:
                ...
                break;
            case AD:
                if (mLoadedAd.containsKey(position)) {
                    // ポジションに紐づくロード済み広告がある場合
                    adHolder = (NendAdNativeViewHolder) convertView.getTag();
                    mLoadedAd.get(position).intoView(adHolder);
                } else {
                    // ポジションに紐づくロード済み広告がない場合は新しくロードする
                    convertView = LayoutInflater.from(getContext()).inflate(R.layout.native_ad_left_row, parent, false);
                    adHolder = mBinder.createViewHolder(convertView);
                    convertView.setTag(adHolder);
                    mClient.loadAd(new NendAdNativeClient.Callback() {
                        @Override
                        public void onSuccess(NendAdNative nendAdNative) {
                            mLoadedAd.put(position, nendAdNative);
                            mLoadedAd.get(position).intoView(adHolder);
                        }

                        @Override
                        public void onFailure(NendAdNativeClient.NendError nendError) {
                            Log.i(TAG, "広告取得失敗 " + nendError.getMessage());
                        }
                    });
                }
                break;
        }
        return convertView;
    }

    ...

}
Kotlin
class NativeListAdapter(context: Context, resource: Int, list: List<String>) : ArrayAdapter<String>(context, resource, list) {

    private val client = NendAdNativeClient(context, spotId, "apiKey")
    private val binder = NendAdNativeViewBinder.Builder()
            .adImageId(R.id.ad_image)
            .titleId(R.id.ad_title)
            .promotionNameId(R.id.ad_promotion_name)
            .prId(R.id.ad_pr, NendAdNative.AdvertisingExplicitly.SPONSORED)
            .build()
    // 表示したポジションと広告を紐付けて保持        
    private val loadedAd = mutableMapOf<Int, NendAdNative>()

    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
        val view: View
        val holder: ViewHolder
        val adHolder: NendAdNativeViewHolder
        when (getItemViewType(position)) {
            AD -> {
                if (loadedAd.containsKey(position)) {
                    // ポジションに紐づくロード済み広告がある場合
                    adHolder = convertView?.tag as NendAdNativeViewHolder
                    loadedAd[position]?.intoView(adHolder)
                    view = convertView
                } else {
                    // ポジションに紐づくロード済み広告がない場合は新しくロードする
                    view = LayoutInflater.from(context).inflate(R.layout.native_ad_left_row, parent, false)
                    adHolder = binder.createViewHolder(view)
                    view.tag = adHolder
                    client.loadAd(object : NendAdNativeClient.Callback {
                        override fun onSuccess(nendAdNative: NendAdNative) {
                            Log.i(TAG, "広告取得成功")
                            loadedAd[position] = nendAdNative
                            loadedAd[position]?.intoView(adHolder)
                        }

                        override fun onFailure(nendError: NendAdNativeClient.NendError) {
                            Log.i(TAG, "広告取得失敗: ${nendError.message}")
                        }
                    })
                }
            }
            else -> {
                ...
            }
        }
        return view
    }
    ...
}

クリックイベントの通知

広告クリックのイベントをアプリ側で取得するには、広告オブジェクトの NendAdNative に対し、setOnClickListener を使用してクリックリスナを登録します。

Java
mNendAdNative.setOnClickListener(new NendAdNative.OnClickListener() {
    @Override
    public void onClick(NendAdNative nendAdNative) {
        Log.i(TAG, "On Click Ad");
    }
});
Kotlin
nendAdNative.setOnClickListener({
    Log.i(TAG, "On Click Ad")
})

広告の自動リロード

ver.3.2.0 より、ネイティブ広告の自動リロード機能が追加されました。
NendAdNativeClientenableAutoReload メソッドを使用する事で、自動で新しい広告オブジェクトを取得する事ができます。

nendAdNativeClient.enableAutoReload(long intervalMillis, NendAdNativeClient.Callback Callback);

第一引数の long intervalMillis には自動リロードを行うインターバルをミリ秒で指定します。
(30000(30秒)未満の数値を指定する事はできません)
自動リロードに成功した場合、第二引数のCallback関数の onSuccess で 広告オブジェクトの NendAdNative が取得できます。
自動リロードに失敗した場合、Callback関数の onFailureNendError が返されます。

※ 自動リロードは一度有効にすると繰り返し行われますので、onFailure にエラー通知が来た場合や、アクティビティがバックグラウンドに回った際などの適切なタイミングで 無効 にする必要があります。 自動リロードを無効にするには NendAdNativeClientdisableAutoReload メソッドを使用します。

(実装例)

Java
mClient.enableAutoReload(30000, new NendAdNativeClient.Callback() {
    @Override
    public void onSuccess(NendAdNative nendAdNative) {
        // 新たに取得した nendAdNative をレイアウトにセットする処理などを記述します
    }

    @Override
    public void onFailure(NendAdNativeClient.NendError nendError) {
        Log.i(TAG, "enableAutoReload:" + nendError);
        // エラー発生時自動リロードを無効化
        mClient.disableAutoReload();
    }
});

...

// アクティビティがバックグラウンドに回った為自動リロードを無効化
@Override
protected void onPause() {
    super.onPause();
    mClient.disableAutoReload();
}
Kotlin
client.enableAutoReload(30000, object : NendAdNativeClient.Callback {
    override fun onSuccess(nendAdNative: NendAdNative) {
        // 新たに取得した nendAdNative をレイアウトにセットする処理などを記述します
    }

    override fun onFailure(nendError: NendAdNativeClient.NendError) {
        Log.i(TAG, "enableAutoReload: ${nendError.message}")
        // エラー発生時自動リロードを無効化
        client.disableAutoReload()
    }
})

...

// アクティビティがバックグラウンドに回った為自動リロードを無効化
override fun onPause() {
    super.onPause()
    client.disableAutoReload()
}

検証

日本語

nendSDK Android について

SDKの組み込み

広告の表示

ログ出力

導入サポート


English

About nendSDK Android

SDK Implementation

Display Ads

Logs Output

Supports


中文

关于 nendSDK Android

导入SDK

显示广告

输出日志

导入支持

Clone this wiki locally
You can’t perform that action at this time.