Как настроить Google Mobile Ads SDK для React Native

Чтобы показывать рекламу и получать доход, интегрируйте Google Mobile Ads SDK for React Native в свое приложение React Native. В этом руководстве рассказывается, как установить и инициализировать Google Mobile Ads SDK for React Native, а также выбрать формат объявлений.

Требования

Прежде чем продолжить, подготовьте следующее:

  • React Native 0.85.0 или более поздней версии.
  • Аккаунт AdMob и идентификатор приложения. Подробнее о том, как добавить приложение в AdMob…

  • Следующие объекты Android:

    • Android API уровня 24 или более поздней версии.
    • Последняя версия Android Studio.
    • Плагин Android Gradle (AGP) версии 8.0 или более поздней.

  • Следующие объекты iOS:

    • iOS 13.0 или более поздней версии.
    • Xcode 16.0 или более поздней версии с включенными инструментами командной строки.
    • CocoaPods

Установите приложение "Google Mobile Ads SDK for React Native"

Чтобы установить Google Mobile Ads SDK for React Native, выполните следующие действия:

  1. Скачайте папку gma-sdk-react-native с Google Диска.

  2. Распакуйте ZIP-архив в отдельный каталог за пределами рабочего каталога проекта. Это поможет избежать конфликтов с файлами конфигурации проекта.

  3. В корневом каталоге проекта создайте каталог local_packages/.

  4. Скопируйте файл 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/

    Замените EXTRACT_DIR путем к каталогу, в который вы распаковали архив.

  5. Установите пакет с помощью предпочитаемого менеджера пакетов:

    npm

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

    пряжа

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

Настройка приложения

Чтобы настроить приложение с зависимостями платформы, добавьте идентификаторы приложений AdMob в файл app.json в корневом каталоге проекта.

Для тестирования используйте примеры идентификаторов приложений AdMob, показанные ниже:

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

Во время сборки Google Mobile Ads SDK for React Native добавляет свойство android_app_id в файл AndroidManifest.xml и свойство ios_app_id в созданный файл Info.plist в качестве ключа GADApplicationIdentifier.

Чтобы посмотреть варианты для конкретной платформы или настроить ее вручную, выберите одну из следующих платформ:

Android

Если вы управляете несколькими конфигурациями сборки или интегрируете React Native в существующее приложение Android, добавьте идентификатор приложения AdMob в элемент <application> файла AndroidManifest.xml проекта, а не в файл 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 автоматически разрешает зависимости Android во время сборки.

iOS

Выполните следующие действия:

  1. Установите зависимости CocoaPods из каталога ios/ проекта:

    pod install --repo-update

    Вы также можете установить зависимости CocoaPods из корневого каталога проекта:

    npx pod-install

    Автоматическое связывание CocoaPods настраивает скрипт фазы сборки Xcode, который добавляет свойство ios_app_id из файла app.json в созданный файл Info.plist.

  2. В файле Info.plist приложения добавьте ключ SKAdNetworkItems в элемент <dict> для Google cstr6suwn9.skadnetwork и выберите сторонних покупателей.

    Ниже приведен пример файла Info.plist, содержащего обязательный массив SKAdNetworkItems.

    Полный пример

    <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

Перед загрузкой объявлений вызовите метод initialize, чтобы инициализировать Google Mobile Ads SDK for React Native. Вызовите метод initialize один раз при запуске приложения, например в корневом компоненте App.tsx.

В примере ниже инициализируется 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>
  );
}

Выберите формат объявления

После инициализации Google Mobile Ads SDK for React Native можно реализовать показ рекламы. В AdMob доступны следующие форматы объявлений:

Формат Описание Документация
Объявления при запуске приложения Показывается, когда пользователь открывает приложение или возвращается к нему, накладываясь на экран загрузки или заставку. Как настроить объявления при запуске приложения
Межстраничное объявление Полноэкранные объявления, которые закрывают интерфейс приложения. Они показываются в естественные переходы между экранами в процессе работы приложения, например между действиями или во время паузы между уровнями в игре. Как настроить межстраничные объявления
Бонус предоставлен Полноэкранные объявления, за просмотр которых или взаимодействие с которыми пользователи получают вознаграждение. Как настроить объявления с вознаграждением
Межстраничные объявления с вознаграждением. Формат объявлений с поощрением, который позволяет предлагать вознаграждение за просмотр рекламы, автоматически появляющейся в моменты естественных переходов между экранами приложения. Как настроить межстраничные объявления с вознаграждением