React Native 向け Google Mobile Ads SDK を設定する

広告を配信して収益を得るには、React Native アプリに Google Mobile Ads SDK for React Native を統合します。このガイドでは、Google Mobile Ads SDK for React Native のインストールと初期化、広告フォーマットの選択について説明します。

前提条件

続行する前に、次のものを取得します。

  • React Native 0.85.0 以降。
  • AdMob アカウントとアプリ ID。アプリ ID を取得するには、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. Google ドライブから gma-sdk-react-native フォルダをダウンロードします。

  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

アプリを設定する

プラットフォームの依存関係を使用してアプリを構成するには、プロジェクトのルートの app.json ファイルに AdMob アプリ ID を追加します。

テストには、次の例に示すサンプル AdMob アプリ ID を使用します。

{
  "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 ファイルに追加し、ビルドされた Info.plist ファイルの ios_app_id プロパティを GADApplicationIdentifier キーとして追加します。

プラットフォーム固有のオプションまたは手動構成については、次のいずれかのプラットフォームを選択します。

Android

複数のビルド構成を管理している場合や、React Native を既存の Android アプリに統合する場合は、app.json ファイルではなく、プロジェクトの AndroidManifest.xml ファイルの <application> 要素に AdMob アプリ ID を追加します。

<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. プロジェクトの ios/ ディレクトリから CocoaPods の依存関係をインストールします。

    pod install --repo-update

    または、プロジェクトのルート ディレクトリから CocoaPods の依存関係をインストールします。

    npx pod-install

    CocoaPods の自動リンクにより、ビルドされた Info.plist ファイルの app.json ファイルから ios_app_id プロパティを追加する Xcode ビルドフェーズ スクリプトが構成されます。

  2. アプリの Info.plist ファイルで、Google の cstr6suwn9.skadnetwork と一部のサードパーティ購入者の <dict> 要素に SKAdNetworkItems キーを追加します。

    次の例は、必要な SKAdNetworkItems 配列を含む完全な Info.plist ファイルを示しています。

    サンプルコードの全文

    <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 を初期化します。アプリの起動時に、ルート App.tsx コンポーネントなどで initialize メソッドを 1 回呼び出します。

次の例では、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 では、次の広告フォーマットをご利用いただけます。

形式 説明 ドキュメント
アプリ起動 ユーザーがアプリを開いたとき、またはアプリに戻ったときに、読み込み画面またはスプラッシュ画面に重ねて表示されます。 アプリ起動時広告を設定する
インタースティシャル ホストアプリのインターフェース上に全画面表示される広告です。通常は、次のアクティビティに移行する前や、ゲームレベルをクリアした後の合間など、アプリの操作中に画面が切り替わるタイミングで表示されます。 インタースティシャル広告を設定する
特典 動画広告の視聴や体験プレイ広告の操作に対してユーザーに特典を付与するフルスクリーン広告。 リワード広告を設定する
リワード インタースティシャル アプリの画面が変わる自然なタイミングで自動的に表示される広告に対して報酬を提供できる、インセンティブ広告フォーマットです。 リワード インタースティシャル広告を設定する