Verankerte adaptive Banner

Adaptive Banner sind die nächste Generation responsiver Anzeigen. Die Anzeigengröße wird an das jeweilige Gerät angepasst, um die Leistung zu optimieren. Anders als bei Smart-Bannern, die eine feste Höhe haben, können Entwickler bei adaptiven Bannern die Anzeigenbreite festlegen und die optimale Anzeigengröße ermitteln.

Für adaptive Banner werden feste Seitenverhältnisse anstelle von festen Höhen verwendet, um die optimale Anzeigengröße zu ermitteln. Banneranzeigen nehmen also unabhängig vom Gerät einen ähnlichen Teil des Bildschirms ein und ermöglichen so eine bessere Leistung.

Beachte, dass bei Verwendung von adaptiven Bannern immer eine feste Größe für ein bestimmtes Gerät und eine bestimmte Breite zurückgegeben wird. Nachdem Sie das Layout auf einem bestimmten Gerät getestet haben, können Sie sicher sein, dass sich die Anzeigengröße nicht mehr ändert. Die Größe des Banner-Creatives kann jedoch je nach Gerät variieren. Daher sollten Sie Varianten von Höhe der Anzeige berücksichtigen. In seltenen Fällen wird die Größe des adaptiven Creatives nicht gefüllt und das Creative der Standardgröße wird in dieser Anzeigenfläche zentriert.

Wann Sie adaptive Banner verwenden sollten

Adaptive Banner sollen die Anzeigengröße 320 × 50 sowie das Smart-Banner-Format ersetzen.

Diese Bannergrößen werden häufig als verankerte Banner verwendet, die normalerweise am oberen oder unteren Bildschirmrand fixiert werden. Bei solchen verankerten Bannern ähnelt das Seitenverhältnis bei adaptiven Bannern dem einer standardmäßigen 320-x-50-Anzeige, wie auf diesen Screenshots zu sehen ist:


Banner im Format 320 x 50
Smart-Banner
Adaptives Banner

Für ein adaptives Banner wird die verfügbare Bildschirmgröße besser genutzt. Außerdem ist ein adaptives Banner im Vergleich zu einem Smart-Banner besser geeignet, weil:

  • Anstelle einer Vollbildbreite wird eine bestimmte Breite verwendet. So können Sie Display-Aussparungenberücksichtigen.

  • Es wird eine optimale Höhe für das jeweilige Gerät ausgewählt, anstatt eine konstante Höhe für Geräte unterschiedlicher Größe zu haben. Dadurch werden die Auswirkungen der Gerätefragmentierung minimiert.

Implementierungshinweise

Wenn Sie adaptive Banner in Ihrer App implementieren, sollten Sie auf folgende Punkte achten:

  • Sie müssen die Breite der Ansicht kennen, in der die Anzeige platziert wird, und dies muss die Breite des Geräts sowieAussparungen im Display berücksichtigen.
  • Möglicherweise müssen Sie Werbebuchungen aktualisieren oder neue erstellen, um mit adaptiven Größen arbeiten zu können. Weitere Informationen

  • Achten Sie darauf, dass der Hintergrund der Anzeigenansicht undurchsichtig ist, damit er denAd Manager -Richtlinien entspricht, wenn kleinere Anzeigengrößen nicht auf der Anzeigenfläche gefüllt werden.

  • Sie sollten die neueste Version des Google Mobile Ads SDKs verwenden. Verwenden Sie für die Vermittlung die neuesten Version der Adapter für die Version.

  • Die adaptiven Bannergrößen sind auf die volle Breite ausgelegt. In den meisten Fällen entspricht dies der vollen Breite des Bildschirms des verwendeten Geräts. Berücksichtigen Sie dabei die geltendenDisplay-Aussparungen

  • Das Google Mobile Ads SDK gibt eine optimierte Anzeigenhöhe für die angegebene Breite in einem AdSize zurück.

  • Es gibt drei Methoden zum Abrufen einer Anzeigengröße für adaptive Banner: eine für das Querformat, eine für das Hochformat und eine für die aktuelle Ausrichtung zum Zeitpunkt der Ausführung. Weitere Informationen finden Sie in der vollständigen API-Dokumentation unten.

  • Die Größe, die für eine bestimmte Breite auf einem bestimmten Gerät zurückgegeben wird, bleibt immer gleich. Sobald Sie Ihr Layout auf einem bestimmten Gerät getestet haben, können Sie sicher sein, dass sich die Anzeigengröße nicht ändert.

  • Die Höhe des verankerten Banners ist nie größer als 15% der Höhe des Geräts und immer kleiner als 50dp.

Schnelleinstieg

Führen Sie die folgenden Schritte aus, um ein einfaches adaptives Ankerbanner zu implementieren.

  1. Erstellen Sie ein an AdManagerAdView Objekt und legen Sie die Anzeigenblock-ID fest.

  2. Anzeigengröße für adaptive Banner erhalten Die Größe wird verwendet, um das adaptive Banner anzufordern. So erhalten Sie die adaptive Anzeigengröße:

    1. Bestimme die Breite des verwendeten Geräts oder lege eine eigene Breite fest, wenn du nicht die volle Breite des Bildschirms verwenden möchtest.
    2. Verwende die entsprechenden statischen Methoden in der Klasse „Anzeigengröße“, wie AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(context, width) , um ein adaptivesAdSize -Objekt für die ausgewählte Ausrichtung abzurufen.
    3. Legt die Anzeigengröße in der Ansicht für Banneranzeigen fest – mit AdManagerAdView.setAdSizes().

    Hinweis: Google kann Reservierungsanzeigen ausliefern, die kleiner als die adaptive Größe sind. Weitere Informationen Die zurückgegebene Anzeige wird in der Anzeigenansicht zentriert. Ein vollständiges Beispiel finden Sie unten.

  3. Erstellen Sie ein Anzeigenanfrageobjekt und laden Sie das Banner mit der MethodeloadAd() wie bei einer normalen Banneranfrage.

Beispielcode

Hier ein Beispiel für eine Aktivität, bei der ein adaptives Banner geladen wird, das der Bildschirmbreite entspricht:

Java

import android.graphics.Rect;
import android.os.Bundle;
import android.widget.FrameLayout;
import androidx.appcompat.app.AppCompatActivity
import com.google.android.gms.ads.admanager.AdManagerAdRequest;
import com.google.android.gms.ads.AdSize;
import com.google.android.gms.ads.admanager.AdManagerAdView;
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 = "/6499/example/banner";
  private AdManagerAdView 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);

    adContainerView = findViewById(R.id.ad_view_container);
    adView = new AdManagerAdView(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 adaptiveSize = getAdSize();
    adView.setAdSizes(adaptiveSize, AdSize.BANNER);
    
    // 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."
    AdManagerAdRequest adRequest =
        new AdManagerAdRequest.Builder().addTestDevice(AdManagerAdRequest.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: AdManagerAdView
  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 = AdManagerAdView(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.adSizes(adSize, AdSize.BANNER)
    
    // 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 = AdManagerAdRequest
        .Builder()
        .addTestDevice(AdManagerAdRequest.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 = "/6499/example/banner"
  }
}

Hier wird die Funktion AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize verwendet, um die Größe eines Banners an einer verankerten Position für die aktuelle Ausrichtungsausrichtung abzurufen. Wenn du ein verankertes Banner in einer bestimmten Ausrichtung vorab laden möchtest, verwende die entsprechende Funktion von AdSize.getPortraitAnchoredAdaptiveBannerAdSize und AdSize.getLandscapeAnchoredAdaptiveBannerAdSize.

Vollständiges Beispiel auf GitHub

Java Kotlin