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

ネイティブ広告APIを使用すると、アプリ内に表示する広告のエクスペリエンスをカスタマイズできます。ネイティブ広告APIを使用すると、そのまま表示できる広告を受信するのではなく、タイトル、画像、コールトゥアクションなど、さまざまな広告プロパティのセットを受信することになります。それらを使用して、広告が表示されるカスタムビューを構成する必要があります。

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

ネイティブ広告のステップ

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

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

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

ステップ4: MediaViewを使用する

ステップ5: 自動キャッシュなしで広告を読み込む

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

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

import com.facebook.ads.*;

次に、NativeAdオブジェクトをインスタンス化し、NativeAdListenerを作成し、その広告リスナーでloadAd()を呼び出します。

private final String TAG = "NativeAdActivity".getClass().getSimpleName();
private NativeAd nativeAd;

private void loadNativeAd() {
    // Instantiate a NativeAd 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).
    nativeAd = new NativeAd(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!");
        }
    };

    // Request an ad
    nativeAd.loadAd(
            nativeAd.buildLoadAdConfig()
                    .withAdListener(nativeAdListener)
                    .build());
}

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

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

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

アクティビティのレイアウトactivity_main.xmlで、Native Adのコンテナを追加します。コンテナはcom.facebook.ads.NativeAdLayoutにします。これは、FrameLayout上のラッパーで、ネイティブの広告レポート作成フローを広告にレンダリングする追加機能があります。

<?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"
    android:gravity="center_horizontal"
    android:paddingTop="50dp">
    ...
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="50dp">

        <com.facebook.ads.NativeAdLayout
             android:id="@+id/native_ad_container"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:orientation="vertical" />
     </ScrollView>
    ...
</RelativeLayout>

ネイティブ広告のカスタムレイアウトnative_ad_layout.xmlを作成します。

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ad_unit"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    android:orientation="vertical"
    android:paddingLeft="10dp"
    android:paddingRight="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingBottom="10dp"
        android:paddingTop="10dp">

        <com.facebook.ads.MediaView
            android:id="@+id/native_ad_icon"
            android:layout_width="35dp"
            android:layout_height="35dp" />

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

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

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

    </LinearLayout>

    <LinearLayout
        android:id="@+id/ad_choices_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="end"
        android:orientation="horizontal" />

    </LinearLayout>

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

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

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

            <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:textColor="@android:color/darker_gray"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/native_ad_body"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:gravity="center_vertical"
                android:lines="2"
                android:textColor="@android:color/black"
                android:textSize="12sp" />

        </LinearLayout>

        <Button
            android:id="@+id/native_ad_call_to_action"
            android:layout_width="100dp"
            android:layout_height="30dp"
            android:layout_gravity="center_vertical"
            android:layout_weight="1"
            android:background="#4286F4"
            android:paddingLeft="3dp"
            android:paddingRight="3dp"
            android:textColor="@android:color/white"
            android:textSize="12sp"
            android:visibility="gone" />

    </LinearLayout>

</LinearLayout>

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

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

private NativeAdLayout nativeAdLayout;
private LinearLayout adView;
private NativeAd nativeAd;

private void loadNativeAd() {
    // Instantiate a NativeAd 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).
    nativeAd = new NativeAd(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 (nativeAd == null || nativeAd != ad) {
                return;
            }
            // Inflate Native Ad into Container
            inflateAd(nativeAd);
        }
        ...
    };

    // Request an ad
    nativeAd.loadAd(
            nativeAd.buildLoadAdConfig()
                    .withAdListener(nativeAdListener)
                    .build());
}

private void inflateAd(NativeAd nativeAd) {

    nativeAd.unregisterView();

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

    // Add the AdOptionsView
    LinearLayout adChoicesContainer = findViewById(R.id.ad_choices_container);
    AdOptionsView adOptionsView = new AdOptionsView(NativeAdActivity.this, nativeAd, nativeAdLayout);
    adChoicesContainer.removeAllViews();
    adChoicesContainer.addView(adOptionsView, 0);

    // Create native UI using the ad metadata.
    MediaView nativeAdIcon = adView.findViewById(R.id.native_ad_icon);
    TextView nativeAdTitle = adView.findViewById(R.id.native_ad_title);
    MediaView nativeAdMedia = adView.findViewById(R.id.native_ad_media);
    TextView nativeAdSocialContext = adView.findViewById(R.id.native_ad_social_context);
    TextView nativeAdBody = adView.findViewById(R.id.native_ad_body);
    TextView sponsoredLabel = adView.findViewById(R.id.native_ad_sponsored_label);
    Button nativeAdCallToAction = adView.findViewById(R.id.native_ad_call_to_action);

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

    // Create a list of clickable views
    List<View> clickableViews = new ArrayList<>();
    clickableViews.add(nativeAdTitle);
    clickableViews.add(nativeAdCallToAction);

    // Register the Title and CTA button to listen for clicks.
    nativeAd.registerViewForInteraction(
            adView, nativeAdMedia, nativeAdIcon, clickableViews);
}

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

registerViewForInteraction(View view, MediaView adMediaView, MediaView adIconView)

registerViewForInteractionをNativeAdsで使用すると、SDKはその呼び出しがメインスレッドで実行されていることをチェックして、競合状態を回避します。このチェックには、Preconditions.checkIsOnMainThread()が使用されます。自分の実装がこの基準を満たしていることを確認してください。バックグランドスレッドからregisterViewForInteractionを呼び出そうとすると、アプリがクラッシュします。

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

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

private NativeAd nativeAd;

private void loadNativeAd() {
    // Instantiate a NativeAd 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).
    nativeAd = new NativeAd(this, "YOUR_PLACEMENT_ID");

    NativeAdListener nativeAdListener = new NativeAdListener() {
        ...
    };

    // Request an ad
    nativeAd.loadAd(
            nativeAd.buildLoadAdConfig()
                    .withAdListener(nativeAdListener)
                    .build());

    // Here is just an example for displaying the ad with delay
    // Please call this method at appropriate timing in your project
    showNativeAdWithDelay();
}

private void showNativeAdWithDelay() {
    /**
     * 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 nativeAd has been loaded successfully
            if(nativeAd == null || !nativeAd.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(nativeAd.isAdInvalidated()) {
                return;
            }
            inflateAd(nativeAd); // Inflate NativeAd into a container, same as in previous code examples
        }
    }, 1000 * 60 * 15); // Show the ad after 15 minutes
}

クリック可能な領域をコントロールする

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

@Override
public void onAdLoaded(Ad ad) {
    ...
    // Create a list of clickable views
    List<View> clickableViews = new ArrayList<>();
    clickableViews.add(nativeAdTitle);
    clickableViews.add(nativeAdCallToAction);

    // Register the Title and CTA button to listen for clicks.
    nativeAd.registerViewForInteraction(
            adView, nativeAdMedia, nativeAdIcon, clickableViews);
    ...
}

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

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

ステップ4: MediaViewを使用する

ネイティブ広告カバー画像を表示する場合、Meta Audience Network MediaViewを必ず使用しなければなりません。これは、画像アセットと動画アセットを両方とも表示できます。ネイティブ動画広告ユニットのデザインガイドラインは、こちらで確認できます。

デフォルトでは、ネイティブ広告の読み込み時に画像と動画のアセットはすべて事前キャッシュされます。これにより、nativeAdの読み込みが終わったらすぐにMediaViewが動画を再生できます。

private void loadNativeAd() {
    ...
    nativeAd.loadAd();
}

ネイティブ広告読み込み時にNativeAd.MediaCacheFlag.ALLを明示的に指定することもできます。

private void loadNativeAd() {
    ...
    nativeAd.loadAd(
            nativeAd.buildLoadAdConfig()
                    .withMediaCacheFlag(NativeAdBase.MediaCacheFlag.ALL)
                    .build());
}

Audience Networkはネイティブ広告で2つのキャッシュオプションをサポートしています。その定義は、NativeAd.MediaCacheFlag enumでします。

ステップ5: 自動キャッシュなしで広告を読み込む

• いかなる場合もメディアキャッシングはデフォルトでオンのままにしておくことを強く推奨します。ただし、MediaCacheFlag.NONEをloadAdメソッドで使用することにより、このデフォルトをオーバーライドすることができます。デフォルトのメディアキャッシュ設定をオーバーライドするかどうかの決定は、注意深く行ってください。

private final String TAG = NativeAdActivity.class.getSimpleName();
private NativeAd nativeAd;

private void loadNativeAd() {
    // Instantiate a NativeAd 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).
    nativeAd = new NativeAd(this, "YOUR_PLACEMENT_ID");
    NativeAdListener nativeAdListener = new NativeAdListener() {
        ...
    };

    // Request an ad without auto cache
    nativeAd.loadAd(
            nativeAd.buildLoadAdConfig()
                    .withAdListener(nativeAdListener)
                    .withMediaCacheFlag(NativeAdBase.MediaCacheFlag.NONE)
                    .build());
}

• 広告でonAdLoadedを呼び出せたら、手動でdownloadMediaメソッドを呼び出して、適切なときにネイティブ広告のすべてのメディアのダウンロードを開始できます。

@Override
public void onAdLoaded(Ad ad) {
    if (nativeAd == null || nativeAd != ad) {
        return;
    }

    nativeAd.downloadMedia();
}

• 最後に、registerViewForInteractionメソッドを呼び出し、onMediaDownloadedコールバックでメディアの読み込みが終わたら広告を表示します。

@Override
public void onMediaDownloaded(Ad ad) {
    if (nativeAd == null || nativeAd != ad) {
        return;
    }

    inflateAd(nativeAd); // Inflate NativeAd into a container, same as in previous code examples
}

自動キャッシュなしで広告を読み込み、手動でdownloadMedia を呼び出してダウンロードを開始しなかった場合、メディアのダウンロードが始まるのは、registerViewForInteractionが呼び出されたときです。インプレッションの対象となるには、すべてのメディアが読み込まれ表示される必要があります。

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

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