React Native Werbung integrieren: AdMob und Alternativen

1. Ad-Formate und warum die Architektur wichtig ist

Werbung in einer React-Native-App lässt sich über vier grundlegende Formate integrieren, die jeweils ein anderes Nutzungsszenario bedienen. Banner-Anzeigen belegen dauerhaft einen kleinen Bereich des Bildschirms und liefern niedrige, aber konstante Einnahmen. Interstitial-Anzeigen erscheinen vollflächig an natürlichen Übergangspunkten, etwa zwischen zwei Levels eines Spiels oder nach Abschluss einer Aufgabe. Rewarded-Video-Anzeigen bieten Nutzern eine Belohnung im Austausch für das freiwillige Ansehen eines Videos, während native Anzeigen sich optisch in den bestehenden Content-Feed einfügen.

Die Entscheidung, wo genau Werbung integrieren in der App-Architektur passiert, beeinflusst direkt sowohl Einnahmen als auch Nutzerbindung. Zu aggressive Interstitial-Platzierung treibt Nutzer aus der App, während zu zurückhaltende Platzierung Umsatzpotenzial verschenkt. Die technische Grundlage für all diese Formate in React Native ist AdMob über das offizielle Google-Paket react-native-google-mobile-ads, das native SDKs für iOS und Android hinter einer gemeinsamen JavaScript-API bündelt.

Ein oft unterschätzter Aspekt ist, dass Werbe-SDKs tief in native Plattform-APIs eingreifen, insbesondere in Tracking- und Identifier-Mechanismen. Wer AdMob integriert, ohne Consent-Flows und Tracking-Berechtigungen von Anfang an mitzudenken, riskiert App-Store-Ablehnungen und rechtliche Probleme, sobald die App live geht. Die folgenden Abschnitte behandeln deshalb nicht nur die Implementierung der Ad-Formate selbst, sondern auch die begleitende Consent- und Mediation-Infrastruktur.

2. AdMob-Account und Ad-Units einrichten

Bevor im Code überhaupt etwas passiert, muss im AdMob-Dashboard eine App registriert und für jedes gewünschte Ad-Format eine eigene Ad-Unit angelegt werden. Jede Ad-Unit erhält eine eindeutige ID, die später im React-Native-Code referenziert wird, getrennt für iOS und Android, da beide Plattformen eigene App-IDs und Ad-Unit-IDs benötigen. Es empfiehlt sich, für Banner, Interstitial und Rewarded jeweils eigene Ad-Units anzulegen, auch wenn sie inhaltlich zusammengehören, weil AdMob darüber granulare Performance-Daten pro Platzierung liefert.

Während der Entwicklung sollte ausschließlich mit den von Google bereitgestellten Test-Ad-Unit-IDs gearbeitet werden, niemals mit echten Produktions-IDs. Das Anzeigen echter Werbung während der lokalen Entwicklung verstößt gegen die AdMob-Richtlinien und kann im schlimmsten Fall zur Sperrung des gesamten Publisher-Kontos führen, weil Google ungültigen Traffic wie wiederholte Entwickler-Klicks als Betrugsversuch werten kann.

3. react-native-google-mobile-ads installieren und konfigurieren

Die Installation erfolgt über npm oder yarn, gefolgt von einer Konfiguration in der app.json bei Expo-Projekten beziehungsweise direkter nativer Konfiguration bei Bare React Native. Auf iOS muss zusätzlich der SKAdNetwork-Eintrag in der Info.plist ergänzt werden, damit Werbenetzwerke plattformübergreifende Attribution ohne individuelle Nutzer-Identifizierung durchführen können. Auf Android wird die App-ID in der AndroidManifest.xml als Meta-Daten-Eintrag hinterlegt.

Bei Expo-Projekten übernimmt das Config-Plugin von react-native-google-mobile-ads diese nativen Anpassungen automatisch beim Prebuild-Schritt, was manuelle Fehler in Info.plist und AndroidManifest.xml vermeidet. Wichtig ist, dass die App-IDs aus dem AdMob-Dashboard exakt in die Plugin-Konfiguration übernommen werden, da eine falsche App-ID dazu führt, dass überhaupt keine Anzeigen geladen werden, ohne dass die Fehlermeldung dies immer eindeutig erkennen lässt.

# Install the AdMob SDK wrapper for React Native
npm install react-native-google-mobile-ads

# Expo: run prebuild after adding the config plugin to app.json
npx expo prebuild --clean

{
  "expo": {
    "plugins": [
      [
        "react-native-google-mobile-ads",
        {
          "androidAppId": "ca-app-pub-XXXXXXXXXXXXXXXX~YYYYYYYYYY",
          "iosAppId": "ca-app-pub-XXXXXXXXXXXXXXXX~ZZZZZZZZZZ",
          "userTrackingUsageDescription": "This identifier will be used to deliver personalized ads."
        }
      ]
    ]
  }
}

4. Banner-Werbung implementieren

Banner-Anzeigen werden über die BannerAd-Komponente eingebunden, die eine feste oder adaptive Größe annehmen kann. Adaptive Banner passen sich automatisch an die Bildschirmbreite an und liefern in der Regel eine bessere Fill Rate als starre Standardgrößen, weil mehr Werbetreibende für das dynamisch berechnete Format bieten können. Ein Banner sollte niemals so platziert werden, dass er interaktive UI-Elemente der eigentlichen App verdeckt oder versehentliche Klicks provoziert, da AdMob solche Platzierungen als Richtlinienverstoß werten kann.

Ein häufiger Fehler ist, Banner-Komponenten bei jedem Re-Render der Elternkomponente neu zu mounten, was zu unnötigen Ad-Requests und einer schlechteren Nutzererfahrung führt. Die Banner-Komponente sollte daher in einer stabilen Position im Komponentenbaum leben, idealerweise außerhalb von Listen mit häufigen Neu-Renderings, und über onAdFailedToLoad einen Fallback-Zustand behandeln, falls keine Anzeige verfügbar ist.

// BannerAdSlot.tsx - adaptive banner with graceful fallback
import { View } from 'react-native';
import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';

const adUnitId = __DEV__ ? TestIds.ADAPTIVE_BANNER : 'ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB';

export function BannerAdSlot() {
  return (
    <View style={{ alignItems: 'center' }}>
      <BannerAd
        unitId={adUnitId}
        size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
        requestOptions={{ requestNonPersonalizedAdsOnly: false }}
        onAdFailedToLoad={(error) => console.warn('Banner failed to load', error)}
      />
    </View>
  );
}

5. Interstitial Ads mit Frequency Capping

Interstitial-Anzeigen folgen einem klaren Lebenszyklus: laden, warten bis geladen, dann an einem sinnvollen Übergangspunkt anzeigen. Der entscheidende Unterschied zu Banner-Anzeigen ist, dass Interstitials im Voraus geladen werden müssen, da der Ladevorgang selbst spürbare Zeit braucht und ein sofortiges Anzeigen ohne Vorladung meist scheitert. Ein sauberes Muster lädt die nächste Anzeige bereits, sobald die aktuelle geschlossen wurde, damit beim nächsten Trigger-Punkt keine Wartezeit entsteht.

Frequency Capping, also die Begrenzung, wie oft ein Nutzer innerhalb eines Zeitraums ein Interstitial sieht, ist sowohl für die Nutzererfahrung als auch für die langfristigen eCPM-Werte entscheidend. Wird ein Interstitial bei jedem einzelnen Navigationsschritt gezeigt, sinkt die Verweildauer messbar, und Werbetreibende bewerten die Platzierung in der Folge niedriger. Eine bewährte Faustregel ist, Interstitials frühestens alle drei bis fünf Nutzerinteraktionen und niemals beim allerersten App-Start zu zeigen.

// InterstitialAdManager.ts - preload and show with frequency capping
import { InterstitialAd, AdEventType, TestIds } from 'react-native-google-mobile-ads';

const adUnitId = __DEV__ ? TestIds.INTERSTITIAL : 'ca-app-pub-XXXXXXXXXXXXXXXX/CCCCCCCCCC';
const interstitial = InterstitialAd.createForAdRequest(adUnitId);

let actionsSinceLastAd = 0;
const MIN_ACTIONS_BETWEEN_ADS = 4;

interstitial.addAdEventListener(AdEventType.LOADED, () => {
  console.log('Interstitial preloaded and ready');
});

interstitial.addAdEventListener(AdEventType.CLOSED, () => {
  actionsSinceLastAd = 0;
  interstitial.load(); // preload the next one immediately
});

interstitial.load();

export function maybeShowInterstitial() {
  actionsSinceLastAd += 1;
  if (actionsSinceLastAd >= MIN_ACTIONS_BETWEEN_ADS && interstitial.loaded) {
    interstitial.show();
  }
}

6. Rewarded Video Ads für Belohnungs-Flows

Rewarded-Anzeigen unterscheiden sich fundamental von den beiden anderen Formaten, weil der Nutzer die Anzeige freiwillig startet, im Austausch für eine klar kommunizierte Belohnung wie zusätzliche Spielzüge, Premium-Inhalte für begrenzte Zeit oder virtuelle Währung. Diese Freiwilligkeit führt in der Praxis zu deutlich höherer Akzeptanz und besseren Completion-Rates als bei erzwungenen Interstitials, weil Nutzer den Tausch bewusst eingehen.

Technisch ist entscheidend, die Belohnung erst nach dem EARNED_REWARD-Event zu vergeben, nicht bereits beim Start der Anzeige. Ein Nutzer, der das Video vorzeitig abbricht, darf die Belohnung nicht erhalten, sonst wird das Anreizsystem trivial ausnutzbar. Ebenso wichtig ist ein klar sichtbarer, nicht überspringbarer Countdown während der Mindestansichtsdauer, damit für Nutzer transparent ist, wann die Belohnung sicher zusteht.

// RewardedAdManager.ts - grant reward only after EARNED_REWARD event
import { RewardedAd, RewardedAdEventType, AdEventType, TestIds } from 'react-native-google-mobile-ads';

const adUnitId = __DEV__ ? TestIds.REWARDED : 'ca-app-pub-XXXXXXXXXXXXXXXX/DDDDDDDDDD';
const rewarded = RewardedAd.createForAdRequest(adUnitId);

rewarded.addAdEventListener(RewardedAdEventType.EARNED_REWARD, (reward) => {
  grantUserReward(reward.amount, reward.type); // only here, never before this event
});

rewarded.addAdEventListener(AdEventType.CLOSED, () => {
  rewarded.load(); // preload the next rewarded ad
});

rewarded.load();

export function showRewardedAd() {
  if (rewarded.loaded) {
    rewarded.show();
  }
}

function grantUserReward(amount: number, type: string) {
  console.log(`Granting ${amount} ${type} to user`);
}

7. Mediation für höhere Fill Rate und eCPM

AdMob allein deckt nicht immer jede Anfrage mit einem passenden Gebot ab, besonders in weniger lukrativen Ländern oder Nischen-Zielgruppen. Mediation löst dieses Problem, indem mehrere Werbenetzwerke gleichzeitig um dieselbe Ad-Anfrage konkurrieren, entweder im klassischen Waterfall-Modell, bei dem Netzwerke nacheinander in absteigender historischer eCPM-Reihenfolge angefragt werden, oder im moderneren Bidding-Modell, bei dem alle Netzwerke in Echtzeit gleichzeitig bieten.

AdMob unterstützt Mediation direkt im Dashboard und erlaubt die Einbindung von Netzwerken wie Meta Audience Network als zusätzliche Bietpartner. Jedes zusätzliche Mediation-Netzwerk erfordert allerdings ein eigenes natives SDK und damit zusätzliches App-Gewicht sowie zusätzliche Consent-Anforderungen, weshalb die Anzahl der eingebundenen Netzwerke gegen den Grenznutzen der verbesserten Fill Rate abgewogen werden sollte.

8. DSGVO-Consent und App Tracking Transparency

Für Nutzer aus dem europäischen Wirtschaftsraum ist eine rechtskonforme Einwilligung vor dem Laden personalisierter Werbung verpflichtend. Googles User Messaging Platform (UMP SDK) stellt dafür einen vorgefertigten Consent-Dialog bereit, der automatisch erkennt, ob der Nutzer aus einer Region mit entsprechenden Anforderungen stammt, und erst nach expliziter Zustimmung personalisierte Anzeigen freigibt. Ohne Einwilligung liefert AdMob weiterhin nicht-personalisierte Anzeigen aus, allerdings mit spürbar niedrigeren eCPM-Werten.

Auf iOS kommt zusätzlich die App Tracking Transparency (ATT) Anfrage hinzu, die unabhängig von der DSGVO-Einwilligung eingeblendet werden muss, bevor der Identifier for Advertisers (IDFA) für plattformübergreifendes Tracking genutzt werden darf. Beide Consent-Mechanismen müssen in der richtigen Reihenfolge und vor dem ersten Ad-Request ausgelöst werden, da ein verspäteter oder fehlender Consent-Flow sowohl gegen App-Store-Richtlinien als auch gegen europäisches Datenschutzrecht verstößt.

// iOS reference: requesting App Tracking Transparency before ad requests
import AppTrackingTransparency

func requestTrackingAuthorization() {
    ATTrackingManager.requestTrackingAuthorization { status in
        switch status {
        case .authorized:
            print("Tracking authorized, personalized ads allowed")
        case .denied, .restricted, .notDetermined:
            print("Tracking denied, serve non-personalized ads only")
        @unknown default:
            break
        }
    }
}

9. Testing, Fallstricke und Vergleich zu Alternativen

Der häufigste Fehler bei der ersten AdMob-Integration ist das Anzeigen von Werbung, bevor die App überhaupt einen sinnvollen Nutzerwert geliefert hat, etwa ein Interstitial direkt beim allerersten App-Start. Das führt nicht nur zu schlechten Store-Bewertungen, sondern kann auch von AdMob selbst als Richtlinienverstoß eingestuft werden. Ein zweiter häufiger Fehler ist ungültiger Traffic durch versehentliche Eigenklicks während Tests mit Produktions-Ad-Unit-IDs, was im Extremfall zur dauerhaften Kontosperrung führt.

Neben AdMob haben sich AppLovin MAX und Unity Ads als ernstzunehmende Alternativen etabliert, insbesondere für Gaming-Apps mit hohem Rewarded-Ad-Anteil. Die Wahl zwischen den Anbietern hängt stark von der Zielgruppe, dem App-Genre und der bestehenden Mediation-Strategie ab.

10. Zusammenfassung

Werbung in React Native integrieren heißt in der Praxis, drei Ad-Formate technisch und strategisch sauber umzusetzen: Banner für konstante Grundeinnahmen, Interstitials mit striktem Frequency Capping für Übergangspunkte, und Rewarded Ads für freiwillige, hochakzeptierte Interaktionen. AdMob über react-native-google-mobile-ads bildet dafür die technische Basis, ergänzt durch Mediation für höhere Fill Rate und die verpflichtende Consent-Infrastruktur aus UMP SDK und App Tracking Transparency.

Wer die Reihenfolge Consent vor Ad-Request und Vorladen vor Anzeigen konsequent einhält, vermeidet die häufigsten Fallstricke: Store-Ablehnungen, Kontosperrungen durch ungültigen Traffic und schlechte Nutzerbindung durch zu aggressive Interstitial-Platzierung. AppLovin MAX und Unity Ads bleiben als Alternativen relevant, besonders für Gaming-Apps mit starkem Rewarded-Fokus, während AdMob durch die breiteste Marktabdeckung und geringsten Integrationsaufwand für die meisten Apps der solide Startpunkt bleibt.

11. FAQ: React Native Werbung integrieren mit AdMob