Meta Audience Network

ネイティブバナー広告をAndroidアプリに追加する

ネイティブバナー広告APIを使うと、画像、動画、カルーセルコンテンツといった広告主のクリエイティブアセットなしで、ネイティブ広告を表示するカスタマイズされたエクスペリエンスを実現できます。ネイティブ広告と同様、タイトル、アイコン、コールトゥアクションといった広告プロパティのグループを受け取り、それらを使って広告の表示先のカスタムビューを構築できます。ただし、バナー広告とは違って、ネイティブバナー広告 APIにはネイティブレイアウトエクスペリエンスが備わっているので、広告内部のコンポーネントのレイアウトを完全にカスタマイズできます。

続行する前に、必ずAudience NetworkのスタートガイドとAndroidのスタートガイドすべてに目を通しておいてください。

このガイドでは、次のネイティブバナー広告配置を実装します。次のコンポーネントを使用してネイティブバナー広告を作成します。

ビュー1: AdOptionsView

ビュー2: スポンサーラベル

ビュー3: 広告アイコン

ビュー4: 広告のタイトル

ビュー5: ソーシャルコンテキスト

ビュー6: コールトゥアクションボタン




ネイティブバナー広告のステップ

ステップ1: ネイティブバナー広告をリクエストする

ステップ2: ネイティブバナー広告のレイアウトを作成する

ステップ3: 広告のメタデータを使ってレイアウトを設定する

Audience Network SDKを初期化する

このメソッドは、Android Audience Network SDKバージョン5.1で追加されました。

バージョン5.3.0以降では、Audience Network Android SDKの明示的な初期化が必須です。Audience Network Android SDKを初期化する方法については、こちらのドキュメントをご覧ください。

広告オブジェクトを作成したり、広告を読み込んだりする前に、Audience Network SDKを初期化してください。アプリの起動時に初期化することをおすすめします。

public class YourApplication extends Application {
    ...
    @Override
    public void onCreate() {
        super.onCreate();
        // Initialize the Audience Network SDK
        AudienceNetworkAds.initialize(this);       
    }
    ...
}

ステップ1: ネイティブバナー広告をリクエストする

Facebook広告SDKをインポートするには、お使いのActivityの先頭に以下のコードを追加します。

import com.facebook.ads.*;

次に、NativeBannerAdオブジェクトをインスタンス化し、AdListenerを作成し、アクティビティ内でloadAd(...)を呼び出します。

public class NativeBannerAdActivity extends Activity {

    private final String TAG = NativeBannerAdActivity.class.getSimpleName();
    private NativeBannerAd nativeBannerAd;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Instantiate a NativeBannerAd object. 
        // NOTE: the placement ID will eventually identify this as your App, you can ignore it for
        // now, while you are testing and replace it later when you have signed up.
        // While you are using this temporary code you will only get test ads and if you release
        // your code like this to the Google Play your users will not receive ads (you will get a no fill error).
        nativeBannerAd = new NativeBannerAd(this, "YOUR_PLACEMENT_ID");
        NativeAdListener nativeAdListener = new NativeAdListener() {

            @Override
            public void onMediaDownloaded(Ad ad) {
                // Native ad finished downloading all assets
                Log.e(TAG, "Native ad finished downloading all assets.");
            }

            @Override
            public void onError(Ad ad, AdError adError) {
                // Native ad failed to load
                Log.e(TAG, "Native ad failed to load: " + adError.getErrorMessage());
            }

            @Override
            public void onAdLoaded(Ad ad) {
                // Native ad is loaded and ready to be displayed
                Log.d(TAG, "Native ad is loaded and ready to be displayed!");
            }

            @Override
            public void onAdClicked(Ad ad) {
                // Native ad clicked
                Log.d(TAG, "Native ad clicked!");
            }

            @Override
            public void onLoggingImpression(Ad ad) {
                // Native ad impression
                Log.d(TAG, "Native ad impression logged!");
            }
        });
        // load the ad
        nativeBannerAd.loadAd(
                nativeBannerAd.buildLoadAdConfig()
                        .withAdListener(nativeAdListener)
                        .build());
    }
}

後ほど、onAdLoaded()メソッドにコードを追加するためにここに戻ります。

ステップ2: ネイティブバナー広告のレイアウトを作成する

次のステップでは、広告メタデータを抽出してプロパティを使用し、カスタマイズしたネイティブUIを構成します。レイアウトxmlでカスタムビューを作成するか、コード内にエレメントを追加できます。

アプリのネイティブ広告をデザインする際は、ネイティブ広告に関するガイドラインに従ってください。

アクティビティのレイアウトactivity_main.xmlで、ネイティブバナー広告のコンテナを追加します。コンテナはcom.facebook.ads.NativeAdLayoutでなければなりません。これは、FrameLayout上のラッパーで、ネイティブの広告レポート作成フローを広告の上に表示する追加機能があります。後ほど、onAdLoaded()メソッドで、このコンテナにネイティブ広告ビューを入れることが必要になります。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    ...
    <com.facebook.ads.NativeAdLayout
        android:id="@+id/native_banner_ad_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" />
    ...
</RelativeLayout>

ネイティブバナー広告用にカスタムレイアウトnative_banner_ad_unit.xmlを作成します。



以下は、ネイティブバナー広告のカスタムレイアウトの例です。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <RelativeLayout
            android:id="@+id/ad_choices_container"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="2dp" />

        <TextView
            android:id="@+id/native_ad_sponsored_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:ellipsize="end"
            android:lines="1"
            android:padding="2dp"
            android:textColor="@android:color/darker_gray"
            android:textSize="12sp" />
    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white">

        <com.facebook.ads.MediaView
            android:id="@+id/native_icon_view"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:gravity="center" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:orientation="vertical"
            android:paddingLeft="53dp"
            android:paddingRight="83dp">

            <TextView
                android:id="@+id/native_ad_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:textColor="@android:color/black"
                android:textSize="15sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/native_ad_social_context"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:textSize="12sp" />
        </LinearLayout>

        <Button
            android:id="@+id/native_ad_call_to_action"
            android:layout_width="80dp"
            android:layout_height="50dp"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:background="#4286F4"
            android:gravity="center"
            android:paddingLeft="3dp"
            android:paddingRight="3dp"
            android:textColor="@android:color/white"
            android:textSize="12sp"
            android:visibility="gone" />

    </RelativeLayout>
</LinearLayout>

ステップ3: 広告のメタデータを使ってレイアウトを設定する

シナリオ1: 読み込みの成功後すぐに広告を表示します。上記のonAdLoaded()メソッドを、Native Banner Ad'sプロパティを取得するように変更し、次のように表示します。

public class NativeBannerAdActivity extends Activity {

    private NativeAdLayout nativeAdLayout;
    private LinearLayout adView;
    private NativeBannerAd nativeBannerAd;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Instantiate a NativeBannerAd object. 
        // NOTE: the placement ID will eventually identify this as your App, you can ignore it for
        // now, while you are testing and replace it later when you have signed up.
        // While you are using this temporary code you will only get test ads and if you release
        // your code like this to the Google Play your users will not receive ads (you will get a no fill error).
        nativeBannerAd = new NativeBannerAd(this, "YOUR_PLACEMENT_ID");
        NativeAdListener nativeAdListener = new NativeAdListener() {
            ...
            @Override
            public void onAdLoaded(Ad ad) {
                // Race condition, load() called again before last ad was displayed
                if (nativeBannerAd == null || nativeBannerAd != ad) {
                    return;
                 }
                // Inflate Native Banner Ad into Container
                inflateAd(nativeBannerAd);
            }
            ...
        });
        // load the ad
        nativeBannerAd.loadAd(
                nativeBannerAd.buildLoadAdConfig()
                        .withAdListener(nativeAdListener)
                        .build());
    }

    private void inflateAd(NativeBannerAd nativeBannerAd) {
        // Unregister last ad
        nativeBannerAd.unregisterView();

        // Add the Ad view into the ad container.
        nativeAdLayout = findViewById(R.id.native_banner_ad_container);
        LayoutInflater inflater = LayoutInflater.from(NativeBannerAdActivity.this);
        // Inflate the Ad view.  The layout referenced is the one you created in the last step.
        adView = (LinearLayout) inflater.inflate(R.layout.native_banner_ad_layout, nativeAdLayout, false);
        nativeAdLayout.addView(adView);

        // Add the AdChoices icon
        RelativeLayout adChoicesContainer = adView.findViewById(R.id.ad_choices_container);
        AdOptionsView adOptionsView = new AdOptionsView(NativeBannerAdActivity.this, nativeBannerAd, nativeAdLayout);
        adChoicesContainer.removeAllViews();
        adChoicesContainer.addView(adOptionsView, 0);

        // Create native UI using the ad metadata.
        TextView nativeAdTitle = adView.findViewById(R.id.native_ad_title);
        TextView nativeAdSocialContext = adView.findViewById(R.id.native_ad_social_context);
        TextView sponsoredLabel = adView.findViewById(R.id.native_ad_sponsored_label);
        MediaView nativeAdIconView = adView.findViewById(R.id.native_icon_view);
        Button nativeAdCallToAction = adView.findViewById(R.id.native_ad_call_to_action);

        // Set the Text.
        nativeAdCallToAction.setText(nativeBannerAd.getAdCallToAction());
        nativeAdCallToAction.setVisibility(
                nativeBannerAd.hasCallToAction() ? View.VISIBLE : View.INVISIBLE);
        nativeAdTitle.setText(nativeBannerAd.getAdvertiserName());
        nativeAdSocialContext.setText(nativeBannerAd.getAdSocialContext());
        sponsoredLabel.setText(nativeBannerAd.getSponsoredTranslation());

        // Register the Title and CTA button to listen for clicks.
        List<View> clickableViews = new ArrayList<>();
        clickableViews.add(nativeAdTitle);
        clickableViews.add(nativeAdCallToAction);
        nativeBannerAd.registerViewForInteraction(adView, nativeAdIconView, clickableViews);
    }
}

インプレッションの記録とクリックの処理は、SDKによって自動的に行われます。NativeBannerAdインスタンスを使って広告のビューを登録し、有効にする必要があります。広告のすべてのエレメントをクリック可能にするには、以下を使用してそれを登録します。

registerViewForInteraction(View view, MediaView adIconView)

シナリオ2: 広告の読み込みが成功してから数秒後または数分後に広告を表示します。広告を表示する前に、その広告が無効になっていないか確認する必要があります。

読み込まれてからすぐに広告が表示されない場合、開発者は広告が無効になっていないか確認する必要があります。正常に読み込まれた後、広告は60分間有効になります。無効な広告を表示している場合は、支払いを受けられません。isAdInvalidated()を呼び出して広告を有効にする必要があります。

以下を参考にしてください。ただし、このコードは例に過ぎないので、そのままプロジェクトにコピーして使用しないでください。

public class NativeBannerAdActivity extends Activity {

    private NativeBannerAd nativeBannerAd;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Instantiate a NativeBannerAd object. 
        // NOTE: the placement ID will eventually identify this as your App, you can ignore it for
        // now, while you are testing and replace it later when you have signed up.
        // While you are using this temporary code you will only get test ads and if you release
        // your code like this to the Google Play your users will not receive ads (you will get a no fill error).
        nativeBannerAd = new NativeBannerAd(this, "YOUR_PLACEMENT_ID");
         NativeAdListener nativeAdListener = new NativeAdListener() {
            ...
        });
        // load the ad
        nativeBannerAd.loadAd(
                nativeBannerAd.buildLoadAdConfig()
                        .withAdListener(nativeAdListener)
                        .build());
    }

    private void showAdWithDelay() {
       /**
        * Here is an example for displaying the ad with delay;
        * Please do not copy the Handler into your project
       */
       // Handler handler = new Handler();
       handler.postDelayed(new Runnable() {
           public void run() {
             // Check if nativeBannerAd has been loaded successfully
               if(nativeBannerAd == null || !nativeBannerAd.isAdLoaded()) {
                   return;
               }
             // Check if ad is already expired or invalidated, and do not show ad if that is the case. You will not get paid to show an invalidated ad.
               if(nativeBannerAd.isAdInvalidated()) {
                   return;
               }
               inflateAd(nativeBannerAd); // Inflate Native Banner Ad into Container same as in previous code example
           }
       }, 1000 * 60 * 15); // Show the ad after 15 minutes
    }
}

クリック可能な領域の制御

快適な操作性とより良い結果を得るには、利用者が意図せずクリックしてしまわないよう広告のクリック可能な領域をコントロールすることをおすすめします。クリックできない余白の運用について詳しくは、Audience Network SDKポリシーをご覧ください。

registerViewForInteraction(View view, MediaView adIconView, List<View> clickableViews)を使用して、クリックできるビューのリストを登録すると、クリックできる対象を細かく設定できます。たとえば、上述の例のように広告タイトルとコールトゥアクションボタンのみをクリック可能にする場合は、次のように記述します。

@Override
public void onAdLoaded(Ad ad) {
  ...
  List<View> clickableViews = new ArrayList<>();
  clickableViews.add(nativeAdTitle);
  clickableViews.add(nativeAdCallToAction);
  nativeBannerAd.registerViewForInteraction(mAdView, nativeAdIconView, clickableViews);
  ...
}

ビューを再利用して、時間の経過と共に異なる広告を表示する場合は、同じビューをNativeBannerAdの別個のインスタンスとして登録する前に、必ずunregisterView()を呼び出してください。

コードを実行すると、ネイティブバナー広告が表示されます。

広告が読み込まれると、title、icon、callToActionの各プロパティに何らかの値が組み込まれます。他のプロパティの値は、nullや空である可能性もあります。そのような場合にも適切に対処できるようコーディングしてください。


表示する広告がない場合、onErrorが error.codeと共に呼び出されます。独自のカスタムレポートレイヤーやメディエーションレイヤーを使用する場合は、必要に応じてコードの値を確認して、表示する広告がない状況を検出できます。表示する広告がない場合、別のアドネットワークをフォールバックとして使用できますが、直後に広告のリクエストを再送信しないようにしてください。


受信した広告メタデータは、受信後30分以内はキャッシュに保存し、再利用できます。それ以降にメタデータを使用する場合、呼び出しを実行して新しい広告を読み込みます。

次のステップ

  • アプリにネイティブ広告を追加する方法については、ネイティブ広告テンプレートのガイドをご覧ください。

  • ネイティブ広告の使い方を示すコードサンプルを参考にしてください。SDKの一部に、AudienceNetwork/samplesフォルダ内にあるNativeBannerAdSampleを利用できます。プロジェクトをIDEにインポートして、デバイスまたはエミュレータで実行します。

その他の情報

スタートガイド

Audience Networkを開始するためのテクニカルガイド

コードサンプル

Audience Network広告の統合のサンプル

よくある質問

Audience Networkのよくある質問

ネイティブ広告テンプレート

ネイティブ広告の統合に使用できる、よりシンプルなアプローチ