Banneranzeigen einrichten

Banneranzeigen haben eine feste Position im Layout Ihrer App, z. B. oben oder unten auf dem Bildschirm des Geräts. Diese Anzeigen bleiben auf dem Bildschirm, während Nutzer mit Ihrer App interagieren, und werden nach einem von Ihnen festgelegten Zeitraum aktualisiert. Bei adaptiven Ankerbannern wird die Anzeigengröße für jedes Gerät anhand einer von Ihnen angegebenen Anzeigenbreite verwendet.

Auf dieser Seite wird beschrieben, wie Sie adaptive Ankerbanner in eine React Native-App einbinden.

Vorbereitung

Bevor Sie fortfahren, führen Sie die folgenden Schritte aus:

Android 

ca-app-pub-3940256099942544/9214589741

iOS 

ca-app-pub-3940256099942544/2435281174

Anzeigengröße abrufen

Wenn Sie eine adaptive Ankerbanneranzeige anfordern möchten, rufen Sie die Methode AdSize.getLargeAnchoredAdaptiveBannerAdSize mit der verfügbaren Breite des Anzeigencontainers in dichteunabhängigen Pixeln (dp) auf. Diese Methode gibt ein Promise zurück, das in ein AdSize-Objekt aufgelöst wird.

Im folgenden Beispiel wird die Anzeigengröße für eine verankerte adaptive Banneranzeige abgerufen und zurückgegeben:

export async function getAdaptiveAdSize(width: number): Promise<AdSize> {
  const adSize = await AdSize.getLargeAnchoredAdaptiveBannerAdSize(width);
  return adSize;
}

Anzeige laden

Nachdem Sie ein AdSize-Objekt erhalten haben, rufen Sie die Methode load für die Klasse BannerAd mit der Anzeigenblock-ID und der Anzeigengröße auf.

Im folgenden Beispiel wird eine adaptive Ankerbanneranzeige mit der Anzeigengröße und der Anzeigenblock-ID geladen. Bei Erfolg wird die geladene BannerAd-Instanz empfangen und bei einem Fehler wird ein Fehler protokolliert:

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);
      },
    },
  );
}

Anzeige aktualisieren

Wenn Sie den Anzeigenblock so konfiguriert haben, dass er aktualisiert wird, müssen Sie keine weitere Anzeige anfordern, wenn die Anzeige nicht geladen werden kann. Google Mobile Ads SDK for React Native berücksichtigt alle Aktualisierungsraten, die Sie in der AdMob-Benutzeroberfläche angegeben haben. Wenn Sie die Aktualisierung nicht aktiviert haben, senden Sie eine neue Anfrage. Weitere Informationen zur Aktualisierung von Anzeigenblöcken, z. B. zum Festlegen einer Aktualisierungsrate, finden Sie unter Automatische Aktualisierung für Banneranzeigen verwenden.

Banneranzeige einblenden

Wenn Sie eine geladene BannerAd-Instanz anzeigen möchten, übergeben Sie die Anzeigeninstanz an das Attribut ad einer BannerAdView-Komponente in Ihrer Ansichtshierarchie.

Im folgenden Beispiel wird eine Anzeige eingeblendet und zerstört, wenn die Komponente entfernt wird:

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} />;
}

In diesem Beispiel wird die Methode destroy aufgerufen, wenn die Komponente entfernt oder die Anzeigeninstanz ersetzt wird. Dadurch werden Arbeitsspeicher und Ressourcen freigegeben, die von der Anzeige verwendet werden.

Auf Anzeigenereignisse warten

Wenn Sie Anzeigenereignisse wie Anzeigenimpressionen und Klicks erfassen möchten, legen Sie Callbacks für die Komponente BannerAdView fest. Alle Callbacks finden Sie unter BannerAdViewProps.

Im folgenden Beispiel werden Callbacks festgelegt, um auf Banneranzeigenereignisse zu warten:

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);
      }}
    />
  );
}

In diesem Beispiel wird auf Anzeigenereignisse wie das Schließen von Anzeigen, Impressionen, Klicks, Vollbildpräsentationen, geschätzte Werbeeinnahmen sowie erfolgreiche und fehlgeschlagene Aktualisierungen gewartet.

Vollständiges Beispiel ansehen

In diesem Abschnitt wird anhand eines vollständigen Beispiels beschrieben, wie Sie eine Banneranzeige in eine React Native-Komponente einbinden.

Im folgenden Beispiel wird eine Banneranzeige in eine React Native-Komponente eingebunden und die Anzeigeninstanz im Status verwaltet:

export function BannerScreen() {
  const {width} = useWindowDimensions();
  const insets = useSafeAreaInsets();
  const [ad, setAd] = useState<BannerAd | null>(null);
  const [status, setStatus] = useState('Idle');

  useEffect(() => {
    return () => {
      ad?.destroy();
    };
  }, [ad]);

  const handleLoadAd = async () => {
    setStatus('Loading adaptive banner ad...');
    try {
      const adaptiveSize = await getAdaptiveAdSize(width);
      loadBannerAd(BANNER_AD_UNIT_ID, adaptiveSize, {
        onAdLoaded: (loadedAd) => {
          setAd(loadedAd);
          setStatus('Banner ad loaded successfully.');
        },
        onAdFailedToLoad: (error: LoadAdError) => {
          setStatus(`Failed to load banner ad: ${error.message}`);
        },
      });
    } catch (error) {
      setStatus(`Failed to get adaptive ad size: ${error}`);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Anchored Adaptive Banner Ad</Text>
      <Text style={styles.status}>Status: {status}</Text>
      <View style={styles.buttonGroup}>
        <Button title="Load Banner Ad" onPress={handleLoadAd} />
      </View>
      {ad ? (
        <View style={[styles.bannerContainer, {bottom: insets.bottom}]}>
          <BannerAdView
            ad={ad}
            onAdImpression={() => setStatus('Banner ad recorded impression.')}
            onAdClicked={() => setStatus('Banner ad clicked.')}
            onAdShowedFullScreenContent={() =>
              setStatus('Banner ad showed overlay content.')
            }
            onAdDismissedFullScreenContent={() =>
              setStatus('Banner ad overlay dismissed.')
            }
          />
        </View>
      ) : null}
    </View>
  );
}

Ersetzen Sie BANNER_AD_UNIT_ID durch die ID Ihres Anzeigenblocks.

Nächste Schritte

Nachdem Sie Banneranzeigen eingebunden haben, können Sie sich mit den folgenden Themen vertraut machen: