Bannières

Sélectionnez une plate-forme : Android (bêta) New-selected Android iOS Unity Flutter

Les bannières sont des annonces rectangulaires qui occupent une partie de la mise en page d'une application. Les bannières adaptatives ancrées sont des annonces à ratio fixe qui restent à l'écran lorsque les utilisateurs interagissent avec l'application, ancrées en haut ou en bas de l'écran.

Ce guide explique comment charger une bannière ancrée adaptative dans une application Android.

Prérequis

Toujours effectuer des tests avec des annonces tests

Lorsque vous créez et testez vos applications, assurez-vous d'utiliser des annonces tests plutôt que des annonces de production. À défaut, votre compte risque d'être suspendu.

Le moyen le plus simple de charger des annonces tests consiste à utiliser notre ID de bloc d'annonces test dédié pour les bannières Android :

/21775744923/example/adaptive-banner

Il a été spécialement configuré pour renvoyer des annonces tests pour chaque demande. Vous pouvez l'utiliser dans vos propres applications lors du codage, des tests et du débogage. Veillez simplement à le remplacer par votre propre ID de bloc d'annonces avant de publier votre application.

Pour en savoir plus sur le fonctionnement des annonces tests GMA Next-Gen SDK, consultez Activer les annonces tests.

Créer un objet AdView

Pour afficher des bannières :

Kotlin

  1. Créez un objet AdView.
  2. Ajoutez l'objet AdView à la mise en page de votre application.

L'exemple suivant crée et ajoute l'objet AdView à une mise en page d'application :

private fun createAdView(adViewContainer: FrameLayout, activity: Activity) {
  val adView = AdView(activity)
  adViewContainer.addView(adView)
}

Java

  1. Créez un objet AdView.
  2. Ajoutez l'objet AdView à la mise en page de votre application.

L'exemple suivant crée et ajoute l'objet AdView à une mise en page d'application :

private void createAdView(FrameLayout adViewContainer, Activity activity) {
  AdView adView = new AdView(activity);
  adViewContainer.addView(adView);
}

Mise en page XML

Ajoutez un élément AdView à votre fichier XML de mise en page :

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <com.google.android.libraries.ads.mobile.sdk.banner.AdView
      android:id="@+id/adView"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Jetpack Compose

  1. Incluez un élément AndroidView dans l'UI Compose.
  2. Définissez une variable mutableStateOf<BannerAd?> pour contenir la bannière publicitaire :
// Initialize required variables.
val context = LocalContext.current
var bannerAdState by remember { mutableStateOf<BannerAd?>(null) }

// The AdView is placed at the bottom of the screen.
Column(modifier = modifier.fillMaxSize(), verticalArrangement = Arrangement.Bottom) {
  bannerAdState?.let { bannerAd ->
    Box(modifier = Modifier.fillMaxWidth()) {
      // Display the ad within an AndroidView.
      AndroidView(
        modifier = modifier.wrapContentSize(),
        factory = { bannerAd.getView(requireActivity()) },
      )
    }
  }
}

Charger une annonce

L'exemple suivant charge une bannière adaptative ancrée de 360 pixels de largeur dans un objet AdView :

Kotlin

private fun loadBannerAd(adView: AdView, activity: Activity) {
  // Get a BannerAdRequest for a 360 wide anchored adaptive banner ad.
  val adSize = AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(activity, 360)
  val adRequest = BannerAdRequest.Builder(AD_UNIT_ID, adSize).build()

  adView.loadAd(
    adRequest,
    object : AdLoadCallback<BannerAd> {
      override fun onAdLoaded(ad: BannerAd) {
        ad.adEventCallback =
          object : BannerAdEventCallback {
            override fun onAdImpression() {
              Log.d(TAG, "Banner ad recorded an impression.")
            }

            override fun onAdClicked() {
              Log.d(TAG, "Banner ad clicked.")
            }
          }
      }

      override fun onAdFailedToLoad(adError: LoadAdError) {
        Log.e(TAG, "Banner ad failed to load: $adError")
      }
    },
  )
}

Java

private void loadBannerAd(AdView adView, Activity activity) {
  // Get a BannerAdRequest for a 360 wide anchored adaptive banner ad.
  AdSize adSize = AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(activity, 360);
  BannerAdRequest adRequest = new BannerAdRequest.Builder(AD_UNIT_ID, adSize).build();

  adView.loadAd(
      adRequest,
      new AdLoadCallback<BannerAd>() {
        @Override
        public void onAdLoaded(@NonNull BannerAd bannerAd) {
          bannerAd.setAdEventCallback(
              new BannerAdEventCallback() {
                @Override
                public void onAdImpression() {
                  Log.d(TAG, "Banner ad recorded an impression.");
                }

                @Override
                public void onAdClicked() {
                  Log.d(TAG, "Banner ad clicked.");
                }
              });
        }

        @Override
        public void onAdFailedToLoad(@NonNull LoadAdError adError) {
          Log.e(TAG, "Banner ad failed to load: " + adError);
        }
      });
}

Jetpack Compose

// Request an anchored adaptive banner with a width of 360.
val adSize = AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(requireContext(), 360)

// Load the ad when the screen is active.
val coroutineScope = rememberCoroutineScope()
val isPreviewMode = LocalInspectionMode.current
LaunchedEffect(context) {
  bannerAdState?.destroy()
  if (!isPreviewMode) {
    coroutineScope.launch {
      when (val result = BannerAd.load(BannerAdRequest.Builder(AD_UNIT_ID, adSize).build())) {
        is AdLoadResult.Success -> {
          bannerAdState = result.ad
        }
        is AdLoadResult.Failure -> {
          showToast("Banner failed to load.")
          Log.w(Constant.TAG, "Banner ad failed to load: $result.error")
        }
      }
    }
  }
}

Actualiser une annonce

Si vous avez configuré votre bloc d'annonces pour qu'il s'actualise, vous n'avez pas besoin de demander une autre annonce lorsque l'annonce ne se charge pas. GMA Next-Gen SDK respecte toute fréquence d'actualisation que vous avez spécifiée dans l'interface utilisateur Ad Manager. Si vous n'avez pas activé l'actualisation, envoyez une nouvelle demande. Pour en savoir plus sur l'actualisation des blocs d'annonces, par exemple sur la définition d'une fréquence d'actualisation, consultez Fréquence d'actualisation des annonces dans les applications mobiles.

Libérer une ressource publicitaire

Lorsque vous avez terminé d'utiliser une bannière publicitaire, vous pouvez libérer ses ressources.

Pour libérer la ressource de l'annonce, supprimez l'annonce de la hiérarchie des vues et supprimez toutes ses références :

Kotlin 

// Remove banner from view hierarchy.
val parentView = adView?.parent
if (parentView is ViewGroup) {
  parentView.removeView(adView)
}

// Destroy the banner ad resources.
adView?.destroy()

// Drop reference to the banner ad.
adView = null

Java 

// Remove banner from view hierarchy.
if (adView.getParent() instanceof ViewGroup) {
  ((ViewGroup) adView.getParent()).removeView(adView);
}
// Destroy the banner ad resources.
adView.destroy();
// Drop reference to the banner ad.
adView = null;

Jetpack Compose 


// Destroy the ad when the screen is disposed.
DisposableEffect(Unit) { onDispose { bannerAdState?.destroy() } }

Événements d'annonce

Vous pouvez écouter un certain nombre d'événements dans le cycle de vie de l'annonce, y compris l'impression et le clic sur l'annonce, ainsi que l'ouverture et la fermeture de l'annonce. Il est recommandé de définir le rappel avant d'afficher la bannière.

Kotlin

BannerAd.load(
  BannerAdRequest.Builder("/21775744923/example/adaptive-banner", adSize).build(),
  object : AdLoadCallback<BannerAd> {
    override fun onAdLoaded(ad: BannerAd) {
      ad.adEventCallback =
        object : BannerAdEventCallback {
          override fun onAdImpression() {
            // Banner ad recorded an impression.
          }

          override fun onAdClicked() {
            // Banner ad recorded a click.
          }

          override fun onAdShowedFullScreenContent() {
            // Banner ad showed.
          }

          override fun onAdDismissedFullScreenContent() {
            // Banner ad dismissed.
          }

          override fun onAdFailedToShowFullScreenContent(
            fullScreenContentError: FullScreenContentError
          ) {
            // Banner ad failed to show.
          }
        }
    }
    // ...
  }
)

Java

BannerAd.load(
    new BannerAdRequest.Builder("/21775744923/example/adaptive-banner", adSize).build(),
    new AdLoadCallback<BannerAd>() {
      @Override
      public void onAdLoaded(@NonNull BannerAd ad) {
        ad.setAdEventCallback(new BannerAdEventCallback() {
          @Override
          public void onAdImpression() {
            // Banner ad recorded an impression.
          }

          @Override
          public void onAdClicked() {
            // Banner ad recorded a click.
          }

          @Override
          public void onAdShowedFullScreenContent() {
            // Banner ad showed.
          }

          @Override
          public void onAdDismissedFullScreenContent() {
            // Banner ad dismissed.
          }

          @Override
          public void onAdFailedToShowFullScreenContent(
              @NonNull FullScreenContentError fullScreenContentError) {
            // Banner ad failed to show.
          }
        });

        // ...
      }
    });

Callback d'actualisation des annonces

BannerAdRefreshCallback gère les événements d'actualisation des annonces si vous utilisez l'actualisation automatique pour les bannières. Veillez à définir le rappel avant d'ajouter la vue d'annonce à votre hiérarchie de vues. Pour en savoir plus sur l'actualisation des annonces, consultez Actualiser une annonce.

Kotlin

BannerAd.load(
  BannerAdRequest.Builder("/21775744923/example/adaptive-banner", adSize).build(),
  object : AdLoadCallback<BannerAd> {
    override fun onAdLoaded(ad: BannerAd) {
      ad.bannerAdRefreshCallback =
        object : BannerAdRefreshCallback {
          // Set the ad refresh callbacks.
          override fun onAdRefreshed() {
            // Called when the ad refreshes.
          }

          override fun onAdFailedToRefresh(loadAdError: LoadAdError) {
            // Called when the ad fails to refresh.
          }
        }

      // ...
    }
  }
)

Java

BannerAd.load(
    new BannerAdRequest.Builder("/21775744923/example/adaptive-banner", adSize).build(),
    new AdLoadCallback<BannerAd>() {
      @Override
      public void onAdLoaded(@NonNull BannerAd ad) {
        ad.setBannerAdRefreshCallback(
            // Set the ad refresh callbacks.
            new BannerAdRefreshCallback() {
              @Override
              public void onAdRefreshed() {
                // Called when the ad refreshes.
              }

              @Override
              public void onAdFailedToRefresh(@NonNull LoadAdError adError) {
                // Called when the ad fails to refresh.
              }
            });
        // ...
      }
    });

Accélération matérielle pour les annonces vidéo

Pour que les annonces vidéo s'affichent correctement dans les vues de vos bannières publicitaires, l'accélération matérielle doit être activée.

L'accélération matérielle est activée par défaut, mais certaines applications peuvent choisir de la désactiver. Si cela s'applique à votre application, nous vous recommandons d'activer l'accélération matérielle pour les classes Activity qui utilisent des annonces.

Activer l'accélération matérielle

Si l'accélération matérielle est activée de façon globale et que votre application n'adopte pas le comportement attendu, vous pouvez également la contrôler pour chaque activité. Pour activer ou désactiver l'accélération matérielle, vous pouvez utiliser l'attribut android:hardwareAccelerated pour les éléments <application> et <activity> dans votre AndroidManifest.xml. L'exemple suivant active l'accélération matérielle pour l'ensemble de l'application, mais la désactive pour une activité :

<application android:hardwareAccelerated="true">
    <!-- For activities that use ads, hardwareAcceleration should be true. -->
    <activity android:hardwareAccelerated="true" />
    <!-- For activities that don't use ads, hardwareAcceleration can be false. -->
    <activity android:hardwareAccelerated="false" />
</application>

Pour en savoir plus sur les options permettant de contrôler l'accélération matérielle, consultez le guide sur l'accélération matérielle. Notez que l'accélération matérielle ne peut pas être activée pour les vues d'annonces individuelles si l'activité est désactivée. L'accélération matérielle doit donc être activée pour l'activité elle-même.

Téléchargez et exécutez l'exemple d'application qui montre comment utiliser GMA Next-Gen SDK.