Interstitial-Anzeigen einrichten

Interstitial-Anzeigen sind Vollbildanzeigen, die an Übergangspunkten in Ihrer App eingeblendet werden, z. B. zwischen Bildschirmen oder während der Pause zwischen Levels in einem Spiel. Nutzer können auf die Anzeige tippen, um die Zielseite aufzurufen, oder die Anzeige schließen und zur App zurückkehren. Weitere Informationen finden Sie im Leitfaden für Interstitial-Anzeigen und in einer Fallstudie.

Um die Präsentationslatenz zu eliminieren und sicherzustellen, dass eine Anzeige verfügbar ist, wenn ein Übergang erfolgt, verwendet Google Mobile Ads SDK for React Native das Vorabladen von Anzeigen, um das Laden im Hintergrund, das Caching und das Auffüllen des Puffers zu verwalten.

In diesem Leitfaden erfahren Sie, wie Sie Interstitial-Anzeigen in eine React Native-App einbinden.

Vorbereitung

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

Android 

ca-app-pub-3940256099942544/1033173712

iOS 

ca-app-pub-3940256099942544/4411468910

Vorabladen von Anzeigen

Das Vorabladen von Anzeigen in Google Mobile Ads SDK for React Native automatisiert das Laden und Caching von Anzeigen.

Das Vorabladen von Anzeigen bietet folgende Vorteile:

  • Referenzverwaltung: Referenzen werden beibehalten, bis Anzeigen ausgeliefert werden.
  • Automatisches Aktualisieren: Es wird eine neue Anzeige geladen, wenn eine Anzeige aus dem Cache abgerufen wird.
  • Verwaltete Wiederholungsversuche: Es wird eine neue Anzeige geladen, wenn das Laden einer Anzeige fehlschlägt.
  • Ablaufbehandlung: Anzeigen werden vor dem Ablauf aktualisiert.
  • Cache-Optimierung: Die Cache-Reihenfolge wird optimiert, damit die Anzeige mit der höchsten Priorität ausgeliefert wird.

Informationen zum manuellen Laden von Anzeigen finden Sie im Leitfaden Einzelne Interstitial-Anzeige laden.

Vorabladen starten

Wenn Sie mit dem Vorabladen von Anzeigen beginnen möchten, rufen Sie die Methode InterstitialAdPreloader.start auf und übergeben Sie den Wert preloadId, die Konfigurationseinstellungen und die Ereignis-Callbacks, um Änderungen am Pufferstatus zu überwachen:

export function startPreloader(
  adUnitId: string,
  preloadId: string,
  customPreloadCallback?: PreloadCallback,
): boolean {
  try {
    const started = InterstitialAdPreloader.start(
      preloadId,
      {
        request: {adUnitId},
        bufferSize: 2,
      },
      {
        // Called when an ad is preloaded into the buffer.
        onAdPreloaded: (metadata) => {
          console.log(`Interstitial ad preloaded for ${metadata.preloadId}`);
          customPreloadCallback?.onAdPreloaded?.(metadata);
        },
        // Called when an ad fails to preload.
        onAdFailedToPreload: (error: LoadAdError) => {
          console.error('Failed to preload interstitial ad:', error.message);
          customPreloadCallback?.onAdFailedToPreload?.(error);
        },
        // Called when all preloaded ads in the buffer have been shown.
        onAdsExhausted: () => {
          console.log('Preload buffer exhausted for interstitial ads.');
          customPreloadCallback?.onAdsExhausted?.();
        },
      },
    );
    return started;
  } catch (error) {
    console.error('Error starting interstitial ad preloader:', error);
    return false;
  }
}

Eine Vorablade-ID ist ein String, der eine Konfiguration für das Vorabladen von Anzeigen eindeutig identifiziert. Wenn Sie die Anzeigenblock-ID für eine einzelne Vorladekonfiguration in Ihrer App verwenden, verwenden Sie diese Anzeigenblock-ID als Vorlade-ID. Wenn für Ihre App mehrere Preloader für dieselbe Anzeigenblock-ID erforderlich sind, übergeben Sie für jede Preload-ID einen eindeutigen String.

Wenn Ihre App eine vorab geladene Anzeige aus dem Zwischenspeicher abruft, fordert Google Mobile Ads SDK for React Native im Hintergrund eine Ersatzanzeige an, um den Zwischenspeicher wieder aufzufüllen. Wenn keine vorab geladenen Anzeigen mehr im Zwischenspeicher vorhanden sind, ruft Google Mobile Ads SDK for React Native den Callback onAdsExhausted auf.

Limits für den Vorab-Cache

Google Mobile Ads SDK for React Native erzwingt ein appweites Limit für die Gesamtzahl der vorab geladenen Anzeigen für alle Anzeigenblöcke und Preload-IDs:

  • Standardlimit: Google speichert maximal sechs vorab geladene Anzeigen im Arbeitsspeicher. Dieses Limit gilt für alle Formate und Vorablade-IDs.
  • Empfohlener Puffer: zwei vorab geladene Anzeigen pro Vorablade-ID.

Wenn Ihre App das appweite Limit erreicht, werden Hintergrundanfragen für vorab geladene Anzeigen pausiert, bis vorhandene Anzeigen aus dem Cache abgerufen oder gelöscht werden. Das Vorabladen wird auch vorübergehend pausiert, während eine Vollbildanzeige auf dem Bildschirm zu sehen ist.

Anzeige abrufen und einblenden

Bevor Sie eine Anzeige einblenden, prüfen Sie mit der Methode InterstitialAdPreloader.isAdAvailable, ob eine Anzeige verfügbar ist. Rufen Sie die Methode InterstitialAdPreloader.pollAd auf, um die Anzeige abzurufen.

Wenn Sie auf Präsentationsereignisse wie das Schließen von Anzeigen oder Anzeigefehler warten möchten, legen Sie die Property adEventCallback für die Anzeigeninstanz fest, bevor Sie die Methode show aufrufen.

Im folgenden Beispiel wird die Verfügbarkeit von Anzeigen geprüft und auf Ereignisse für die Vollbildpräsentation gewartet, bevor die Anzeige ausgeliefert wird:

export function showPreloadedAd(
  preloadId: string,
  customAdEventCallback?: FullScreenAdEventCallback,
) {
  if (InterstitialAdPreloader.isAdAvailable(preloadId)) {
    const ad = InterstitialAdPreloader.pollAd(preloadId);
    if (ad) {
      ad.adEventCallback = {
        // Called when the ad is presented on screen.
        onAdShowedFullScreenContent: () => {
          console.log('Preloaded interstitial ad showed full screen content.');
          customAdEventCallback?.onAdShowedFullScreenContent?.();
        },
        // Called when the ad is closed by the user.
        onAdDismissedFullScreenContent: () => {
          console.log('Preloaded interstitial ad dismissed.');
          customAdEventCallback?.onAdDismissedFullScreenContent?.();
          ad.destroy();
        },
        // Called when presentation fails.
        onAdFailedToShowFullScreenContent: (error) => {
          console.error('Preloaded interstitial ad failed to show:', error);
          customAdEventCallback?.onAdFailedToShowFullScreenContent?.(error);
          ad.destroy();
        },
        // Called when an impression is recorded.
        onAdImpression: () => {
          console.log('Preloaded interstitial ad recorded an impression.');
          customAdEventCallback?.onAdImpression?.();
        },
        // Called when the user taps the ad.
        onAdClicked: () => {
          console.log('Preloaded interstitial ad was clicked.');
          customAdEventCallback?.onAdClicked?.();
        },
        // Called when the ad is estimated to have earned money.
        onAdPaid: (adValue) => {
          console.log(
            `Preloaded interstitial ad paid: ${adValue.amountMicros}` +
              ` ${adValue.currencyCode}`,
          );
          customAdEventCallback?.onAdPaid?.(adValue);
        },
      };
      ad.show();
    }
  } else {
    console.log('No preloaded interstitial ad available in buffer.');
  }
}

Rufen Sie die Methode ad.destroy in den Callbacks onAdDismissedFullScreenContent und onAdFailedToShowFullScreenContent auf, um Arbeitsspeicher und Ressourcen freizugeben.

Informationen zur Antwort lesen

Wenn Sie die Antwortinformationen für die nächste vorab geladene Anzeige prüfen möchten, ohne die Anzeige aus dem Cache zu entfernen, rufen Sie die Methode InterstitialAdPreloader.peekAdResponseInfo auf:

export function peekPreloadedAdResponseInfo(preloadId: string) {
  if (InterstitialAdPreloader.isAdAvailable(preloadId)) {
    const responseInfo = InterstitialAdPreloader.peekAdResponseInfo(preloadId);
    if (responseInfo) {
      console.log('Next preloaded ad response info:', responseInfo);
    }
  }
}

Wenn eine Anzeige verfügbar ist, gibt die Methode peekAdResponseInfo ein ResponseInfo-Objekt mit Informationen zur geladenen Anzeigenquelle und zu den Netzwerkadaptern zurück.

Ressourcen bereinigen

Wenn Sie für den Rest der Sitzung keine Anzeigen mehr für eine bestimmte Vorablade-ID ausliefern müssen, rufen Sie die Methode InterstitialAdPreloader.destroy auf. Dadurch wird das Vorabladen für diese Vorablade-ID beendet und nicht verwendete vorab geladene Anzeigen werden aus dem Speicher entfernt.

Im folgenden Beispiel wird das Vorabladen beendet:

export function destroyPreloader(preloadId: string) {
  InterstitialAdPreloader.destroy(preloadId);
}

Nachdem der Nutzer die Anzeige geschlossen hat oder wenn die Anzeige nicht ausgeliefert werden kann, müssen Sie die einzelnen abgerufenen Anzeigeninstanzen löschen. Weitere Informationen finden Sie unter Anzeige abrufen und einblenden.

Vollständiges Beispiel ansehen

Die folgende Beispielkomponente startet das Vorabladen beim Mounten, verfolgt die Anzahl der verfügbaren Anzeigen und bietet Steuerelemente zum Anzeigen vorab geladener Interstitial-Anzeigen:

export function InterstitialScreen() {
  const [numAdsAvailable, setNumAdsAvailable] = useState<number>(0);
  const [status, setStatus] = useState<string>('Initializing Preloader...');

  const refreshAdCount = () => {
    const count = InterstitialAdPreloader.getNumAdsAvailable(PRELOAD_ID);
    setNumAdsAvailable(count);
  };

  useEffect(() => {
    // Start preloading interstitial ads on component mount
    startPreloader(INTERSTITIAL_AD_UNIT_ID, PRELOAD_ID, {
      onAdPreloaded: () => {
        refreshAdCount();
        setStatus('Ad preloaded and ready!');
      },
      onAdFailedToPreload: (error) => {
        setStatus(`Preload failed: ${error.message}`);
      },
      onAdsExhausted: () => {
        refreshAdCount();
        setStatus('Preload buffer exhausted.');
      },
    });
    setStatus('Preloader started.');

    // Clean up preloader resources on component unmount
    return () => {
      destroyPreloader(PRELOAD_ID);
    };
  }, []);

  const handleShow = () => {
    showPreloadedAd(PRELOAD_ID, {
      onAdDismissedFullScreenContent: () => {
        setStatus('Ad dismissed.');
      },
      onAdFailedToShowFullScreenContent: (error) => {
        setStatus(`Failed to show ad: ${error.message}`);
      },
    });
    setStatus('Showing preloaded ad...');
    refreshAdCount();
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Preload Interstitial Ads</Text>
      <Text style={styles.status}>Status: {status}</Text>
      <Text style={styles.status}>Ads Available: {numAdsAvailable}</Text>
      <View style={styles.buttonGroup}>
        <Button
          title="Show Preloaded Ad"
          onPress={handleShow}
          disabled={numAdsAvailable === 0}
        />
      </View>
    </View>
  );
}

Ersetzen Sie Folgendes:

  • INTERSTITIAL_AD_UNIT_ID durch Ihre Anzeigenblock-ID.
  • PRELOAD_ID durch Ihre Preloader-ID.

Nächste Schritte

Nachdem Sie Interstitial-Anzeigen eingebunden haben, können Sie sich mit den folgenden Themen befassen: