アンカー アダプティブ バナー

アダプティブ バナーは次世代のレスポンシブ広告であり、デバイスごとに広告サイズを最適化して成果を最大化します。アダプティブ バナーでは、スマートバナーは固定の高さしかサポートされていませんでしたが、改良されたアダプティブ バナーでは、デベロッパーが広告の幅を指定し、それに基づいて最適な広告サイズを判断できます。

最適な広告サイズが選択されるように、アダプティブ バナーでは固定の高さではなく、固定のアスペクト比が使用されます。その結果、どのデバイスでも画面の一貫性の高い部分をバナー広告が占有するようになり、パフォーマンスが向上します。

アダプティブ バナーを使用する際は、特定のデバイスと幅において、常に同じサイズが返されることに注意してください。特定のデバイスでレイアウトをテストしたら、広告サイズが変化しないことを確認できます。ただし、バナー クリエイティブのサイズはデバイスによって異なる場合があります。そのため、広告の高さのばらつきに対応できるレイアウトにすることをおすすめします。まれに、アダプティブ サイズのフルサイズが表示されず、標準サイズのクリエイティブがこのスロットの中央に配置されることがあります。

アダプティブ バナーを使用するタイミング

アダプティブ バナーは、業界標準の 320×50 のバナーサイズおよび従来のスマートバナー フォーマットと簡単に差し替えられるように設計されています。

これらのバナーサイズは、アンカーバナーとしてよく使用され、通常は画面の上部または下部に固定されます。アダプティブ バナーのアスペクト比は、次のスクリーンショットからわかるように、標準の 320×50 の広告とほぼ同じになります。


320×50 のバナー

スマートバナー

アダプティブ バナー

アダプティブ バナーを使用すると、利用可能な画面サイズを最大限に活用できます。また、スマートバナーと比較すると、アダプティブ バナーは以下の点で優れています。

  • 画面の横幅いっぱいではなく、ご指定の幅で広告を表示できるため、 ディスプレイ カットアウトに対応できます。

  • サイズの異なるデバイスに対して一定の高さを使用するのではなく、特定のデバイスに最適な高さが選択され、デバイスの断片化の影響を軽減します。

実装上の注意

アプリにアダプティブ バナーを実装する場合は、以下の点に注意してください。

  • 広告を配置するビューの幅を把握しておく必要があります。デバイスの幅と、ディスプレイ カットアウト (該当する場合)を考慮する必要があります
  • 広告スロットに収まらない小さいサイズの広告サイズを配信する場合は、ポリシーに準拠するため、広告ビューの背景を不透明にしましょう。AdMob

  • Google Mobile Ads SDK の最新バージョンを使用していることを確認します。 メディエーションの場合は、最新バージョンのメディエーション アダプタを使用してください。

  • アダプティブ バナーのサイズは、利用可能な幅いっぱいにした場合に最も効果を発揮するように設計されています。ほとんどの場合、この値は使用中のデバイスの画面の横幅になります。該当するディスプレイ カットアウト、を考慮してください。

  • Google Mobile Ads SDK は、指定された幅で最適化された広告の高さを AdSize で返します。

  • アダプティブ バナーの広告サイズを取得するには、横向き、縦向き、実行時の現在の向きの 3 つの方法があります。詳しくは、以下の完全な API ドキュメントをご覧ください。

  • 特定のデバイスで特定の幅に対して返されるサイズは常に同じであるため、特定のデバイスでレイアウトをテストすれば、広告サイズは変化しないことを確認できます。

  • アンカーバナーの高さは、デバイスの高さの 15% 以下、50dp 以上にする必要があります。

クイック スタート

シンプルなアダプティブ アンカー バナーを実装する手順は以下のとおりです。

  1. an AdView オブジェクトを作成して、広告ユニット ID を設定します。

  2. アダプティブ バナー広告のサイズを取得します。取得したサイズはアダプティブ バナーのリクエストに使用されます。アダプティブ バナーの広告サイズを取得するには、以下をご確認ください。

    1. 使用するデバイスの幅を取得します。画面の全幅を使用しない場合は独自の幅を設定します。
    2. 広告サイズクラスで適切な静的メソッド(例: AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(context, width) )を使用して、選択した向きに合わせてアダプティブなAdSize オブジェクトを取得します。
    3. バナー広告ビューの広告サイズを設定します。これを行うには、AdView.setAdSize() を使用します。

    以下に完全な例を示します。

  3. 通常のバナー リクエストと同様に、広告リクエスト オブジェクトを作成し、用意済みの広告ビューでloadAd() メソッドを使用してバナーを読み込みます。

サンプルコード

画面の幅に合わせてアダプティブ バナーを読み込むアクティビティの例を次に示します。

Java

import android.graphics.Rect;
import android.os.Bundle;
import android.widget.FrameLayout;
import androidx.appcompat.app.AppCompatActivity
import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.AdSize;
import com.google.android.gms.ads.AdView;
import com.google.android.gms.ads.MobileAds;
import com.google.android.gms.ads.initialization.InitializationStatus;
import com.google.android.gms.ads.initialization.OnInitializationCompleteListener;

/** Main Activity. Inflates main activity xml and child fragments. */
public class MyActivity extends AppCompatActivity {

  private static final String AD_UNIT_ID = "ca-app-pub-3940256099942544/6300978111";
  private AdView adView;
  private FrameLayout adContainerView;
  private boolean initialLayoutComplete = false;

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

    // Initialize the Mobile Ads SDK.
    MobileAds.initialize(this, new OnInitializationCompleteListener() {
        @Override
        public void onInitializationComplete(InitializationStatus initializationStatus) { }
    });

    adContainerView = findViewById(R.id.ad_view_container);
    adView = new AdView(this);
    adContainerView.addView(adView);
    // Since we're loading the banner based on the adContainerView size, we need
    // to wait until this view is laid out before we can get the width.
    adContainerView.getViewTreeObserver().addOnGlobalLayoutListener(
        new ViewTreeObserver.OnGlobalLayoutListener() {
          @Override
          public void onGlobalLayout() {
            if (!initialLayoutComplete) {
              initialLayoutComplete = true;
              loadBanner();
            }
          }
        });
  }

  private void loadBanner() {
    adView.setAdUnitId(AD_UNIT_ID);
    
    AdSize adSize = getAdSize();
    adView.setAdSize(adSize);
    
    // Create an ad request. Check your logcat output for the hashed device ID
    // to get test ads on a physical device, e.g.,
    // "Use AdRequest.Builder.addTestDevice("ABCDE0123") to get test ads on this
    // device."
    AdRequest adRequest =
        new AdRequest.Builder().addTestDevice(AdRequest.DEVICE_ID_EMULATOR)
            .build();

    // Start loading the ad in the background.
    adView.loadAd(adRequest);
  }

  // Determine the screen width (less decorations) to use for the ad width.
  private AdSize getAdSize() {
    WindowMetrics windowMetrics = getWindowManager().getCurrentWindowMetrics();
    Rect bounds = windowMetrics.getBounds();

    float adWidthPixels = adContainerView.getWidth();

    // If the ad hasn't been laid out, default to the full screen width.
    if (adWidthPixels == 0f) {
      adWidthPixels = bounds.width();
    }

    float density = getResources().getDisplayMetrics().density;
    int adWidth = (int) (adWidthPixels / density);

    return AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, adWidth);
  }
}

Kotlin

import android.os.Bundle
import android.widget.FrameLayout
import androidx.appcompat.app.AppCompatActivity
import com.google.android.gms.ads.*

/** Main Activity. Inflates main activity xml and child fragments. */
class MyActivity : AppCompatActivity() {

  private lateinit var adView: AdView
  private lateinit var adContainerView: FrameLayout
  private var initialLayoutComplete = false

  // Determine the screen width (less decorations) to use for the ad width.
  private val adSize: AdSize
    get() {
      val windowMetrics = windowManager.currentWindowMetrics
      val bounds = windowMetrics.bounds

      var adWidthPixels = adContainerView.width.toFloat()

      // If the ad hasn't been laid out, default to the full screen width.
      if (adWidthPixels == 0f) {
        adWidthPixels = bounds.width().toFloat()
      }

      val density = resources.displayMetrics.density
      val adWidth = (adWidthPixels / density).toInt()

      return AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, adWidth)
    }

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_my)

    // Initialize the Mobile Ads SDK.
    MobileAds.initialize(this) {}

    adContainerView = findViewById(R.id.ad_view_container)
    adView = AdView(this)
    adContainerView.addView(adView)
    // Since we're loading the banner based on the adContainerView size, we need
    // to wait until this view is laid out before we can get the width.
    adContainerView.viewTreeObserver.addOnGlobalLayoutListener {
      if (!initialLayoutComplete) {
        initialLayoutComplete = true
        loadBanner()
      }
    }
  }

  private fun loadBanner() {
    adView.adUnitId = AD_UNIT_ID

    adView.adSize(adSize)
    
    // Create an ad request. Check your logcat output for the hashed device ID to
    // get test ads on a physical device, e.g.,
    // "Use AdRequest.Builder.addTestDevice("ABCDE0123") to get test ads on this device."
    val adRequest = AdRequest
        .Builder()
        .addTestDevice(AdRequest.DEVICE_ID_EMULATOR).build()

    // Start loading the ad in the background.
    adView.loadAd(adRequest)
  }

  companion object {
    // This is an ad unit ID for a test ad. Replace with your own banner ad unit ID.
    private val AD_UNIT_ID = "ca-app-pub-3940256099942544/6300978111"
  }
}

ここでは、関数 AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize を使用して、現在のインターフェースの向きで固定位置にあるバナーのサイズを取得しています。特定の向きでアンカーバナーをプリロードするには、AdSize.getPortraitAnchoredAdaptiveBannerAdSizeAdSize.getLandscapeAnchoredAdaptiveBannerAdSize の関連する関数を使用します。

GitHub の完全なサンプル

Java をダウンロード Kotlin をダウンロード