Zum Inhalt springen
rdlabo.devdocs

Banneranzeigen

Banner-Anzeigen sind rechteckige Anzeigen, die einen Teil des Anwendungslayouts belegen. Sie können während der Interaktion mit der Anwendung sichtbar bleiben, üblicherweise am oberen oder unteren Rand verankert. Googles Banner-Anleitungen für Android und iOS erklären das Format.

Führen Sie dies nach Initialisierung und Einwilligung aus. Dieses Plugin zeichnet das Banner auf dem nativen Bildschirm oberhalb der WebView. Registrieren Sie Listener vor showBanner, damit die ersten Lade- und Größenereignisse nicht verpasst werden.

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);
    // Das Layout um size.height einrücken; siehe den nächsten Abschnitt.
  }),
  AdMob.addListener(BannerAdPluginEvents.FailedToLoad, (error) => {
    console.error(error);
  }),
  AdMob.addListener(BannerAdPluginEvents.AdPaid, (data: AdMobRevenueData) => {
    // Umsätze pro Impression an Ihren Analyseanbieter weiterleiten.
    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(...)

Zeigt eine Banneranzeige an.

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

interface BannerAdOptions

Optionen zur Anzeige einer Banneranzeige.

Diese Schnittstelle erweitert AdOptions.

Eigenschaft Typ Beschreibung Standard Seit
adSize BannerAdSize Größe des anzuzeigenden Banners. ADAPTIVE_BANNER 3.0.0
position BannerAdPosition Position, an der das Banner angezeigt wird. TOP_CENTER 1.1.2
adId string Kennung des zu ladenden Anzeigenblocks. 1.1.2
isTesting boolean Ob eine Testanzeige angefordert werden soll. false 1.1.2
margin number Bannerabstand in logischen Anzeigeeinheiten (dp unter Android und Punkte unter iOS). Bei BOTTOM_CENTER ist dies der untere Abstand, bei TOP_CENTER der obere. 0 1.1.2
npa boolean Ob nicht personalisierte Anzeigen angefordert werden sollen. false 1.2.0
immersiveMode boolean Ob eine Vollbildanzeige unter Android im immersiven Modus angezeigt werden soll. 7.0.3

enum BannerAdSize

Mitglied Wert Beschreibung
BANNER 'BANNER' Banner-Anzeigengröße der Mobile Marketing Association (MMA) (320x50 dichteunabhängige Pixel).
FULL_BANNER 'FULL_BANNER' Full-Banner-Anzeigengröße des Interactive Advertising Bureau (IAB) (468x60 dichteunabhängige Pixel).
LARGE_BANNER 'LARGE_BANNER' Anzeigengröße für ein großes Banner (320x100 dichteunabhängige Pixel).
MEDIUM_RECTANGLE 'MEDIUM_RECTANGLE' Medium-Rectangle-Anzeigengröße des Interactive Advertising Bureau (IAB) (300x250 dichteunabhängige Pixel).
LEADERBOARD 'LEADERBOARD' Leaderboard-Anzeigengröße des Interactive Advertising Bureau (IAB) (728x90 dichteunabhängige Pixel).
ADAPTIVE_BANNER 'ADAPTIVE_BANNER' Ein Banner mit dynamischer Größe, das die gesamte Breite nutzt und seine Höhe automatisch anpasst.
SMART_BANNER 'SMART_BANNER' Ein älteres Smart Banner, dessen Größe sich an der Bildschirmbreite orientiert. Aus Kompatibilitätsgründen beibehalten; für neue Integrationen ADAPTIVE_BANNER verwenden.

enum BannerAdPosition

Mitglied Wert Beschreibung
TOP_CENTER 'TOP_CENTER' Positioniert das Banner oben mittig auf dem Bildschirm.
CENTER 'CENTER' Positioniert das Banner in der Bildschirmmitte.
BOTTOM_CENTER 'BOTTOM_CENTER' Positioniert das Banner unten mittig auf dem Bildschirm.

Inhalt unter dem Banner vermeiden

Das Banner wird auf dem nativen Bildschirm über der WebView gezeichnet. Das HTML-Layout verschiebt sich nicht von selbst. Rücken Sie Ihr eigenes Wurzelelement um size.height in logischen Pixeln ein. Verwenden Sie für BOTTOM_CENTER Padding oder Margin unten und für TOP_CENTER oben.

<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` : '';
});

Entfernen Sie den Innenabstand bei einer Höhe von 0, etwa nach Ausblenden, Entfernen oder Fehlschlag. Übertragen Sie dieselbe Idee auf das Element, das in Ihrem Framework die WebView ausfüllt.

Informationen zu isTesting finden Sie unter Tests.

Lebenszyklus

  • hideBanner() blendet das aktuelle Banner vorübergehend aus.
  • resumeBanner() zeigt ein ausgeblendetes Banner wieder an.
  • removeBanner() zerstört es. Rufen Sie showBanner() auf, um ein neues zu erstellen.

method hideBanner()

Blendet das aktuelle Banner aus, ohne es zu zerstören.

hideBanner() => Promise<void>

method resumeBanner()

Zeigt ein zuvor ausgeblendetes Banner an.

resumeBanner() => Promise<void>

method removeBanner()

Zerstört das aktuelle Banner und entfernt es vom Bildschirm.

removeBanner() => Promise<void>

Geben Sie Listener-Handles frei, wenn der zugehörige Bildschirm zerstört wird:

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

Umsatzdaten je Banner-Impression werden über BannerAdPluginEvents.AdPaid ausgegeben. Vollbildformate liefern dieselben AdMobRevenueData über ihr Ereignis AdImpression. Siehe Anzeigenereignisse.

Diese Seite auf GitHub bearbeiten