Bannières adaptatives ancrées

Les bannières adaptatives constituent la nouvelle génération d'annonces responsives. Elles maximisent les performances en optimisant la taille des annonces pour chaque appareil. Amélioration des bannières intelligentes, qui n'acceptaient que des hauteurs fixes, les bannières adaptatives permettent aux développeurs de spécifier la largeur de l'annonce et de l'utiliser pour déterminer la taille optimale.

Pour choisir la meilleure taille d'annonce, les bannières adaptatives utilisent des formats fixes plutôt que des hauteurs fixes. Vous obtiendrez ainsi des bannières qui occupent une partie plus cohérente de l'écran sur tous les appareils et offrent des opportunités d'améliorer les performances.

Lorsque vous utilisez des bannières adaptatives, notez qu'elles renvoient toujours une taille constante pour un appareil et une largeur donnés. Une fois que vous avez testé votre mise en page sur un appareil donné, vous pouvez être sûr que la taille de l'annonce ne changera pas. Cependant, la taille de la bannière peut varier d'un appareil à l'autre. Par conséquent, nous vous recommandons de vous assurer que votre mise en page peut s'adapter aux variations de hauteur des annonces. Dans de rares cas, la taille adaptative complète peut ne pas être remplie. Une création de taille standard est alors centrée dans cet espace.

Quand utiliser des bannières adaptatives ?

Les bannières adaptatives sont conçues pour remplacer directement la taille de bannière standard 320 x 50, ainsi que le format de bannière intelligente qu'elles remplacent.

Ces tailles de bannière sont couramment utilisées comme bannières ancrées, qui sont généralement verrouillées en haut ou en bas de l'écran. Pour ces bannières ancrées, le format des bannières adaptatives sera semblable à celui d'une annonce standard au format 320 x 50, comme illustré sur les captures d'écran suivantes:


Bannière 320 x 50

Bannière intelligente

Bannière adaptative

Une bannière adaptative exploite mieux la taille d'écran disponible. De plus, une bannière adaptative est plus adaptée qu'une bannière intelligente pour les raisons suivantes:

  • Il utilise la largeur fournie plutôt que la largeur de tout l'écran, ce qui vous permet de tenir compte des encoches et des.

  • Elle sélectionne une hauteur optimale pour l'appareil spécifique plutôt que d'avoir une hauteur constante sur des appareils de différentes tailles, ce qui atténue les effets de la fragmentation de l'appareil.

Notes de mise en œuvre

Lorsque vous implémentez des bannières adaptatives dans votre application, tenez compte des points suivants:

  • Vous devez connaître la largeur de la vue dans laquelle l'annonce sera placée. Cela doit tenir compte de la largeur de l'appareil et desencoches applicables.
  • Assurez-vous que l'arrière-plan de l'affichage de l'annonce est opaque afin d'être conforme auxAdMob règles lorsque des tailles d'annonces plus petites sont diffusées, mais ne remplissent pas l'espace publicitaire.

  • Assurez-vous d'utiliser la dernière version du SDK Google Mobile Ads. Pour la médiation, utilisez les adaptateurs de médiation les plus récents.

  • Les tailles de bannières adaptatives sont conçues pour fonctionner de manière optimale lorsque vous utilisez toute la largeur disponible. Dans la plupart des cas, il s'agit de la pleine largeur de l'écran de l'appareil utilisé. Veillez à tenir compte desencoches applicables. .

  • Le SDK Google Mobile Ads renvoie une hauteur d'annonce optimisée pour la largeur donnée dans un fichier AdSize.

  • Il existe trois méthodes permettant d'obtenir une taille d'annonce pour les bannières adaptatives : une pour le mode paysage, une pour le portrait et une pour l'orientation actuelle au moment de l'exécution. Pour en savoir plus, consultez la documentation complète de l'API ci-dessous.

  • La taille renvoyée pour une largeur donnée sur un appareil donné sera toujours la même. Par conséquent, une fois que vous aurez testé votre mise en page sur un appareil donné, vous pourrez être sûr que la taille de l'annonce ne changera pas.

  • La hauteur de la bannière ancrée ne dépasse jamais 15% de la hauteur de l'appareil ni inférieure à 50dp..

Démarrage rapide

Suivez les étapes ci-dessous pour implémenter une bannière ancrée adaptative simple.

  1. Créez un objet an AdView et définissez l'ID de votre bloc d'annonces.

  2. Obtenez une taille de bannière adaptative. Cette taille sera utilisée pour demander votre bannière adaptative. Pour obtenir la taille d'annonce adaptative, effectuez les opérations suivantes:

    1. Obtenez la largeur de l'appareil en cours d'utilisation ou définissez votre propre largeur si vous ne souhaitez pas utiliser toute la largeur de l'écran.
    2. Utilisez les méthodes statiques appropriées sur la classe de taille d'annonce, telles que AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(context, width) , afin d'obtenir un objetAdSize adaptatif pour l'orientation choisie.
    3. Définissez la taille de l'annonce pour l'affichage de la bannière. Effectuez cette opérationà l'aide de AdView.setAdSize().

    Vous trouverez un exemple complet ci-dessous.

  3. Créez un objet de demande d'annonce et chargez votre bannière à l'aide de la méthodeloadAd() sur votre vue d'annonce préparée, comme vous le feriez avec une requête de bannière normale.

Exemple de code

Voici un exemple d'activité qui charge une bannière adaptative en fonction de la largeur de l'écran:

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"
  }
}

Ici, la fonction AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize permet d'obtenir la taille d'une bannière dans une position ancrée pour l'orientation actuelle de l'interface. Pour précharger une bannière ancrée dans une orientation donnée, utilisez la fonction correspondante de AdSize.getPortraitAnchoredAdaptiveBannerAdSize et AdSize.getLandscapeAnchoredAdaptiveBannerAdSize.

Exemple complet sur GitHub

Télécharger Java Télécharger Kotlin