Configurar o SDK do Google Mobile Ads para React Native

Para veicular anúncios e gerar receita, integre o Google Mobile Ads SDK for React Native ao seu app React Native. Este guia aborda a instalação e inicialização do Google Mobile Ads SDK for React Native e a seleção de um formato de anúncio.

Pré-requisitos

Antes de continuar, faça o seguinte:

  • React Native 0.85.0 ou mais recente.
  • Uma conta da AdMob e um ID do app. Para receber um ID do app, consulte Configurar um app na AdMob.

  • Os seguintes itens do Android:

    • Nível 24 da API do Android ou mais recente.
    • Ter a versão mais recente do Android Studio.
    • Plug-in do Android para Gradle (AGP) versão 8.0 ou mais recente.

  • Os seguintes itens do iOS:

    • iOS versão 13.0 ou mais recente.
    • Xcode versão 16.0 ou mais recente e ferramentas de linha de comando ativadas.
    • CocoaPods

Instalar Google Mobile Ads SDK for React Native

Para instalar o Google Mobile Ads SDK for React Native, faça o seguinte:

  1. Faça o download da pasta gma-sdk-react-native no Google Drive.

  2. Extraia o arquivo ZIP em um diretório separado fora do diretório do projeto de trabalho. Esse processo pode evitar conflitos com os arquivos de configuração do projeto.

  3. Na raiz do projeto, crie um diretório local_packages/.

  4. Nesse diretório, copie o arquivo 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/

    Substitua EXTRACT_DIR pelo caminho para o diretório em que você extraiu o arquivo.

  5. Instale o pacote com seu gerenciador de pacotes preferido:

    npm

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

    novelo

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

Configurar o app

Para configurar o app com dependências de plataforma, adicione os IDs de apps da AdMob ao arquivo app.json da raiz do projeto.

Para testes, use os IDs de exemplo de apps da AdMob mostrados no exemplo a seguir:

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

Durante o tempo de build, o Google Mobile Ads SDK for React Native adiciona a propriedade android_app_id ao arquivo AndroidManifest.xml e a propriedade ios_app_id no arquivo Info.plist criado como a chave GADApplicationIdentifier.

Para opções específicas da plataforma ou configuração manual, selecione uma das seguintes plataformas:

Android

Se você gerencia várias configurações de build ou está integrando o React Native a um app Android, adicione o ID do app da AdMob no elemento <application> do arquivo AndroidManifest.xml do projeto, em vez do arquivo 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>

O Gradle resolve automaticamente as dependências do Android durante o tempo de build.

iOS

Siga estas etapas:

  1. Instale as dependências do CocoaPods no diretório ios/ do projeto:

    pod install --repo-update

    Como alternativa, instale as dependências do CocoaPods no diretório raiz do projeto:

    npx pod-install

    A vinculação automática do CocoaPods configura o script da fase de build do Xcode que adiciona a propriedade ios_app_id do arquivo app.json ao arquivo Info.plist criado.

  2. No arquivo Info.plist do seu app, adicione uma chave SKAdNetworkItems no elemento <dict> para o Google cstr6suwn9.skadnetwork e compradores terceirizados selecionados.

    O exemplo a seguir mostra um arquivo Info.plist completo que contém a matriz SKAdNetworkItems obrigatória:

    Exemplo completo

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

Inicializar o Google Mobile Ads SDK for React Native

Antes de carregar anúncios, chame o método initialize para inicializar Google Mobile Ads SDK for React Native. Chame o método initialize uma vez na inicialização do app, como no componente raiz App.tsx.

O exemplo a seguir inicializa o 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>
  );
}

Selecione um formato de anúncio.

Depois de inicializar o Google Mobile Ads SDK for React Native, você pode implementar anúncios. A AdMob oferece os seguintes formatos:

Formato Descrição Documentação
Abertura do app Aparece quando os usuários abrem ou voltam para o app, sobrepondo a tela de carregamento ou de apresentação. Configurar anúncios de abertura do app
Intersticial Anúncios de tela cheia que cobrem a interface do app host. Eles aparecem em momentos de transição natural no fluxo de um app, como entre atividades ou durante a pausa entre os níveis de um jogo. Configurar anúncios intersticiais
Premiado Anúncios de tela cheia que recompensam os usuários por assistirem anúncios em vídeo ou interagirem com anúncios jogáveis. Configurar anúncios premiados
Intersticial premiado Um formato de anúncio com incentivos que permite oferecer recompensas em anúncios que aparecem automaticamente durante transições naturais do app. Configurar anúncios intersticiais premiados