Native Anzeigen einrichten

Native Anzeigen bieten Ihnen einzelne Anzeigen-Assets wie Überschriften, Bilder und Aufforderungstexte, die Sie so gestalten und anordnen können, dass sie zum visuellen Design Ihrer App passen. Für die Verarbeitung von Klick-Tracking, Impressionen und Medienwiedergabe bietet Google Mobile Ads SDK for React Native die folgenden Komponenten:

Weitere Informationen zur richtlinienkonformen Auslieferung nativer Anzeigen finden Sie unter Native Anzeigen und erweiterte native Anzeigen.

Auf dieser Seite wird beschrieben, wie Sie einzelne und mehrere native Anzeigen laden, den Anzeigenspeicher und den Lebenszyklus verwalten und die Hardwarebeschleunigung für Videoanzeigen unter Android aktivieren.

Vorbereitung

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

Android

Format Testanzeigenblock-ID
Nativ ca-app-pub-3940256099942544/2247696110
Natives Video ca-app-pub-3940256099942544/1044960115

iOS

Format Testanzeigenblock-ID
Nativ ca-app-pub-3940256099942544/3986624511
Natives Video ca-app-pub-3940256099942544/2521693316

Anzeige laden

Rufen Sie zum Laden einer nativen Anzeige die Methode NativeAd.load mit einem NativeAdRequest-Objekt auf, das Ihre Anzeigenblock-ID enthält. Diese Methode gibt ein Promise zurück, das mit dem geladenen NativeAd-Objekt aufgelöst oder mit einem LoadAdError-Objekt abgelehnt wird.

Im folgenden Beispiel wird eine einzelne native Anzeige geladen. Bei Erfolg wird die geladene Anzeige zurückgegeben und bei einem Fehler wird eine Fehlermeldung protokolliert:

export async function loadNativeAd(adUnitId: string): Promise<NativeAd | null> {
  try {
    const ad = await NativeAd.load({adUnitId});
    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load native ad:', loadError.message);
    return null;
  }
}

Beim Laden und Verwalten nativer Anzeigen empfehlen wir Folgendes:

  • Anzahl der geladenen Anzeigen begrenzen: Native Anzeigen-Assets verbrauchen Arbeitsspeicher. Laden Sie nur Anzeigen, die Nutzer gleich sehen werden, z. B. die nächsten ein bis zwei Anzeigen-Placements, anstatt große Mengen auf einmal zu laden.
  • Nicht bereitgestellte Anzeigen bereinigen: Wenn Sie eine Anzeige vom Bildschirm entfernen oder ersetzen oder wenn die enthaltende Komponente nicht mehr bereitgestellt wird, rufen Sie die Methode ad.destroy auf. Mit dieser Methode werden die von der Anzeige verwendeten Ressourcen und der Speicher freigegeben.
  • Geladene Anzeigen innerhalb einer Stunde präsentieren: Native Anzeigen-Creatives laufen nach 60 Minuten ab. Wenn Sie eine geladene Anzeige nicht innerhalb einer Stunde ausgeliefert haben, löschen Sie sie und fordern Sie eine andere Anzeige an.

Optional: Mehrere Anzeigen laden

Wenn Sie mehrere Anzeigen in einer einzelnen Anfrage laden möchten, rufen Sie die Methode NativeAd.loadAds mit einem NativeAdRequest-Objekt, der Anzahl der anzufordernden Anzeigen und einem NativeAdLoadCallback-Objekt auf. Die Anfrage kann bis zu fünf Anzeigen enthalten.

Im folgenden Beispiel werden mehrere native Anzeigen angefordert und jede geladene Anzeige, Ladefehler und der Abschluss der Anfrage werden mithilfe von Callbacks verarbeitet:

export function loadMultipleNativeAds(adUnitId: string, numAds: number): void {
  NativeAd.loadAds({adUnitId}, numAds, {
    // Called when an individual native ad finishes loading.
    onNativeAdLoad: (ad) => {
      console.log('Loaded native ad:', ad.headline);
    },
    // Called when an individual native ad fails to load.
    onAdFailedToLoad: (error) => {
      console.error('Failed to load native ad:', error.message);
    },
    // Called when all requested ads have finished loading.
    onAdLoadingCompleted: () => {
      console.log('All requested native ads finished loading.');
    },
  });
}

Wenn Sie Displayanzeigen in einem scrollbaren Feed präsentieren, sollten Sie sie im Voraus laden. Dadurch werden Anzeigen gerendert, wenn Nutzer sie aufrufen.

Hardwarebeschleunigung aktivieren

Wenn Sie Videoanzeigen in Ihren nativen Anzeigenansichten auf Android-Geräten präsentieren möchten, müssen Sie die Hardwarebeschleunigung aktivieren.

Standardmäßig ist die Hardwarebeschleunigung in Android aktiviert. Apps können die Hardwarebeschleunigung global deaktivieren. Wenn die Hardwarebeschleunigung in Ihrer App global deaktiviert ist, aktivieren Sie die Einstellung für Activity-Klassen, in denen Anzeigen ausgeliefert werden.

Wenn Sie die Hardwarebeschleunigung global aktivieren und Ihre App nicht wie erwartet funktioniert, können Sie die Hardwarebeschleunigung für einzelne Aktivitäten steuern. Verwenden Sie das Attribut android:hardwareAccelerated für die Elemente application und activity in Ihrer AndroidManifest.xml-Datei, um die Hardwarebeschleunigung zu aktivieren oder zu deaktivieren.

Im folgenden Beispiel wird die Hardwarebeschleunigung global für die App aktiviert und für eine Aktivität deaktiviert:

<application android:hardwareAccelerated="true">
    <!-- For activities that use ads, hardwareAcceleration should be true. -->
    <activity android:hardwareAccelerated="true" />
    <!-- For activities that don't use ads, hardwareAcceleration can be false. -->
    <activity android:hardwareAccelerated="false" />
</application>

Nächste Schritte

Nachdem Sie eine Anzeige geladen haben, rendern Sie sie in Ihrer React Native-Benutzeroberfläche mit den Komponenten NativeAdView und NativeAdMediaView. Weitere Informationen finden Sie unter Native Anzeigen präsentieren.