Les bannières occupent une position fixe dans la mise en page de votre application, par exemple en haut ou en bas de l'écran de l'appareil. Ces annonces restent à l'écran lorsque les utilisateurs interagissent avec votre application et sont actualisées après un certain temps que vous définissez. Les bannières adaptatives ancrées utilisent la taille d'annonce pour chaque appareil en fonction de la largeur d'annonce que vous spécifiez.
Cette page explique comment intégrer des bannières adaptatives ancrées dans une application React Native.
Prérequis
Avant de continuer, procédez comme suit :
- Configurez Google Mobile Ads SDK for React Native.
- Activez les annonces tests et utilisez l'ID de bloc d'annonces test suivant :
Android
ca-app-pub-3940256099942544/9214589741
iOS
ca-app-pub-3940256099942544/2435281174
Obtenir la taille de l'annonce
Pour demander une bannière adaptative ancrée, appelez la méthode AdSize.getLargeAnchoredAdaptiveBannerAdSize avec la largeur de votre conteneur d'annonces disponible en pixels indépendants de la densité (dp). Cette méthode renvoie une promesse qui se résout en un objet AdSize.
L'exemple suivant récupère et renvoie la taille d'une bannière adaptative ancrée :
export async function getAdaptiveAdSize(width: number): Promise<AdSize> {
const adSize = await AdSize.getLargeAnchoredAdaptiveBannerAdSize(width);
return adSize;
}
Charger une annonce
Une fois que vous avez obtenu un objet AdSize, appelez la méthode load sur la classe BannerAd avec l'ID du bloc d'annonces et la taille de votre bloc d'annonces.
L'exemple suivant charge une bannière adaptative ancrée avec la taille d'annonce et l'ID du bloc d'annonces, reçoit l'instance BannerAd chargée en cas de réussite et consigne une erreur en cas d'échec :
export function loadBannerAd(
adUnitId: string,
adSize: AdSize,
callback?: BannerAdLoadCallback,
): void {
BannerAd.load(
{adUnitId, adSize},
{
// Called when an ad has finished loading.
onAdLoaded: (ad) => {
console.log('Banner ad loaded successfully.');
callback?.onAdLoaded?.(ad);
},
// Called when an ad request fails.
onAdFailedToLoad: (error: LoadAdError) => {
console.error('Failed to load banner ad:', error.message);
callback?.onAdFailedToLoad?.(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. Google Mobile Ads SDK for React Native respecte la fréquence d'actualisation que vous avez spécifiée dans l'UI AdMob. 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 pour définir une fréquence d'actualisation, consultez Utiliser l'actualisation automatique pour les bannières.
Afficher une bannière
Pour afficher une instance BannerAd chargée, transmettez l'instance d'annonce à la propriété ad d'un composant BannerAdView dans la hiérarchie des vues.
L'exemple suivant montre comment afficher une annonce et la détruire lorsque le composant est démonté :
export function BannerAdViewComponent({ad}: {ad: BannerAd}): React.JSX.Element {
useEffect(() => {
// Destroy native resources when the component unmounts.
return () => {
ad.destroy();
};
}, [ad]);
return <BannerAdView ad={ad} />;
}
Cet exemple appelle la méthode destroy lorsque le composant est démonté ou lorsque l'instance d'annonce est remplacée. Ce processus libère de la mémoire et des ressources utilisées par l'annonce.
Écouter les événements d'annonce
Pour écouter les événements d'annonce, tels que les impressions d'annonce et les clics, définissez des rappels sur le composant BannerAdView. Pour tous les rappels, consultez BannerAdViewProps.
L'exemple suivant définit des rappels pour écouter les événements d'annonce de type bannière :
export function BannerEventsExample({ad}: {ad: BannerAd}): React.JSX.Element {
return (
<BannerAdView
ad={ad}
// Called when an impression is recorded for an ad.
onAdImpression={() => {
console.log('Banner ad recorded an impression.');
}}
// Called when a click is recorded for an ad.
onAdClicked={() => {
console.log('Banner ad clicked.');
}}
// Called when the ad opens an in-app overlay or landing page.
onAdShowedFullScreenContent={() => {
console.log('Banner ad opened overlay content.');
}}
// Called when the user dismisses the ad overlay.
onAdDismissedFullScreenContent={() => {
console.log('Banner ad overlay dismissed.');
}}
// Called when the ad is estimated to have earned money.
onAdPaid={(adValue) => {
console.log(
`Banner ad paid: ${adValue.amountMicros} ${adValue.currencyCode}`,
);
}}
// Called when the ad automatically refreshes.
onAdRefreshed={() => {
console.log('Banner ad refreshed.');
}}
// Called when the ad fails to automatically refresh.
onAdFailedToRefresh={(error) => {
console.error('Banner ad failed to refresh:', error.message);
}}
/>
);
}
Cet exemple écoute les événements d'annonce, tels que les fermetures d'annonces, les impressions, les clics, la présentation en plein écran, les revenus publicitaires estimés, ainsi que les réussites et les échecs d'actualisation.
Voir l'exemple complet
Cette section présente un exemple complet d'intégration d'une bannière dans un composant React Native.
L'exemple suivant intègre une bannière dans un composant React Native et gère l'instance d'annonce dans l'état :
Remplacez BANNER_AD_UNIT_ID par l'ID de votre bloc d'annonces.
Étapes suivantes
Après avoir intégré des bannières, explorez les sujets suivants :