Android ネイティブ広告

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

ネイティブ広告の実装

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

クラスとイベントリスナー

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

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

ネイティブ広告の取得

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

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

    import jp.co.geniee.sdk.ads.nativead.GNNativeAd;
    import jp.co.geniee.sdk.ads.nativead.GNNativeAdRequest;
    import jp.co.geniee.sdk.ads.nativead.GNNativeAdRequestListener;
    import jp.co.geniee.gnadsdk.common.GNAdLogger;
    
    1
    2
    3
    4
  3. GNNativeAdRequestの変数を宣言します。

    GNNativeAdRequest nativeAdRequest;
    
    1
  4. GNNativeAdRequest のインスタンスを初期化します。

  • 初期化 API
    public GNNativeAdRequest(Context context, String zoneids)
    
    1
  • 初期化 API の使用例
    nativeAdRequest = new GNNativeAdRequest(this, "YOUR_ZONE_ID");
    
    1
  • 複数広告表示 初期化 API の使用例
    nativeAdRequest = new GNNativeAdRequest(this, "ZONE_ID_1,ZONE_ID_2,ZONE_ID_3,...,ZONE_ID_10");
    
    1
    パラメータ名 内容
    this アプリのContext
    YOUR_ZONE_ID Geniee内での枠の管理ID
  1. GNNativeAdRequestListenerのコールバック関数を実装し、 ネイティブ広告ロードイベントの結果を受け取ります。

    GNNativeAdRequestListener nativeListener = new GNNativeAdRequestListener() {
        @Override
        public void onNativeAdsLoaded(GNNativeAd[] nativeAds) {
        }
        @Override
        public void onNativeAdsFailedToLoad(GNSException e) {
        }
        @Override
        public boolean onShouldStartInternalBrowserWithClick(String landingURL) {
            return false;
        }
    };
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

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

  2. GNNativeAdRequestListenerイベントリスナーをnativeAdRequestにセットします。

    nativeAdRequest.setAdListener(nativeListener);
    
    1
  3. ネイティブ広告をロードします。

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

    nativeAdRequest.loadAds(this);
    
    1
  • 複数広告を取得する場合は下記メソッドで広告をロードして下さい

    nativeAdRequest.multiLoadAds(this);
    
    1

    thisパラメータは、アプリのContextを設定します。

  • ListActivity の実装例:

    import jp.co.geniee.sdk.ads.nativead.GNNativeAd;
    import jp.co.geniee.sdk.ads.nativead.GNNativeAdRequest;
    import jp.co.geniee.sdk.ads.nativead.GNNativeAdRequestListener;
    import jp.co.geniee.gnadsdk.common.GNAdLogger;
    
    public class NativeAdSampleActivity extends ListActivity {
        private GNNativeAdRequest nativeAdRequest;
    
        private GNNativeAdRequestListener nativeListener = new GNNativeAdRequestListener() {
            @Override
            public void onNativeAdsLoaded(GNNativeAd[] nativeAds) {
                for (final GNNativeAd ad : nativeAds) {
                    queueAds.enqueue(ad);
                }
            }
    
            @Override
            public void onNativeAdsFailedToLoad(GNSException e) {
                Log.w(TAG, "onNativeAdsFailedToLoad Err " + e.getCode() + ":" + e.getMessage());
            }
    
            @Override
            public boolean onShouldStartInternalBrowserWithClick(String landingURL) {
                Log.i(TAG, "onShouldStartInternalBrowserWithClick : " + landingURL);
                return false;
            }
        };
        @Override
        public void onCreate(Bundle savedInstanceState) {
            nativeAdRequest = new GNNativeAdRequest(this, "YOUR_ZONE_ID");
            nativeAdRequest.setAdListener(nativeListener);
            //nativeAdRequest.setGeoLocationEnable(true);
            if (zoneId.split(",").length > 1) {
                nativeAdRequest.multiLoadAds(this);
            } else {
                nativeAdRequest.loadAds(this);
            }
        }
    }
    
    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
    36
    37
    38
    39

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

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

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

  • 情報データ( String 型)の値が未設定の場合、""となります。

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

    プロパティ名 内容
    zoneID String Geniee内での枠の管理ID
    advertiser String 広告主の名前
    title String feed広告のタイトル
    description String 広告説明
    cta String call to actionの文言
    icon_aspectRatio double icon画像の横縦比
    icon_url String icon画像のURL
    icon_height int icon画像の高さ
    icon_width int icon画像の幅
    screenshots_aspectRatio double screenshot画像の横縦比
    screenshots_url String screenshot画像のURL
    screenshots_height int screenshot画像の高さ
    screenshots_width int screenshot画像の幅
    app_appName String アプリの名前
    app_appid String アプリのID(ios:数値、Android:パッケージ)
    app_rating double アプリの評価
    app_storeURL String アプリのストアのURL
    app_targetAge String アプリの対象年齢
    optout_text String オプトアウト情報
    optout_image_url String オプトアウト画像URL
    optout_url String オプトアウトページURL
  • ListActivity の実装例: 管理画面に下記ネイティブ広告の情報を設定した場合

  • title

  • description

  • icon image URL

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    ViewHolder holder;

    Object cell = getItem(position);
    //SDK: Rendering NativeAd content
    if (cell instanceof GNNativeAd) {
        holder.textView.setText(((GNNativeAd)cell).title);
        holder.imageView.setTag(((GNNativeAd)cell).icon_url);
        new ImageGetTask(holder.imageView, ((GNNativeAd)cell).icon_url).execute();
        //SDK: Report impression
        ((GNNativeAd)cell).onTrackingImpression();
    } else {
        // GNNativeAd以外のセルの表示処理
    }
    return convertView;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  • 広告オプトアウトの表示 広告を表示する際にoptoutを表示して下さい。 オプトアウト変数はGNNativeAdインスタンスからアクセス可能です。
プロパティ名 内容
optout_text String オプトアウト情報
optout_image_url String オプトアウト画像URL
optout_url String オプトアウトページURL

サンプルコード

String optout_text = nativeAd.optout_text;
String optout_image_url = nativeAd.optout_image_url;
String optout_url = nativeAd.optout_url;
1
2
3
  • 広告のオプトアウトのクリック

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

  • ListActivity 実装例のイメージ

    image

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

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

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

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

    nativeAd.onTrackingImpression();
    
    1

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

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

    nativeAd.onTrackingClick();
    
    1
  • ListActivity の実装例:

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        ListView listView = (ListView)parent;
        Object cell = listView.getItemAtPosition(position);
        if (cell instanceof GNNativeAd) {
            //SDK: Report click
            ((GNNativeAd)cell).onTrackingClick();
        }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9

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

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

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

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

    public boolean onShouldStartInternalBrowserWithClick(String landingURL)
    
    1

ネイティブ広告の再取得

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

    • 単一広告取得する場合は下記メソッドで広告をロードして下さい
    nativeAdRequest.loadAds(this);
    
    1
  • 複数広告を取得する場合は下記メソッドで広告をロードして下さい

    nativeAdRequest.multiLoadAds(this);
    
    1

thisパラメータは、アプリのContextを設定します。

動画ネイティブ広告

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

クラスとイベントリスナー

Android 動画ネイティブ広告では、従来のクラスに追加して下記動画プレイヤークラスを使用します。

  • GNSNativeVideoPlayerListener 動画ネイティブプレイヤーのロード結果を受け取るためのイベントリスナー
  • GNSNativeVideoPlayerView 動画ネイティブプレイヤーViewを提供するためのクラス

動画ネイティブ広告判定

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

メソッド 戻り型 内容
hasVideoContent() boolean 動画広告保有判定
public void onNativeAdsLoaded(GNNativeAd[] nativeAds) {
    for (final GNNativeAd ad : nativeAds) {
        Log.i(TAG, ad.hasVideoContent());
    }
}
1
2
3
4
5

動画ネイティブ実装方法

  1. GNSNativeVideoPlayerViewGNSNativeVideoPlayerListenerをインポートします。

    import jp.co.geniee.sdk.ads.nativead.GNSNativeVideoPlayerListener;
    import jp.co.geniee.sdk.ads.nativead.GNSNativeVideoPlayerView;
    
    1
    2
  2. GNSNativeVideoPlayerView のインスタンスの生成とView追加

  • NativeAdからの生成例

    GNSNativeVideoPlayerView videoView = ((GNNativeAd)ad).getVideoView();
    containerView.AddView(videoView);
    
    1
    2
  • 新規での生成例

    GNSNativeVideoPlayerView videoView = new GNSNativeVideoPlayerView(this);
    containerView.AddView(videoView);
    
    1
    2
  • レイアウトから呼び出す例

    GNSNativeVideoPlayerView videoPlayerView = findViewById(R.id.videoPlayerView);
    
    1
    <jp.co.geniee.sdk.ads.nativead.GNSNativeVideoPlayerView
        android:id="@+id/videoPlayerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    
    1
    2
    3
    4
  1. クリックで画面遷させるためにActivity連携をします。
    videoView.setActivity(this);
    
    1

thisパラメータは、アプリのContextを設定します。

  1. ライフサイクル連携をします。

    @Override
    protected void onResume() {
        super.onResume();
        if (videoView != null) {
            videoView.resume();
        }
    }
    @Override
    protected void onPause() {
        super.onPause();
        if (videoView != null) {
            videoView.pause();
        }
    }
    
    @Override
    protected void onDestroy() {
        // 他画面でvideoViewを使わない場合は以下記述ください
        if (videoView != null) {
            videoView.remove();
        }
        super.onDestroy();
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
  2. GNSNativeVideoPlayerListenerのコールバック関数を実装し、 動画ネイティブプレイヤーイベントの結果を受け取ります。

    GNSNativeVideoPlayerListener nativeVideoPlayerListener = new GNSNativeVideoPlayerListener() {
        // Sent when an video ad request succeeded.
        @Override
        public void onVideoReceiveSetting(GNSNativeVideoPlayerView videoView) {
            Log.i(TAG, "onVideoReceiveSetting videoView.isReady()=" + videoView.isReady());
            if (videoView.isReady()) {
                videoView.show();
                Log.i(TAG, "onVideoReceiveSetting videoView.show");
            }
        }
        // Sent when an video ad request failed.
        // (Network Connection Unavailable, Frequency capping, Out of ad stock)
        @Override
        public void onVideoFailWithError(GNSNativeVideoPlayerView videoView, GNSException e) {
            Log.w(TAG, "Err:" + e.getCode() + " " + e.getMessage()));
        }
        // When playback of video ad is started
        @Override
        public void onVideoStartPlaying(GNSNativeVideoPlayerView videoView) {
            Log.i(TAG, "Ad started playing.");
        }
        // When playback of video ad is completed
        @Override
        public void onVideoPlayComplete(GNSNativeVideoPlayerView videoView) {
            Log.i(TAG, "Ad finished playing.");
        }

        @Override
        public void onVideoClose(GNSNativeVideoPlayerView videoView) {
            // Native広告では使用しませんが、メソッドの実装は必要です。
            Log.i(TAG,"Ad closed");
        }
     };
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

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

  1. GNSNativeVideoPlayerListenerイベントリスナーをVideoViewにセットします。

    videoView.setListener(nativeVideoPlayerListener);
    
    1
  2. GNNativeAdを設定し動画のリクエストをします。

  • GNNativeAdからGNSNativeVideoPlayerViewを生成した場合(2 NativeAdからの生成例)は以下でリクエストできます。
    videoView.load();
    
    1
  • 新規でGNSNativeVideoPlayerViewを生成した場合(2 新規での生成例)は、GNNativeAdを引数に設定し動画をリクエストをします。
    videoView.load((GNNativeAd)ad);
    
    1
  1. 動画の準備ができれば動画準備完了判定と動画開始を実行します。

    @Override
    public void onVideoReceiveSetting(GNSNativeVideoPlayerView videoView) {
        // 動画準備完了判定
        if (videoView.isReady()) {
            // 動画再生開始
            videoView.show();
        }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
  2. オプションで以下値を取得できます。

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

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

  • AndroidManifestのActivityに以下のようにandroid:configChanges="orientation|screenSize"属性を追加します。
    <activity
        android:name=".MainActivity"
        android:configChanges="orientation|screenSize">
    
    1
    2
    3
  • Activityに以下メソッドを追加します。
    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        final Handler handler = new Handler();
        handler.post(new Runnable() {
            @Override
            public void run() {
                if (videoView != null) {
                    videoView.getLayoutParams().height = (int) (videoView.getWidth() / videoView.getMediaFileAspect());
                }
            }
        });
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

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

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

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

複数動画について

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

動画広告のレギュレーション

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

Last Updated: 2020-7-6 12:51:22