Thiết lập Google Mobile Ads SDK cho React Native

Để phân phối quảng cáo và kiếm doanh thu, hãy tích hợp Google Mobile Ads SDK for React Native vào ứng dụng React Native của bạn. Hướng dẫn này trình bày cách cài đặt và khởi chạy Google Mobile Ads SDK for React Native, cũng như cách chọn định dạng quảng cáo.

Điều kiện tiên quyết

Trước khi tiếp tục, hãy chuẩn bị những thông tin sau:

  • React Native 0.85.0 trở lên.
  • Tài khoản AdMob và mã ứng dụng. Để lấy mã ứng dụng, hãy xem bài viết Thiết lập ứng dụng trong AdMob.

  • Các mục sau đây trên Android:

    • Android API cấp 24 trở lên.
    • Phiên bản mới nhất của Android Studio.
    • Trình bổ trợ Android cho Gradle (AGP) phiên bản 8.0 trở lên.

  • Các mục sau đây trên iOS:

    • iOS phiên bản 13.0 trở lên.
    • Xcode phiên bản 16.0 trở lên và đã bật các công cụ dòng lệnh.
    • CocoaPods

Cài đặt Google Mobile Ads SDK for React Native

Để cài đặt Google Mobile Ads SDK for React Native, hãy làm như sau:

  1. Tải thư mục gma-sdk-react-native xuống từ Google Drive.

  2. Trích xuất tệp lưu trữ zip trong một thư mục riêng biệt bên ngoài thư mục dự án đang hoạt động của bạn. Quá trình này có thể tránh xung đột với các tệp cấu hình của dự án.

  3. Trong thư mục gốc của dự án, hãy tạo một thư mục local_packages/.

  4. Trong thư mục này, hãy sao chép tệp 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/

    Thay thế EXTRACT_DIR bằng đường dẫn đến thư mục mà bạn đã giải nén tệp lưu trữ.

  5. Cài đặt gói bằng trình quản lý gói mà bạn muốn:

    npm

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

    chỉ len

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

Định cấu hình ứng dụng

Để định cấu hình ứng dụng có các phần phụ thuộc nền tảng, hãy thêm Mã ứng dụng AdMob vào tệp app.json của thư mục gốc của dự án.

Để thử nghiệm, hãy sử dụng mã ứng dụng AdMob mẫu trong ví dụ sau:

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

Trong thời gian xây dựng, Google Mobile Ads SDK for React Native sẽ thêm thuộc tính android_app_id vào tệp AndroidManifest.xml và thuộc tính ios_app_id trong tệp Info.plist đã tạo dưới dạng khoá GADApplicationIdentifier.

Đối với các lựa chọn dành riêng cho nền tảng hoặc cấu hình thủ công, hãy chọn một trong các nền tảng sau:

Android

Nếu bạn quản lý nhiều cấu hình bản dựng hoặc đang tích hợp React Native vào một ứng dụng Android hiện có, hãy thêm mã ứng dụng AdMob vào phần tử <application> của tệp AndroidManifest.xml trong dự án thay vì tệp 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 tự động phân giải các phần phụ thuộc Android trong thời gian xây dựng.

iOS

Hãy hoàn tất các bước sau:

  1. Cài đặt các phần phụ thuộc CocoaPods từ thư mục ios/ của dự án:

    pod install --repo-update

    Ngoài ra, hãy cài đặt các phần phụ thuộc CocoaPods từ thư mục gốc của dự án:

    npx pod-install

    Tính năng tự động liên kết của CocoaPods định cấu hình tập lệnh giai đoạn bản dựng Xcode để thêm thuộc tính ios_app_id từ tệp app.json trong tệp Info.plist đã tạo.

  2. Trong tệp Info.plist của ứng dụng, hãy thêm khoá SKAdNetworkItems vào phần tử <dict> cho Google cstr6suwn9.skadnetwork và một số người mua bên thứ ba.

    Ví dụ sau đây cho thấy một tệp Info.plist hoàn chỉnh chứa mảng SKAdNetworkItems bắt buộc:

    Ví dụ đầy đủ

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

Khởi động Google Mobile Ads SDK for React Native

Trước khi tải quảng cáo, hãy gọi phương thức initialize để khởi chạy Google Mobile Ads SDK for React Native. Gọi phương thức initialize một lần khi khởi chạy ứng dụng, chẳng hạn như trong thành phần App.tsx gốc.

Ví dụ sau đây khởi động 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>
  );
}

Chọn một định dạng quảng cáo

Sau khi khởi chạy Google Mobile Ads SDK for React Native, bạn có thể triển khai quảng cáo. AdMob cung cấp các định dạng quảng cáo sau:

Định dạng Mô tả Tài liệu
Quảng cáo khi mở ứng dụng Xuất hiện khi người dùng mở hoặc quay lại ứng dụng của bạn, phủ lên màn hình tải hoặc màn hình chờ. Thiết lập quảng cáo khi mở ứng dụng
Quảng cáo xen kẽ Quảng cáo toàn màn hình che phủ giao diện của ứng dụng lưu trữ. Những quảng cáo này xuất hiện tại các điểm chuyển tiếp tự nhiên trong quy trình hoạt động của ứng dụng, chẳng hạn như giữa các hoạt động hoặc trong thời gian tạm dừng giữa các cấp độ của trò chơi. Thiết lập quảng cáo xen kẽ
Được thưởng Quảng cáo toàn màn hình tặng thưởng cho người dùng khi họ xem quảng cáo dạng video hoặc tương tác với quảng cáo có thể chơi. Thiết lập quảng cáo có tặng thưởng
Quảng cáo xen kẽ có tặng thưởng Một định dạng quảng cáo có tặng thưởng cho phép bạn tặng thưởng cho những quảng cáo tự động xuất hiện tại các điểm chuyển tiếp tự nhiên của ứng dụng. Thiết lập quảng cáo xen kẽ có tặng thưởng