設定 React Native 適用的 Google Mobile Ads SDK

如要放送廣告並賺取收益，請將 Google Mobile Ads SDK for React Native 整合至 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

設定應用程式

如要為應用程式設定平台依附元件，請將 AdMob 應用程式 ID 新增至專案根目錄的 app.json 檔案。

測試時，請使用下列範例中的 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 檔案，並將 ios_app_id 屬性新增至建構的 Info.plist 檔案，做為 GADApplicationIdentifier 鍵。

如需平台專屬選項或手動設定，請選取下列其中一個平台：

僅適用於搭載 Android

如果您管理多個建構設定，或將 React Native 整合至現有的 Android 應用程式，請在專案 AndroidManifest.xml 檔案的 <application> 元素中加入 AdMob 應用程式 ID，而不是 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. 從專案的 ios/ 目錄安裝 CocoaPods 依附元件：

    pod install --repo-update

    或者，您也可以從專案根目錄安裝 CocoaPods 依附元件：

    npx pod-install

    CocoaPods 自動連結功能會設定 Xcode 建構階段指令碼，從建構的 Info.plist 檔案中的 app.json 檔案新增 ios_app_id 屬性。

  2. 在應用程式的 Info.plist 檔案中，為 Google cstr6suwn9.skadnetwork 和特定第三方買家，在 <dict> 元素中新增 SKAdNetworkItems 鍵。

    以下範例顯示完整的 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 提供下列廣告格式：

格式 說明 說明文件
應用程式開啟頁面廣告 在使用者開啟或切換回應用程式時顯示，疊在載入或啟動畫面上。 設定應用程式開啟頁面廣告
插頁式廣告 這類全螢幕廣告會覆蓋整個應用程式的介面，並顯示在應用程式流程中的自然轉換點，例如操作後的空檔或遊戲關卡間的暫停時間。 設定插頁式廣告
已獲得獎勵 全螢幕廣告，會獎勵觀看影片廣告或與可試玩廣告互動的使用者。 設定獎勵廣告
插頁式獎勵廣告 這是一種獎勵廣告格式，可在應用程式自然轉換時自動顯示，向使用者發放獎勵。 設定插頁式獎勵廣告