Настройка рекламы Google AdMob с помощью React Native

Google Admob позволяет разработчикам и владельцам приложений монетизировать свои приложения с помощью рекламы приложений и получать доход от трафика в приложении. Эта функция была одним из лучших способов, с помощью которых разработчики и владельцы приложений могут получать доход от своих приложений, пока пользователи используют приложение.

В этом уроке я подробно рассмотрю настройку Google Admob в проекте React Native. Я продемонстрирую простое приложение, и тот же процесс можно применить к любому проекту React Native. Что касается полного исходного кода этого руководства, вы можете найти его в моем репозитории GitHub.

Для прохождения необходима учетная запись Google. Кроме того, вы должны иметь базовые знания React Native, выполнить Настройку среды React Native на своем компьютере и иметь хорошо настроенные эмуляторы Android и iOS, поскольку они будут удобны для тестирования проекта. Если вам все еще нужно выполнить необходимую настройку, пожалуйста, перейдите по этой ссылке, и вы найдете пошаговое руководство по ее настройке.

Первые шаги

В этом уроке я расскажу об OpenAds, баннерной рекламе, межстраничной рекламе и рекламе с вознаграждением. Чтобы остановиться исключительно на этой цели, я создал простое демо-приложение, которое вам нужно будет клонировать, когда я применяю эти настройки к демо-приложению. Это демонстрационное приложение состоит из навигации, настроенной с помощью React Navigation. Я не буду рассказывать, как использовать React Navigation, но если вы хотите узнать об этом больше, нажмите здесь, чтобы посетить их блог.

Двигаемся дальше, пришло время клонировать демонстрационное приложение для этого проекта. Демонстрационное приложение для этого проекта находится в моем репозитории GitHub. Нажмите здесь, чтобы найти его. Чтобы клонировать этот репозиторий на свой компьютер, выполните приведенную ниже команду в своем терминале.

git clone https://github.com/championuz/RNAdmobDemo.git

После этого вы должны загрузить необходимые модули узла и зависимости iOS. Команды для их загрузки приведены ниже.

#Install Node Modules
npm install

# Navigate to the ios folder and Install iOS dependencies
cd ios && pod install

#Navigate back to the Project root folder
cd ..

Вы должны собрать этот проект на своих эмуляторах, чтобы убедиться, что он работает. Команды для этого приведены ниже:

#Run on Android Emulator
npx react-native run-android

#Run on iOS Simulator
npx react-native run-ios

После того, как вы выполните этот шаг, ваши эмуляторы Android и iOS отобразятся следующим образом:

Настройка гугл адмоб

Следующим шагом для этого проекта является настройка учетной записи Google Admob. Эта учетная запись предоставит нам доступ для настройки объявлений Google для отображения в нашем приложении. Я буду использовать тестовые идентификаторы для этого урока, но в рабочей среде вы должны использовать живые идентификаторы.

Нажмите здесь, чтобы посетить веб-сайт Google Admob и создать учетную запись. При регистрации вам нужно будет согласиться с некоторыми условиями, и ваша учетная запись будет настроена. Как только это будет сделано, ваша панель инструментов должна выглядеть следующим образом:

Далее необходимо создать приложение. Для этого урока я создам два приложения: приложение для Android и приложение для iOS. Это создаст уникальный идентификатор app_id для приложений Android и уникальный идентификатор для приложений iOS, и они будут использоваться для настройки проекта React Native.

Чтобы создать приложение, нажмите «Приложения» и «Добавить приложение» из элементов на левой боковой панели. Теперь в качестве платформы я выберу Android и нет, потому что этого проекта нет ни в одном магазине приложений, затем «продолжить».

Теперь вам нужно добавить имя проекта, и для этого урока я использую RNGoogleAdmobProject; вы можете дать своему любое имя. Хотя я выбрал использование метрик, я не буду использовать их в этом приложении. Наконец, нажмите «Добавить приложение», чтобы завершить процесс.

Я повторю процесс, но на этот раз платформа должна быть iOS, если вы будете создавать для iOS. Последовательность такая же. Вы можете просмотреть все свои приложения, нажав «Приложения» на боковой панели и «Просмотреть все приложения». Если вы правильно применили вышеизложенное, у вас должны появиться два приложения, Android и iOS, например:

Уникальный идентификатор приложения находится прямо здесь и имеет важное значение, поскольку мы правильно переходим в приложение.

Google Admob в приложении React Native

На данный момент мы создали учетную запись Google Admob и настроили наше приложение. Теперь мы будем показывать рекламу в приложении React Native. Зависимость, которую я буду использовать в этой работе, — это react-native-google-mobile-ads. Эта библиотека помогает упростить настройку и упрощает показ рекламы Google в ваших приложениях для Android и iOS.

Однако минимальное требование для показа рекламы в вашем приложении iOS заключается в том, что вы должны использовать Xcode 13 и выше.

Чтобы установить эту библиотеку, откройте терминал и в корневой папке проекта выполните команду ниже:

npm i react-native-google-mobile-ads

После этого, прежде чем пересобирать проект, откройте файл app.json и добавьте следующий код:

{
...
"react-native-google-mobile-ads": {
    "android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx"
  }
}

В файле app.json вы должны заменить пустой код идентификаторами приложений Android и iOS из панели управления Google Admob. Помните, что вы нажмете «Приложения», затем «Просмотреть все приложения», вы должны попасть на экран, где отображается ваш идентификатор приложения. Аккуратно нажмите, чтобы скопировать идентификатор приложения и соответствующим образом заменить его в файле app.json. После этого перейдите в папку iOS, запустите pod install, а затем перестройте свои проекты Android и iOS.

Повтор сеанса для разработчиков

Раскройте разочарования, выявите ошибки и устраните замедления работы, как никогда раньше, с помощью OpenReplay — набора для воспроизведения сеансов с открытым исходным кодом для разработчиков. Его можно разместить самостоятельно за несколько минут, что дает вам полный контроль над данными клиентов.

Удачной отладки! Попробуйте использовать OpenReplay сегодня.

Настройка рекламных баннеров

Первой рекламной реализацией будет баннерная реклама. Баннерная реклама — это графическая реклама, которая появляется в приложении, обычно вверху или внизу экрана. Эти объявления, как правило, меньше, чем другие типы рекламы, и предназначены для того, чтобы не нарушать работу пользователя. Они могут быть статичными или анимированными и бывают разных размеров. Пользователи, которые нажимают на рекламный баннер, будут перенаправлены на веб-сайт или целевую страницу рекламодателя.

В этом проекте это объявление будет размещено на главном экране. Чтобы реализовать это, перейдите на главный экран и сначала импортируйте GAMBannerAd, BannerAdSize и TestIds из библиотеки react-native-mobile-ads следующим образом:

import { GAMBannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';

Далее, в компонент HomeScreen я вставлю компонент GAMBannerAd, а реквизитами, которые я включу в этот компонент, будут размеры, adUnitId и requestOptions.

<GAMBannerAd
    unitId={TestIds.BANNER}
    sizes={[BannerAdSize.FULL_BANNER]}
    requestOptions={{
      requestNonPersonalizedAdsOnly: true,
    }}
  />

Свойство unitid указывает уникальный идентификатор рекламного блока, который используется для определения места размещения рекламы в приложении. Свойство sizes указывает размер рекламного баннера, а свойство requestOptions позволяет указать дополнительные параметры для запроса рекламы, например запрос неперсонализированной рекламы.

Как только это будет вставлено, как показано, ваши эмуляторы Android и iOS должны показывать тестовые рекламные баннеры, такие как:

Настройка межстраничных объявлений

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

Это объявление будет реализовано на экране «Подробности» и будет отображаться при переходе с главного экрана на экран «Подробности». Обычно межстраничные объявления, объявления App Open Ads и объявления с вознаграждением должны быть загружены до их показа; поэтому я установлю задержку в 20 секунд до того, как межстраничная реклама должна сработать, поскольку к тому времени она уже должна быть загружена.

Теперь на экране «Подробности» вставьте приведенный ниже оператор импорта вверху страницы.

import { InterstitialAd, TestIds, AdEventType } from 'react-native-google-mobile-ads';

Затем я создам межстраничное объявление в компоненте Details с помощью функции createForAdRequest. Код ниже:

const interstitial = InterstitialAd.createForAdRequest(TestIds.INTERSTITIAL, {
    requestNonPersonalizedAdsOnly: true,
    keywords: ['fashion', 'clothing'],
  });

В приведенном выше коде adUnitId — это тестовый межстраничный идентификатор; затем объект параметров позволяет указать дополнительные параметры запроса объявления, например запрос только неперсонализированной рекламы и добавление ключевых слов к объявлению. В этом случае объект параметров включает свойство requestNonPersonalizedAdsOnly, которое указывает сети AdMob показывать только неперсонализированные объявления, и свойство keywords, представляющее собой массив ключевых слов, связанных с объявлением. Обратите внимание, что это свойство ключевых слов играет очень важную роль в конверсии и доходах, которые может принести вам ваше приложение; поэтому важно, чтобы ключевые слова, которые вы вводите здесь, были связаны с вашим приложением или тем, для чего оно используется. Используемые здесь ключевые слова являются экспериментальными.

Затем я объявлю, что это межстраничное объявление загружается сразу после открытия этого экрана (в данном случае экрана сведений), и через 20 секунд объявление должно отображаться. Я делаю это с помощью хука useEffect. Вот код:

useEffect(() => {
  interstitial.load();
  setTimeout(() => {
    interstitial.show()
  }, 20000);
}, []);

После добавления этого ваши эмуляторы Android и iOS должны отображаться следующим образом:

Работая с межстраничными объявлениями, вы можете реализовать EventListeners, который может прослушивать определенные события и соответственно запускать определенные действия. Например, вместо того, чтобы показывать рекламу через 20 секунд, вы можете настроить ее показ после загрузки. Подробнее о том, как это работает, вы узнаете здесь.

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

Слышали ли вы раньше об открытии приложений? Это тип рекламы, которая появляется, когда приложение запускается или выводится на передний план. Эти объявления обычно отображаются на экране загрузки приложения и могут быть закрыты пользователем в любое время.

Чтобы это срабатывало при открытии вашего приложения, у вас должна быть предварительно загруженная реклама на экране входа. Это будет настроено на экране загрузки, который является экраном входа в этот проект.

Как всегда, первая строка кода, которую нужно вставить, будет оператором импорта. Код ниже:

import { AppOpenAd, TestIds } from 'react-native-google-mobile-ads';

Затем создайте объявление об открытии приложения с помощью функции createForAdRequest. Вот код:

const appOpenAd = AppOpenAd.createForAdRequest(TestIds.APP_OPEN, {
    requestNonPersonalizedAdsOnly: true,
    keywords: ['fashion', 'clothing'],
  });

Далее, в useEffect в LoadingScreen, я хочу запросить загрузку AppOpenAd, а также показать его через 10 секунд, столько же времени экран загрузки переместится на главный экран. Код ниже:

useEffect(() => {
  #👇Add this below
  appOpenAd.load();
  setTimeout(() => {
  navigation.replace("Home");
  #👇Add this below
  appOpenAd.show();
  }, 10000);
}, []);

После того, как вы добавили это, попробуйте перезапустить приложение на своих эмуляторах, и вы должны увидеть, как они отображаются следующим образом:

Настройка вознаграждения/видеообъявлений

Наконец, для этого руководства давайте настроим и отобразим рекламу с вознаграждением/видео в этом проекте React Native. Объявления с вознаграждением — это тип полноэкранной рекламы, которая появляется в интерфейсе приложения и может быть закрыта пользователем.

Они часто используются для вознаграждения пользователей после того, как они заполнили форму, посмотрели видео или выполнили и завершили действие. Содержание рекламы с вознаграждением обычно контролируется через панель управления AdMob. Объявления с вознаграждением часто используются в мобильных играх и других приложениях, чтобы предлагать пользователям внутриигровую валюту или другие вознаграждения в обмен на выполнение оговоренных действий.

В этом руководстве реклама с вознаграждением будет отображаться при нажатии кнопки «Показать рекламу с вознаграждением» на главном экране.

Теперь перейдите на главный экран и на главном экране обновите оператор импорта следующим образом:

import { RewardedAd, GAMBannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';

Затем в компоненте HomeScreen я создам рекламу с вознаграждением, используя функцию createForAdrequest. Затем я начну загружать объявление с вознаграждением с помощью хука useEffect.

const rewarded = RewardedAd.createForAdRequest(TestIds.GAM_REWARDED, {
  requestNonPersonalizedAdsOnly: true,
  keywords: ['fashion', 'clothing'],
});

useEffect(() => {
  rewarded.load()
}, []);

Теперь я назначу rewarded.show() кнопке «Показать рекламу с вознаграждением», чтобы реклама с вознаграждением показывалась в момент нажатия кнопки.

<Button
      onPress={()=> rewarded.show()}
      title= "Display Rewarded Ads"
    />

После добавления всего этого нажмите кнопку, и ваша реклама с вознаграждением должна появиться следующим образом:

Заключение

Ваше приложение можно настроить так, чтобы оно приносило вам доход, что стало возможным благодаря Google Admob. Теперь, когда React Native Google Mobile Ads внедрил этот учебник, это именно то, что вам нужно, когда вы настраиваете Google Ads в своем проекте React Native. Хорошо, если вы столкнетесь с какими-либо проблемами при реализации этого руководства. Также готовый проект находится прямо в моем репозитории GitHub.

Первоначально опубликовано на https://blog.openreplay.com.