Aller au contenu
rdlabo.devdocs

Bannières publicitaires

Les bannières sont des annonces rectangulaires qui occupent une partie de la disposition de l’application. Elles peuvent rester à l’écran pendant que l’utilisateur interagit avec l’application, généralement ancrées en haut ou en bas. Les guides Google sur les bannières pour Android et iOS expliquent ce format.

Appelez cette méthode après l’initialisation et le consentement. Ce plugin dessine la bannière sur l’écran natif (au-dessus de la WebView). Enregistrez les écouteurs avant d’appeler showBanner pour ne pas manquer les premiers événements de chargement et de taille.

import {
  AdMob,
  AdMobBannerSize,
  AdMobRevenueData,
  BannerAdOptions,
  BannerAdPluginEvents,
  BannerAdPosition,
  BannerAdSize,
} from '@capacitor-community/admob';

const handles = await Promise.all([
  AdMob.addListener(BannerAdPluginEvents.Loaded, () => {
    console.log('Banner loaded');
  }),
  AdMob.addListener(BannerAdPluginEvents.SizeChanged, (size: AdMobBannerSize) => {
    console.log('Banner size', size.width, size.height);
    // Réservez un espace de size.height dans la disposition ; voir la section suivante.
  }),
  AdMob.addListener(BannerAdPluginEvents.FailedToLoad, (error) => {
    console.error(error);
  }),
  AdMob.addListener(BannerAdPluginEvents.AdPaid, (data: AdMobRevenueData) => {
    // Transmettez les revenus par impression à votre fournisseur d’analytics.
    console.log(data);
  }),
]);

const options: BannerAdOptions = {
  adId: 'YOUR_AD_UNIT_ID',
  adSize: BannerAdSize.ADAPTIVE_BANNER,
  position: BannerAdPosition.BOTTOM_CENTER,
  margin: 0,
  // isTesting: true,
  // npa: true,
};
await AdMob.showBanner(options);

method showBanner(...)

Affiche une bannière publicitaire.

showBanner(options: BannerAdOptions) => Promise<void>

interface BannerAdOptions

Options d’affichage d’une bannière publicitaire.

Cette interface étend AdOptions.

Propriété Type Description Valeur par défaut Depuis
adSize BannerAdSize Taille de la bannière à afficher. ADAPTIVE_BANNER 3.0.0
position BannerAdPosition Position d’affichage de la bannière. TOP_CENTER 1.1.2
adId string Identifiant du bloc d’annonces à charger. 1.1.2
isTesting boolean Indique si une annonce de test doit être demandée. false 1.1.2
margin number Marge de la bannière en unités logiques d’affichage : dp sur Android et points sur iOS. Pour BOTTOM_CENTER, il s’agit de la marge inférieure. Pour TOP_CENTER, il s’agit de la marge supérieure. 0 1.1.2
npa boolean Indique si des annonces non personnalisées doivent être demandées. false 1.2.0
immersiveMode boolean Indique si une annonce plein écran doit être affichée en mode immersif sur Android. 7.0.3

enum BannerAdSize

Membre Valeur Description
BANNER 'BANNER' Format de bannière de la Mobile Marketing Association (MMA) : 320x50 pixels indépendants de la densité.
FULL_BANNER 'FULL_BANNER' Format de bannière complète de l’Interactive Advertising Bureau (IAB) : 468x60 pixels indépendants de la densité.
LARGE_BANNER 'LARGE_BANNER' Format de grande bannière : 320x100 pixels indépendants de la densité.
MEDIUM_RECTANGLE 'MEDIUM_RECTANGLE' Format de rectangle moyen de l’Interactive Advertising Bureau (IAB) : 300x250 pixels indépendants de la densité.
LEADERBOARD 'LEADERBOARD' Format de grande bannière leaderboard de l’Interactive Advertising Bureau (IAB) : 728x90 pixels indépendants de la densité.
ADAPTIVE_BANNER 'ADAPTIVE_BANNER' Bannière à taille dynamique, sur toute la largeur et à hauteur automatique.
SMART_BANNER 'SMART_BANNER' Ancienne bannière intelligente adaptée à la largeur de l’écran. Conservée pour compatibilité ; utilisez ADAPTIVE_BANNER pour les nouvelles intégrations.

enum BannerAdPosition

Membre Valeur Description
TOP_CENTER 'TOP_CENTER' Positionne la bannière en haut, au centre de l’écran.
CENTER 'CENTER' Positionne la bannière au centre de l’écran.
BOTTOM_CENTER 'BOTTOM_CENTER' Positionne la bannière en bas, au centre de l’écran.

Éviter de masquer le contenu sous la bannière

La bannière est dessinée sur l’écran natif au-dessus de la WebView. La disposition HTML ne s’ajuste pas automatiquement. Réservez dans votre élément racine un espace de size.height (pixels logiques). Utilisez un padding ou une marge en bas pour BOTTOM_CENTER, et en haut pour TOP_CENTER.

<main id="content">Your app</main>

import { AdMob, BannerAdPluginEvents } from '@capacitor-community/admob';

const content = document.getElementById('content');

await AdMob.addListener(BannerAdPluginEvents.SizeChanged, (size) => {
  if (!content) {
    return;
  }
  content.style.paddingBottom = size.height > 0 ? `${size.height}px` : '';
});

Lorsque la hauteur vaut 0 (bannière masquée, supprimée ou en échec), supprimez cet espace. Appliquez le même principe à l’élément qui remplit la WebView dans votre framework.

Consultez Tests pour isTesting.

Cycle de vie

  • hideBanner() masque temporairement la bannière actuelle.
  • resumeBanner() affiche à nouveau une bannière masquée.
  • removeBanner() la détruit. Appelez showBanner() pour en créer une autre.

method hideBanner()

Masque la bannière actuelle sans la détruire.

hideBanner() => Promise<void>

method resumeBanner()

Affiche une bannière précédemment masquée.

resumeBanner() => Promise<void>

method removeBanner()

Détruit la bannière actuelle et la retire de l’écran.

removeBanner() => Promise<void>

Libérez les handles des écouteurs lorsque l’écran qui les possède est détruit :

for (const handle of handles) {
  await handle.remove();
}
await AdMob.removeBanner();

Les revenus par impression d’une bannière sont émis via BannerAdPluginEvents.AdPaid. Les formats plein écran émettent les mêmes données AdMobRevenueData via leur événement AdImpression. Consultez Événements publicitaires.

Modifier cette page sur GitHub