Configurer des bannières publicitaires

Sélectionnez une plate-forme : Android (bêta) Dernière sélection 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 ancrées adaptatives sont des annonces au format 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 tester 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 requête. 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, procédez comme suit :

Kotlin

  1. Créez un AdView objet.
  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)
}

BannerSnippets.kt

Java

  1. Créez un AdView objet.
  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);
}

BannerSnippets.java

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'interface utilisateur Compose.
  2. Définissez une mutableStateOf<BannerAd?> variable pour contenir la bannière :
// 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()) },
      )
    }
  }
}
ComposeBannerFragment.kt

Charger une annonce

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

Kotlin

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

  adView.loadAd(
    adRequest,
    object : AdLoadCallback<BannerAd> {
      override fun onAdLoaded(ad: BannerAd) {
        Log.d(TAG, "Banner ad loaded.")
      }

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

BannerSnippets.kt

Java

private void loadBannerAd(AdView adView, Activity activity) {
  // Get a BannerAdRequest for a 360 wide large anchored adaptive banner ad.
  AdSize adSize = AdSize.getLargeAnchoredAdaptiveBannerAdSize(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) {
          Log.d(TAG, "Banner ad loaded.");
        }

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

BannerSnippets.java

Jetpack Compose

// Request an large anchored adaptive banner with a width of 360.
val adSize = AdSize.getLargeAnchoredAdaptiveBannerAdSize(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")
        }
      }
    }
  }
}
ComposeBannerFragment.kt

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 le chargement échoue. GMA Next-Gen SDK respecte la 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 requête. 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 d'annonce

Lorsque vous avez terminé d'utiliser une bannière, 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() } }
ComposeBannerFragment.kt

É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, ainsi que l'ouverture et la fermeture. Nous vous recommandons de définir le rappel avant d'afficher la bannière.

Kotlin

override fun onAdLoaded(ad: BannerAd) {
  ad.adEventCallback =
    object : BannerAdEventCallback {
      override fun onAdImpression() {
        // Banner ad recorded an impression.
        Log.d(TAG, "Banner ad recorded an impression.")
      }

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

      override fun onAdShowedFullScreenContent() {
        // Banner ad showed.
        Log.d(TAG, "Banner ad showed full screen content.")
      }

      override fun onAdDismissedFullScreenContent() {
        // Banner ad dismissed.
        Log.d(TAG, "Banner ad dismissed full screen content.")
      }

      override fun onAdFailedToShowFullScreenContent(
        fullScreenContentError: FullScreenContentError
      ) {
        // Banner ad failed to show.
        Log.w(TAG, "Banner ad failed to show full screen content: $fullScreenContentError")
      }
    }
}

BannerSnippets.kt

Java

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

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

        @Override
        public void onAdShowedFullScreenContent() {
          // Banner ad showed.
          Log.d(TAG, "Banner ad showed full screen content.");
        }

        @Override
        public void onAdDismissedFullScreenContent() {
          // Banner ad dismissed.
          Log.d(TAG, "Banner ad dismissed full screen content.");
        }

        @Override
        public void onAdFailedToShowFullScreenContent(
            @NonNull FullScreenContentError fullScreenContentError) {
          // Banner ad failed to show.
          Log.w(
              TAG,
              "Banner ad failed to show full screen content: " + fullScreenContentError);
        }
      });
}

BannerSnippets.java

Rappel d'actualisation des annonces

Le 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 vos vues de bannières, 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'android:hardwareAccelerated attribut pour les <application> et <activity> éléments dans votre AndroidManifest.xml. L'exemple suivant active l'accélération matérielle sur 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 de contrôle de l'accélération matérielle, consultez le guide sur l' accélération matérielle. Notez que les vues d'annonces individuelles ne peuvent pas être activées pour l'accélération matérielle 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 illustre l'utilisation du GMA Next-Gen SDK.