次世代のレスポンシブ広告であるアダプティブ バナーは、デバイスごとに広告サイズを最適化して広告の効果を高めます。アダプティブ バナーはスマートバナーが改良されたもので、スマートバナーの広告の高さが固定されているのに対し、アダプティブ バナーではお客様が指定する広告の幅に応じて、自動的に最適な広告サイズが決定されます。
最適な広告サイズが選択されるように、アダプティブ バナーでは固定された高さではなく、固定されたアスペクト比が使用されます。これにより、デバイスが異なってもバナー広告は一貫して画面のほぼ同じ分量のスペースを占めることになり、広告の掲載結果の向上につながります。
アダプティブ バナーを使用する場合、特定のデバイスと幅に対しては常に一定のサイズが返されます。テスト時にデバイスで確認したレイアウトが後で変化することはありません。ただし、バナー クリエイティブのサイズはデバイスによって異なります。したがって、さまざまな広告の高さに対応できるようレイアウトを調整することをおすすめします。まれなケースとして、最適化されたサイズがスロットに収まらない場合は、標準サイズのクリエイティブがスロットの中央に配置されることもあります。
アダプティブ バナーの用途
アダプティブ バナーは、業界標準の 320×50 のバナーおよびスマートバナーとの完全互換性を備えています。
これらのサイズのバナーは一般に、画面の上部か下部に固定されるアンカーバナーとして使われます。こうしたアンカーバナーの場合、アダプティブ バナーを使ったアスペクト比は、標準型の 320×50 の広告とほぼ同様になります(以下のスクリーンショットを参照)。
320×50 バナー |
スマートバナー |
アダプティブ バナー |
アダプティブ バナーを使用すると、画面スペースをより有効に活用できます。また、スマートバナーと比較して、アダプティブ バナーには次のようなメリットがあります。
画面の幅全体ではなく指定した幅を使用しているため、 ディスプレイ カットアウトを考慮することができます。
サイズの異なるデバイスに対して一定の高さを使用するのではなく、デバイスごとに最適な高さが選択されるので、デバイスの細分化の影響を最小限に抑えることができます。
実装上の注意
アプリにアダプティブ バナーを実装する際には、次の点に注意してください。
- 広告が配置されるビューの幅を確認してください。 デバイスの幅に加えて、 ディスプレイ カットアウト (該当する場合)も考慮に入れる必要があります。
広告スロットよりも小さなサイズの広告を配信する際は、広告ビューの背景を不透明にしてAdMob ポリシーを遵守するようにしてください。
使用する Google Mobile Ads SDK が最新バージョンであることを確認します。 メディエーションを利用する場合は、最新バージョンのメディエーション アダプタを使用してください。
アダプティブ バナーは、利用できるスペースの横幅いっぱいに表示すると最も効果を発揮するように設計されています。ほとんどの場合は、デバイスの画面の全幅を使用できます。必ず、該当するディスプレイ カットアウトを考慮してください。
Google Mobile Ads SDK は、指定された幅に対して、
AdSize
で最適化された広告の高さを返します。アダプティブ バナーの広告サイズを取得する方法は 3 つあります。1 つは横向き用、もう 1 つは実行時の向きです。詳しくは、下記の API のドキュメントをご覧ください。
同じデバイス、同じ幅に対しては常に同じ広告サイズが返されるため、一度レイアウトをテストすれば、その後の確認は不要になります。そのデバイスでは同じレイアウトが維持されます。
アンカーバナーの高さは、デバイスの高さの 15% 以下、50dp 以上になります。
クイック スタート
シンプルなアダプティブ アンカー バナーを実装する手順は以下のとおりです。
オブジェクトを作成し、広告ユニット ID を設定します。 an
AdView
アダプティブ バナーの広告サイズを取得します。取得したサイズは、アダプティブ バナーのリクエストに使用します。アダプティブ バナーの広告サイズを取得するには、次の手順を行ってください。
- 使用中のデバイスの幅を取得します。デバイス画面の幅全体を使用しない場合は、任意の幅を設定します。
- 広告サイズクラスの適切な静的メソッド(
AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(context, width)
など)を使用して、選択した向きのアダプティブ バナーのAdSize
を取得します。 - バナー広告ビューで広告サイズを設定します。には
AdView.setAdSize()
を使用します。AdManagerAdView.setAdSizes()
を使用して
詳細な例を以下に示します。
通常のバナー リクエストと同様に、広告リクエスト オブジェクトを作成し、用意した広告ビューの
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.getPortraitAnchoredAdaptiveBannerAdSize
と AdSize.getLandscapeAnchoredAdaptiveBannerAdSize
の適切な関数を使用してください。
GitHub のサンプルコードの全文
Java をダウンロード | Kotlin をダウンロード |