Google Mobile Ads SDK für React Native einrichten

Wenn Sie Anzeigen ausliefern und Einnahmen erzielen möchten, müssen Sie Google Mobile Ads SDK for React Native in Ihre React Native-App einbinden. In diesem Leitfaden wird beschrieben, wie Sie Google Mobile Ads SDK for React Native installieren und initialisieren und ein Anzeigenformat auswählen.

Vorbereitung

Bevor Sie fortfahren, benötigen Sie Folgendes:

  • React Native 0.85.0 oder höher.
  • Ein AdMob-Konto und eine App-ID. Informationen zum Abrufen einer App-ID finden Sie unter Eine App in AdMob einrichten.

  • Die folgenden Android-Elemente:

    • Android API-Level 24 oder höher.
    • Die aktuelle Version von Android Studio.
    • Android-Gradle-Plug-in (AGP) Version 8.0 oder höher

  • Die folgenden iOS-Elemente:

    • iOS-Version 13.0 oder höher.
    • Xcode-Version 16.0 oder höher und aktivierte Befehlszeilentools.
    • CocoaPods

Google Mobile Ads SDK for React Native installieren

So installieren Sie Google Mobile Ads SDK for React Native:

  1. Laden Sie den Ordner gma-sdk-react-native von Google Drive herunter.

  2. Extrahieren Sie das ZIP-Archiv in ein separates Verzeichnis außerhalb Ihres Arbeitsverzeichnisses. Dadurch können Konflikte mit den Konfigurationsdateien Ihres Projekts vermieden werden.

  3. Erstellen Sie im Stammverzeichnis Ihres Projekts ein local_packages/-Verzeichnis.

  4. Kopieren Sie in diesem Verzeichnis die Datei mobile-ads-0.1.0.tgz:

    mkdir -p local_packages
cp EXTRACT_DIR/gma-sdk-react-native/google-mobile-ads/mobile-ads-0.1.0.tgz local_packages/

    Ersetzen Sie EXTRACT_DIR durch den Pfad zu dem Verzeichnis, in das Sie das Archiv extrahiert haben.

  5. Installieren Sie das Paket mit Ihrem bevorzugten Paketmanager:

    npm

    npm install ./local_packages/mobile-ads-0.1.0.tgz

    Garn

    yarn add ./local_packages/mobile-ads-0.1.0.tgz

Eigene App konfigurieren

Wenn Sie Ihre App mit Plattformabhängigkeiten konfigurieren möchten, fügen Sie Ihre AdMob-App-IDs der Datei app.json im Stammverzeichnis Ihres Projekts hinzu.

Verwenden Sie zum Testen die AdMob-Beispiel-App-IDs aus dem folgenden Beispiel:

{
  "name": "APP_NAME",
  "displayName": "APP_NAME",
  "googleMobileAds": {
    "android_app_id": "ca-app-pub-3940256099942544~3347511713",
    "ios_app_id": "ca-app-pub-3940256099942544~1458002511"
  }
}

Während des Build-Vorgangs fügt Google Mobile Ads SDK for React Native das Attribut android_app_id in die Datei AndroidManifest.xml und das Attribut ios_app_id in die erstellte Datei Info.plist als Schlüssel GADApplicationIdentifier ein.

Wählen Sie für plattformspezifische Optionen oder die manuelle Konfiguration eine der folgenden Plattformen aus:

Android

Wenn Sie mehrere Build-Konfigurationen verwalten oder React Native in eine vorhandene Android-App einbinden, fügen Sie Ihre AdMob-App-ID im <application>-Element der AndroidManifest.xml-Datei Ihres Projekts anstelle der app.json-Datei hinzu:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
  <application>
    <!-- Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713 -->
    <meta-data
        android:name="com.google.android.gms.ads.APPLICATION_ID"
        android:value="SAMPLE_APP_ID"
        tools:replace="android:value"/>
  </application>
</manifest>

Gradle löst Android-Abhängigkeiten während des Builds automatisch auf.

iOS

Gehen Sie folgendermaßen vor:

  1. Installieren Sie CocoaPods-Abhängigkeiten aus dem Verzeichnis ios/ Ihres Projekts:

    pod install --repo-update

    Alternativ können Sie CocoaPods-Abhängigkeiten aus dem Stammverzeichnis Ihres Projekts installieren:

    npx pod-install

    Durch die automatische Verknüpfung von CocoaPods wird das Xcode-Build-Phasenscript konfiguriert, das das Attribut ios_app_id aus der Datei app.json in die erstellte Info.plist-Datei einfügt.

  2. Fügen Sie in der Datei Info.plist Ihrer App einen SKAdNetworkItems-Schlüssel im Element <dict> für Google cstr6suwn9.skadnetwork und ausgewählte Drittanbieterkäufer hinzu.

    Das folgende Beispiel zeigt eine vollständige Info.plist-Datei, die das erforderliche SKAdNetworkItems-Array enthält:

    Vollständiges Beispiel

    <key>SKAdNetworkItems</key>
<array>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>cstr6suwn9.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>4fzdc2evr5.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>2fnua5tdw4.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>ydx93a7ass.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>p78axxw29g.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>v72qych5uu.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>ludvb6z3bs.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>cp8zw746q7.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>3sh42y64q3.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>c6k4g5qg8m.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>s39g8k73mm.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>wg4vff78zm.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>3qy4746246.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>f38h382jlk.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>hs6bdukanm.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>mlmmfzh3r3.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>v4nxqhlyqp.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>wzmmz9fp6w.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>su67r6k2v3.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>yclnxrl5pm.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>t38b2kh725.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>7ug5zh24hu.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>gta9lk7p23.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>vutu7akeur.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>y5ghdn5j9k.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>v9wttpbfk9.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>n38lu8286q.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>47vhws6wlr.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>kbd757ywx3.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>9t245vhmpl.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>a2p9lx4jpn.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>22mmun2rn5.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>44jx6755aq.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>k674qkevps.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>4468km3ulz.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>2u9pt9hc89.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>8s468mfl3y.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>klf5c3l5u5.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>ppxm28t8ap.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>kbmxgpxpgc.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>uw77j35x4d.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>578prtvx9j.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>4dzt52r2t5.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>tl55sbb4fm.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>c3frkrj4fj.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>e5fvkxwrpn.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>8c4e2ghe7u.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>3rd42ekr43.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>97r2b46745.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>3qcr597p9d.skadnetwork</string>
  </dict>
</array>

Google Mobile Ads SDK for React Native initialisieren

Rufen Sie vor dem Laden von Anzeigen die Methode initialize auf, um Google Mobile Ads SDK for React Native zu initialisieren. Rufen Sie die Methode initialize einmal beim Start der App auf, z. B. in der Stammkomponente App.tsx.

Im folgenden Beispiel wird Google Mobile Ads SDK for React Native initialisiert:

import {InitializationStatus, initialize} from '@google/mobile-ads';
import {useEffect, useState} from 'react';
import {Text, View} from 'react-native';

/**
 * Root application component demonstrating Google Mobile Ads SDK initialization.
 */
export function App() {
  const [isInitialized, setIsInitialized] = useState<boolean>(false);

  useEffect(() => {
    // Initialize the Google Mobile Ads SDK.
    initialize({}, (status: InitializationStatus) => {
      console.log('Mobile Ads SDK initialized successfully:', status);
      setIsInitialized(true);
    });
  }, []);

  return (
    <View>
      <Text>
        {isInitialized ? 'Mobile Ads SDK Ready' : 'Initializing SDK...'}
      </Text>
    </View>
  );
}

Wählen Sie ein Anzeigenformat aus.

Nachdem Sie Google Mobile Ads SDK for React Native initialisiert haben, können Sie Anzeigen implementieren. AdMob bietet die folgenden Anzeigenformate:

Format Beschreibung Dokumentation
App-Start Wird eingeblendet, wenn Nutzer Ihre App öffnen oder zu ihr zurückwechseln. Die Anzeige wird als Overlay über dem Ladebildschirm eingeblendet. App-Start-Anzeigen einrichten
Interstitial Vollbildanzeigen, die die Benutzeroberfläche der Host-App überlagern. Diese Anzeigen werden an natürlichen Übergangspunkten innerhalb einer App eingeblendet, beispielsweise zwischen Aktivitäten oder während der Pause zwischen Levels in einem Spiel. Interstitial-Anzeigen einrichten
Verfügbar Vollbildanzeigen, bei denen Nutzer für das Ansehen von Videoanzeigen oder die Interaktion mit spielbaren Anzeigen eine Prämie erhalten. Anzeigen mit Prämie einrichten
Interstitial mit Prämie Ein auf Incentives basierendes Anzeigenformat, das automatisch an natürlichen Übergangspunkten in einer App ausgeliefert wird. Sie können damit Nutzer, die sich die Werbung ansehen, mit Prämien belohnen. Interstitial-Anzeigen mit Prämie einrichten