Androidでネイティブ広告テンプレートを使用する

ネイティブ広告の統合に手間をかけたくなければ、カスタムAudience Networkネイティブ広告テンプレートをご利用ください。ネイティブ広告のサイズ、色、フォントを、アプリの見た目や使用感に合わせてカスタマイズできます。

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

このガイドを効果的に使うには、ネイティブ広告ネイティブバナー広告の実装に熟知している必要があります。

ステップ1: テンプレートの実装

ステップ2: さらなるカスタマイズ

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をインポートするには、アクティビティクラスの先頭に以下のコードを追加します。

import com.facebook.ads.*;

ネイティブ広告の実装。

private NativeAd nativeAd;

public class NativeAdActivity extends Activity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    ...

    // Instantiate an 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() {
        ...
    };
    
    // Initiate a request to load an ad.
    nativeAd.loadAd(
            nativeAd.buildLoadAdConfig()
                    .withAdListener(nativeAdListener)
                    .withMediaCacheFlag(NativeAdBase.MediaCacheFlag.ALL)
                    .build());
  }
}        

広告の読み込み後にすぐに表示する場合は、AdListeneronAdLoaded()メソッド内にカスタムテンプレートをレンダリングし、コンテナに追加します。

private NativeAd nativeAd;
...
  NativeAdListener nativeAdListener = new NativeAdListener() {
    ...
    @Override
    public void onAdLoaded(Ad ad) {
      // Render the Native Ad Template
      View adView = NativeAdView.render(MainActivity.this, nativeAd);
      LinearLayout nativeAdContainer = (LinearLayout) findViewById(R.id.native_ad_container);
      // Add the Native Ad View to your ad container. 
      // The recommended dimensions for the ad container are:
      // Width: 280dp - 500dp
      // Height: 250dp - 500dp
      // The template, however, will adapt to the supplied dimensions.
      nativeAdContainer.addView(adView, new LayoutParams(MATCH_PARENT, 800));  
    }
   ...
  }

広告のloaded後にすぐに広告を表示しない場合、広告が無効にされたかどうかをチェックするのは、開発者の責任です。広告が正常に読み込まれたなら、その広告は60 mins有効になります。invalidated広告を表示している場合、paidは受け取れません。広告を時間をおいて表示するシナリオのサンプルコードをチェックしてください。

コードを実行すると、次のものが表示されます。




ネイティブバナー広告の実装。

private NativeBannerAd mNativeBannerAd;
...

  @Override
  public void onCreate(Bundle savedInstanceState) {
    ...

    // Instantiate an 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).
    mNativeBannerAd = new NativeBannerAd(this, "YOUR_PLACEMENT_ID");
    NativeAdListener nativeAdListener = new NativeAdListener() {
        ...
    };
    
    // Initiate a request to load an ad.
    mNativeBannerAd.loadAd(
            mNativeBannerAd.buildLoadAdConfig()
                    .withAdListener(nativeAdListener)
                    .build());
  }
}        

広告の読み込み後にすぐに表示する場合は、AdListeneronAdLoaded()メソッド内にカスタムテンプレートをレンダリングし、コンテナに追加します。

@Override
public void onAdLoaded(Ad ad) {
  // Render the Native Banner Ad Template
  View adView = NativeBannerAdView.render(MainActivity.this, mNativeBannerAd, NativeBannerAdView.Type.HEIGHT_100);
  LinearLayout nativeBannerAdContainer = (LinearLayout) findViewById(R.id.native_banner_ad_container);
  // Add the Native Banner Ad View to your ad container
  nativeBannerAdContainer.addView(adView);  
}

広告のloaded後にすぐに広告を表示しない場合、広告が無効にされたかどうかをチェックするのは、開発者の責任です。広告が正常に読み込まれたなら、その広告は60 mins有効になります。invalidated広告を表示している場合、paidは受け取れません。広告を時間をおいて表示するシナリオのサンプルコードをチェックしてください。

コードを実行すると、次のものが表示されます。



カスタムネイティブバナー広告フォーマットには3つのテンプレートがあります。

テンプレートビューのタイプ 高さ 含まれる属性

NativeBannerAdView.Type .HEIGHT_50

50dp

自由に設定できる幅

アイコン、タイトル、コンテキスト、CTAボタン

NativeBannerAdView.Type .HEIGHT_100

100dp

自由に設定できる幅

アイコン、タイトル、コンテキスト、CTAボタン

NativeBannerAdView.Type .HEIGHT_120

120dp

自由に設定できる幅

アイコン、タイトル、コンテキスト、説明、CTAボタン

ステップ2: さらなるカスタマイズ

ネイティブのカスタムテンプレートを使用すると、次の要素をカスタマイズできます。

  • 高さ
  • 背景色
  • タイトルの色
  • タイトルのフォント
  • 説明の色
  • 説明のフォント
  • ボタンの色
  • ボタンタイトルの色
  • ボタンタイトルのフォント
  • ボタンボーダーの色

特定の要素をカスタマイズする場合は、アプリのレイアウトやテーマに合わせたデザインにするのがおすすめです。

これらの要素をレンダリングするには、属性オブジェクトを作成し、読み込み済みのネイティブ広告またはネイティブバナー広告を入力する必要があります。

16進色を使用する場合にはColor.parseColor()を使用します。

ネイティブ広告の例。

NativeAdViewAttributesオブジェクトをビルドし、NativeAdView.render()の引数として入力します。

@Override
public void onAdLoaded(Ad ad) {
  // Set the Native Ad attributes
  NativeAdViewAttributes viewAttributes = new NativeAdViewAttributes()
    .setBackgroundColor(Color.BLACK)
    .setTitleTextColor(Color.WHITE)
    .setDescriptionTextColor(Color.LTGRAY)
    .setButtonColor(Color.WHITE)
    .setButtonTextColor(Color.BLACK);
  
  View adView = NativeAdView.render(MainActivity.this, nativeAd, viewAttributes);

  LinearLayout nativeAdContainer = (LinearLayout) findViewById(R.id.native_ad_container);
  // Add the Native Ad View to your ad container
  nativeAdContainer.addView(adView, new LayoutParams(MATCH_PARENT, 800));
}

上記のコードによって次のような広告がレンダリングされます。




ネイティブバナー広告の例。

NativeAdViewAttributesオブジェクトをビルドし、NativeBannerAdView.render()の引数として入力します。

@Override
public void onAdLoaded(Ad ad) {
  // Set the NativeAd attributes
  NativeAdViewAttributes viewAttributes = new NativeAdViewAttributes()
    .setBackgroundColor(Color.BLACK)
    .setTitleTextColor(Color.WHITE)
    .setDescriptionTextColor(Color.LTGRAY)
    .setButtonColor(Color.WHITE)
    .setButtonTextColor(Color.BLACK);   
  
  View adView = NativeBannerAdView.render(MainActivity.this, nativeAd, NativeBannerAdView.Type.HEIGHT_100, viewAttributes);

  LinearLayout nativeBannerAdContainer = (LinearLayout) findViewById(R.id.native_banner_ad_container);
  // Add the Native Banner Ad View to your ad container
  nativeBannerAdContainer.addView(adView);  
}

上記のコードによって次のような広告がレンダリングされます。

次のステップ