Konfigurowanie pakietu SDK do reklam mobilnych Google na potrzeby React Native

Aby wyświetlać reklamy i generować przychody, zintegruj Google Mobile Ads SDK for React Native z aplikacją React Native. Z tego przewodnika dowiesz się, jak zainstalować i zainicjować Google Mobile Ads SDK for React Native oraz jak wybrać format reklamy.

Wymagania wstępne

Zanim przejdziesz dalej, przygotuj te informacje:

  • React Native w wersji 0.85.0 lub nowszej.
  • Konto AdMob i identyfikator aplikacji. Aby uzyskać identyfikator aplikacji, przeczytaj artykuł Konfigurowanie aplikacji w AdMob.

  • Te elementy na Androidzie:

    • Android API na poziomie 24 lub nowszym.
    • najnowszą wersję Android Studio,
    • Wtyczka Androida do obsługi Gradle (AGP) w wersji 8.0 lub nowszej.

  • Te elementy na iOS:

    • iOS w wersji 13.0 lub nowszej,
    • Xcode w wersji 16.0 lub nowszej z włączonymi narzędziami wiersza poleceń.
    • CocoaPods

Zainstaluj element Google Mobile Ads SDK for React Native

Aby zainstalować Google Mobile Ads SDK for React Native, wykonaj te czynności:

  1. Pobierz folder gma-sdk-react-native z Dysku Google.

  2. Rozpakuj plik ZIP w osobnym katalogu poza katalogiem roboczym projektu. Dzięki temu możesz uniknąć konfliktów z plikami konfiguracji projektu.

  3. W katalogu głównym projektu utwórz katalog local_packages/.

  4. Skopiuj plik mobile-ads-0.1.0.tgz w tym katalogu:

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

    Zastąp EXTRACT_DIR ścieżką do katalogu, w którym zostało wyodrębnione archiwum.

  5. Zainstaluj pakiet za pomocą preferowanego menedżera pakietów:

    npm

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

    włóczka

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

Konfiguracja aplikacji

Aby skonfigurować aplikację z zależnościami platformy, dodaj identyfikatory aplikacji AdMob do pliku app.json w katalogu głównym projektu.

Do testowania użyj przykładowych identyfikatorów aplikacji w AdMob pokazanych w tym przykładzie:

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

Podczas kompilacji Google Mobile Ads SDK for React Native dodaje właściwość android_app_id do pliku AndroidManifest.xml i właściwość ios_app_id w skompilowanym pliku Info.plist jako klucz GADApplicationIdentifier.

Aby uzyskać opcje dotyczące konkretnej platformy lub ręcznej konfiguracji, wybierz jedną z tych platform:

Android

Jeśli zarządzasz wieloma konfiguracjami kompilacji lub integrujesz React Native z istniejącą aplikacją na Androida, dodaj identyfikator aplikacji AdMob w elemencie <application> pliku AndroidManifest.xml projektu zamiast w pliku app.json:

<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 automatycznie rozwiązuje zależności Androida podczas kompilacji.

iOS

Wykonaj te czynności:

  1. Zainstaluj zależności CocoaPods z katalogu ios/ projektu:

    pod install --repo-update

    Możesz też zainstalować zależności CocoaPods z katalogu głównego projektu:

    npx pod-install

    Automatyczne łączenie CocoaPods konfiguruje skrypt fazy kompilacji Xcode, który dodaje właściwość ios_app_id z pliku app.json do skompilowanego pliku Info.plist.

  2. W pliku Info.plist aplikacji dodaj klucz SKAdNetworkItems w elemencie <dict> dla Google cstr6suwn9.skadnetwork i wybranych kupujących zewnętrznych.

    Poniższy przykład pokazuje kompletny plik Info.plist, który zawiera wymaganą tablicę SKAdNetworkItems:

    Kompletny przykład

    <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>

Inicjowanie: Google Mobile Ads SDK for React Native

Zanim wczytasz reklamy, wywołaj metodę initialize, aby zainicjować Google Mobile Ads SDK for React Native. Wywołaj metodę initialize raz podczas uruchamiania aplikacji, np. w komponencie głównym App.tsx.

Poniższy przykład inicjuje Google Mobile Ads SDK for React Native:

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>
  );
}

Wybierz format reklamy

Po zainicjowaniu Google Mobile Ads SDK for React Native możesz wdrożyć reklamy. AdMob oferuje te formaty reklam:

Format Opis Dokumentacja
Reklama przy otwarciu aplikacji Wyświetla się, gdy użytkownicy otwierają aplikację lub do niej wracają, nakładając się na ekran wczytywania lub ekran powitalny. Konfigurowanie reklam wyświetlanych przy otwarciu aplikacji
Pełnoekranowa Reklamy pełnoekranowe, które zakrywają interfejs aplikacji, w której się wyświetlają. Wyświetlają się zwykle w naturalnych punktach przejścia w aplikacji, np. między działaniami lub podczas przerwy między poziomami gry. Konfigurowanie reklam pełnoekranowych
Z nagrodą Reklamy pełnoekranowe, które nagradzają użytkowników za obejrzenie reklam wideo lub interakcję z reklamami demonstracyjnymi gier. Konfigurowanie reklam z nagrodą
Reklama pełnoekranowa z nagrodą Format reklamy zachęcającej użytkownika do jej obejrzenia, który umożliwia oferowanie nagród za oglądanie reklam wyświetlających się automatycznie w naturalnych momentach przejściowych aplikacji. Konfigurowanie reklam pełnoekranowych z nagrodą