Erste Schritte

Überblick

Capacitor-Community-Plugin für natives AdMob. Dieses Plugin kapselt das Google Mobile Ads SDK für iOS und Android, sodass Sie Banner-, Interstitial-, belohnte, belohnte Interstitial- und App-Open-Anzeigen in Capacitor-Anwendungen darstellen können. Es deckt außerdem die Einwilligung über Google User Messaging Platform (UMP) und Hilfsfunktionen für App Tracking Transparency unter iOS ab.

Installation

Dieses Plugin enthält das Google Mobile Ads SDK bereits. Installieren Sie das Paket und ergänzen Sie anschließend Ihre AdMob-Anwendungs-ID in AndroidManifest / Info.plist. Die Google-Einstiegsanleitungen für Android und iOS erklären Anwendungs-IDs und SKAdNetwork-Bezeichner, also Apples Kennungen zur Anzeigenkonversion. Fügen Sie keine zweite Mobile-Ads-Abhängigkeit hinzu.

Dieses Plugin richtet sich an @capacitor-community/admob v8 und Capacitor 8. Es unterstützt iOS ab 15 und Android API ab 24.

npm install @capacitor-community/admob
npx cap sync

Wenn Sie weiterhin Capacitor 7 verwenden, installieren Sie @capacitor-community/admob@7.

Versionen des Google Mobile Ads SDK

Diese Hauptversion legt Google Mobile Ads SDK 25.4.x unter Android und 13.6.0 unter iOS fest, sowohl für Swift Package Manager als auch für CocoaPods. Behalten Sie diese Versionen bei, sofern kein konkreter Bedarf besteht. Googles Next-Gen SDK für Android ist für die nächste Plugin-Hauptversion vorgesehen. Die Gründe für diese Versionsbindung beschreibt Migration.

Android-Konfiguration

Ergänzen Sie in android/app/src/main/AndroidManifest.xml unter <application> Folgendes:

<meta-data
  android:name="com.google.android.gms.ads.APPLICATION_ID"
  android:value="@string/admob_app_id" />

In android/app/src/main/res/values/strings.xml:

<string name="admob_app_id">[APP_ID]</string>

Ersetzen Sie [APP_ID] durch Ihre AdMob-Anwendungs-ID, nicht durch eine Anzeigenblock-ID.

Variablen

Sie können diese Werte weglassen. Überschreiben Sie sie in der variables.gradle Ihrer Anwendung nur, wenn Sie eine bestimmte Artefaktversion benötigen:

iOS-Konfiguration

Ergänzen Sie innerhalb des äußersten <dict> in ios/App/App/Info.plist Folgendes:

<key>GADIsAdManagerApp</key>
<true/>
<key>GADApplicationIdentifier</key>
<string>[APP_ID]</string>
<key>SKAdNetworkItems</key>
<array>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>cstr6suwn9.skadnetwork</string>
  </dict>
</array>
<key>NSUserTrackingUsageDescription</key>
<string>This identifier will be used to deliver personalized ads to you.</string>

Ersetzen Sie [APP_ID] durch Ihre AdMob-Anwendungs-ID und beschreiben Sie die tatsächliche Tracking-Verwendung in NSUserTrackingUsageDescription.

Der Ausschnitt SKAdNetworkItems enthält Googles eigene Kennung. Ergänzen Sie die anderen IDs aus Googles iOS-Einrichtungsanleitung.

Fehlerbehebung

Wenn CocoaPods Google-Mobile-Ads-SDK nicht auflösen kann:

[error] Error running update: Analyzing dependencies
[!] CocoaPods could not find compatible versions for pod "Google-Mobile-Ads-SDK":

Führen Sie in ios/ pod repo update aus und anschließend erneut npx cap sync ios.

Das erste Testbanner

Initialisieren Sie nach Installation und Plattformkonfiguration das SDK, fragen Sie die Einwilligung ab und zeigen Sie ein Google-Demobanner an. Verwenden Sie die plattformspezifischen Banner-IDs aus Tests. Erstellen Sie für diese erste Prüfung keinen eigenen Anzeigenblock.

Rufen Sie startAdMob aus einer Nutzeraktion oder nach Bereitschaft der UI auf, beispielsweise über eine Schaltfläche oder einen Hook nach der Navigation, nicht ausschließlich bei der Modulauswertung.

import { Capacitor } from '@capacitor/core';
import { AdMob, AdmobConsentStatus, BannerAdOptions, BannerAdSize, BannerAdPosition } from '@capacitor-community/admob';

const bannerAdId =
  Capacitor.getPlatform() === 'ios'
    ? 'ca-app-pub-3940256099942544/2934735716'
    : 'ca-app-pub-3940256099942544/6300978111';

async function startAdMob() {
  await AdMob.initialize();

  let consentInfo = await AdMob.requestConsentInfo();
  if (consentInfo.isConsentFormAvailable && consentInfo.status === AdmobConsentStatus.REQUIRED) {
    consentInfo = await AdMob.showConsentForm();
  }

  if (!consentInfo.canRequestAds) {
    // Einwilligung noch nicht bereit — es wird kein Banner angezeigt.
    return;
  }

  const options: BannerAdOptions = {
    adId: bannerAdId,
    adSize: BannerAdSize.ADAPTIVE_BANNER,
    position: BannerAdPosition.BOTTOM_CENTER,
    margin: 0,
  };
  await AdMob.showBanner(options);
}

Erwartetes Ergebnis: Bei canRequestAds true erscheint ein Google-Testbanner am unteren Rand des nativen Bildschirms. Bei canRequestAds false kehrt die Funktion zurück und es wird kein Banner angezeigt. Das Banner liegt über der WebView und kann HTML verdecken. Informationen zum Einrücken Ihres Layouts finden Sie unter Banner-Anzeigen. Einzelheiten: Konfiguration, Einwilligung und Tests.

Nach dem Werbeziel wählen

Dokumentation

Beginnen Sie mit der obigen Installation, dann mit Konfiguration und Einwilligung. Führen Sie das erste Testbanner aus und verwenden Sie anschließend Tests für Demo-Anzeigenblöcke und Geräte. Wählen Sie ein Anzeigenformat aus der obigen Tabelle. Dieselben Anleitungen finden Sie auch auf der Dokumentationsseite auf Englisch und Japanisch. Wenn Sie dieses README auf npm geöffnet haben, verwenden Sie die Website für die Anleitungen; die Dateien unter docs/ liegen im GitHub-Repository. Methodensignaturen stehen im folgenden API-Abschnitt.

• Konfiguration — AdMob.initialize und SDK-Optionen.
• Einwilligung — Datenschutzeinwilligung und iOS-Tracking-Berechtigung.
• Tests — Demo-Anzeigenblöcke, Testgeräte und Einwilligungstests.
• Banner-Anzeigen — Banner-Optionen, Lebenszyklus und Ereignisse.
• Vollbildanzeigen:
  • Interstitial-Anzeigen — Laden, Anzeigen und mehrere vorbereitete Anzeigen.
  • Belohnte Anzeigen — belohnte Videos, belohnte Interstitials und serverseitige Verifizierung.
• App-Open-Anzeigen — Laden und Anzeigen beim Wechsel in den Vordergrund.
• Anzeigenereignisse — gemeinsame Lebenszyklusereignisse, Fehler und Umsatzdaten.
• Migrationsanleitung — historische Hinweise beim Wechsel von älteren Plugin-Versionen.