次世代のレスポンシブ広告であるアダプティブ バナーは、デバイスごとに広告サイズを最適化して広告の効果を高めます。アダプティブ バナーはスマートバナーが改良されたもので、スマートバナーの広告の高さが固定されているのに対し、アダプティブ バナーではデベロッパーが指定する広告の幅に応じて、自動的に最適な広告サイズが決定されます。
最適な広告サイズが選択されるように、アダプティブ バナーでは固定された高さではなく、固定されたアスペクト比が使用されます。これにより、デバイスが異なってもバナー広告は一貫して画面のほぼ同じ分量のスペースを占めることになり、広告の掲載結果の向上につながります。
アダプティブ バナーでは、指定されたデバイスと幅が同じであれば、常に同じサイズの広告が返されます。テスト時にデバイスで確認したレイアウトが後で変化することはありません。ただし、デバイスが異なれば、バナー クリエイティブのサイズは変化する可能性があります。したがって、レイアウトを検討する際には、いくつかの広告の高さに対応できるようにすることをおすすめします。 まれなケースとして、最適化されたサイズがスロットに収まらない場合は、標準サイズのクリエイティブがスロットの中央に配置されることもあります。
アダプティブ バナーの用途
アダプティブ バナーは、業界標準の 320×50 のバナーおよびスマートバナーとの完全互換性を備えています。
これらのサイズのバナーは、一般に画面の上部または下部に固定して表示されるアンカー型のバナーとして使用されます。アンカー型のアダプティブ バナーのアスペクト比は、標準型の 320×50 の広告とほぼ同様になります（以下のスクリーンショットをご覧ください）。
 320×50 バナー |
 スマートバナー |
 アダプティブ バナー |
アダプティブ バナーを使用すると、画面スペースをより有効に活用できます。また、スマートバナーと比較して、アダプティブ バナーには以下のようなメリットがあります。
画面の横幅いっぱいを使用するのではなく、指定された幅で広告を表示できるため、ディスプレイ カットアウトに対応できます。
サイズの異なるデバイスに対して一定の高さを使用するのではなく、デバイスごとに最適な高さが選択されるので、デバイスの細分化の影響を最小限に抑えることができます。
実装に関する注意事項
アプリにアダプティブ バナーを実装する際には、次の点に注意してください。
- 使用する Google Mobile Ads SDK が最新バージョンであることを確認します。メディエーションでは、最新バージョンのメディエーション アダプタを使用してください。
アダプティブ バナーは、利用できるスペースの横幅いっぱいに表示すると最も効果を発揮するように設計されています。ほとんどの場合は、デバイスの画面の全幅を使用できます。ディスプレイ カットアウト がある場合は、そのスペースも考慮に入れてください。
Google Mobile Ads SDK は、指定された幅に対する最適な高さを
AdSizeで返します。アダプティブ バナーの広告サイズを取得するメソッドは、デバイスの向きに応じて、横向き、縦向き、実行時の向きの 3 種類があります。詳しくは、後述の API の説明をご覧ください。
同じデバイス、同じ幅に対しては常に同じ広告サイズが返されるため、一度レイアウトをテストすれば、その後の確認は不要になります（そのデバイスでは同じレイアウトが維持されます）。
アンカー型のバナーの高さは、デバイスの高さの 15% 以下、50 dp 以上になります。
クイックスタート
シンプルなアンカー型のアダプティブ バナーを実装する手順は以下のとおりです。
an
AdViewオブジェクトを作成し、広告ユニット ID を設定します。アダプティブ バナーの広告サイズを取得します。取得したサイズは、アダプティブ バナーのリクエストに使用します。アダプティブ バナーの広告サイズを取得するには、次の手順を行ってください。
- 広告を掲載するデバイスの幅を取得します。デバイス画面の幅全体を使用しない場合は、任意の幅を設定します。
- 広告サイズクラスの適切な静的メソッド（
AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(context, width)など）を使用して、指定した向きのアダプティブ バナーのAdSizeオブジェクトを取得します。 - バナー広告ビューの広告サイズを設定します。この設定を行うには、
AdView.setAdSize()を使用します。
サンプルコード全体を以下でご確認いただけます。
通常のバナー リクエストと同様に、広告リクエスト オブジェクトを作成し、用意した広告ビューの
loadAd()メソッドを使用してバナーを読み込みます。
サンプルコード
以下のサンプルコードは、画面の幅にフィットするアダプティブ バナーを 読み込むアクティビティを示しています。
Java
import android.content.res.Configuration;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.DisplayMetrics;
import android.view.Display;
import android.widget.FrameLayout;
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;
/** Main Activity. Inflates main activity xml and child fragments. */
public class MyActivity extends AppCompatActivity {
private FrameLayout adContainerView;
private AdView adView;
@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);
// Step 1 - Create an AdView and set the ad unit ID on it.
adView = new AdView(this);
adView.setAdUnitId(getString(R.string.adaptive_banner_ad_unit_id));
adContainerView.addView(adView);
loadBanner();
}
private void loadBanner() {
// 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();
AdSize adSize = getAdSize();
// Step 4 - Set the adaptive ad size on the ad view.
adView.setAdSize(adSize);
// Step 5 - Start loading the ad in the background.
adView.loadAd(adRequest);
}
private AdSize getAdSize() {
// Step 2 - Determine the screen width (less decorations) to use for the ad width.
Display display = getWindowManager().getDefaultDisplay();
DisplayMetrics outMetrics = new DisplayMetrics();
display.getMetrics(outMetrics);
float widthPixels = outMetrics.widthPixels;
float density = outMetrics.density;
int adWidth = (int) (widthPixels / density);
// Step 3 - Get adaptive ad size and return for setting on the ad view.
return AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, adWidth);
}
}
Kotlin
import android.os.Bundle
import android.util.DisplayMetrics
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 kotlinx.android.synthetic.main.activity_my.*
/** Main Activity. Inflates main activity xml and child fragments. */
class MyActivity : AppCompatActivity() {
private lateinit var adView: AdView
// Determine the screen width (less decorations) to use for the ad width.
// If the ad hasn't been laid out, default to the full screen width.
private val adSize: AdSize
get() {
val display = windowManager.defaultDisplay
val outMetrics = DisplayMetrics()
display.getMetrics(outMetrics)
val density = outMetrics.density
var adWidthPixels = ad_view_container.width.toFloat()
if (adWidthPixels == 0f) {
adWidthPixels = outMetrics.widthPixels.toFloat()
}
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) { }
adView = AdView(this)
ad_view_container.addView(adView)
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~3347511713"
}
}
ここでは AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize 関数を使用して、現在の画面の向きで表示するアンカー型のバナーのサイズを取得しています。特定の向きのバナーをプリロードするには、AdSize.getPortraitAnchoredAdaptiveBannerAdSize および AdSize.getLandscapeAnchoredAdaptiveBannerAdSize の適切な関数を使用してください。
GitHub の Adaptive Banner のサンプル
| Java | Kotlin |