Menyiapkan Google Mobile Ads SDK untuk React Native

Untuk menayangkan iklan dan memperoleh pendapatan, integrasikan Google Mobile Ads SDK for React Native ke dalam aplikasi React Native Anda. Panduan ini membahas cara menginstal dan melakukan inisialisasi Google Mobile Ads SDK for React Native, serta memilih format iklan.

Prasyarat

Sebelum melanjutkan, dapatkan hal berikut:

  • React Native 0.85.0 atau yang lebih baru.
  • Akun AdMob dan ID aplikasi. Untuk mendapatkan ID aplikasi, lihat Menyiapkan aplikasi di AdMob.

  • Item Android berikut:

    • Android API level 24 atau yang lebih baru.
    • Versi terbaru Android Studio.
    • Plugin Android Gradle (AGP) versi 8.0 atau yang lebih baru.

  • Item iOS berikut:

    • iOS versi 13.0 atau yang lebih baru.
    • Xcode versi 16.0 atau yang lebih baru dan alat command line diaktifkan.
    • CocoaPods

Instal Google Mobile Ads SDK for React Native

Untuk menginstal Google Mobile Ads SDK for React Native, lakukan hal berikut:

  1. Download folder gma-sdk-react-native dari Google Drive.

  2. Ekstrak file ZIP di direktori terpisah di luar direktori project kerja Anda. Proses ini dapat menghindari konflik dengan file konfigurasi project Anda.

  3. Di root project Anda, buat direktori local_packages/.

  4. Dalam direktori ini, salin file 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/

    Ganti EXTRACT_DIR dengan jalur ke direktori tempat Anda mengekstrak arsip.

  5. Instal paket dengan pengelola paket pilihan Anda:

    npm

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

    benang

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

Mengonfigurasi aplikasi Anda

Untuk mengonfigurasi aplikasi Anda dengan dependensi platform, tambahkan ID aplikasi AdMob ke file app.json root project Anda.

Untuk pengujian, gunakan contoh ID aplikasi AdMob yang ditampilkan dalam contoh berikut:

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

Selama waktu build, Google Mobile Ads SDK for React Native menambahkan properti android_app_id ke file AndroidManifest.xml dan properti ios_app_id dalam file Info.plist yang di-build sebagai kunci GADApplicationIdentifier.

Untuk opsi khusus platform atau konfigurasi manual, pilih salah satu platform berikut:

Android

Jika Anda mengelola beberapa konfigurasi build atau mengintegrasikan React Native ke dalam aplikasi Android yang ada, tambahkan ID aplikasi AdMob Anda di elemen <application> file AndroidManifest.xml project Anda, bukan file 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 otomatis me-resolve dependensi Android selama waktu build.

iOS

Selesaikan langkah berikut:

  1. Instal dependensi CocoaPods dari direktori ios/ project Anda:

    pod install --repo-update

    Atau, instal dependensi CocoaPods dari direktori root project Anda:

    npx pod-install

    Penautan otomatis CocoaPods mengonfigurasi skrip fase build Xcode yang menambahkan properti ios_app_id dari file app.json dalam file Info.plist yang Anda bangun.

  2. Di file Info.plist aplikasi Anda, tambahkan kunci SKAdNetworkItems di elemen <dict> untuk Google cstr6suwn9.skadnetwork dan pilih pembeli pihak ketiga.

    Contoh berikut menunjukkan file Info.plist lengkap yang berisi array SKAdNetworkItems yang diperlukan:

    Contoh lengkap

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

Melakukan inisialisasi Google Mobile Ads SDK for React Native

Sebelum memuat iklan, panggil metode initialize untuk melakukan inisialisasi Google Mobile Ads SDK for React Native. Panggil metode initialize sekali saat peluncuran aplikasi, seperti di komponen App.tsx root Anda.

Contoh berikut melakukan inisialisasi 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>
  );
}

Pilih format iklan

Setelah menginisialisasi Google Mobile Ads SDK for React Native, Anda dapat menerapkan iklan. AdMob menawarkan format iklan berikut:

Format Deskripsi Dokumentasi
Layar pembuka aplikasi Muncul saat pengguna membuka atau beralih kembali ke aplikasi Anda, ditempatkan di layar pemuatan atau layar pembuka. Menyiapkan iklan di layar pembuka aplikasi
Interstisial Iklan layar penuh yang menutupi antarmuka aplikasi host. Iklan ini muncul pada titik transisi alami dalam alur aplikasi, seperti di antara aktivitas atau selama waktu jeda antarlevel dalam game. Menyiapkan iklan interstisial
Reward Iklan layar penuh yang memberikan reward kepada pengguna karena telah menonton iklan video atau berinteraksi dengan iklan yang dapat dimainkan. Menyiapkan iklan reward
Interstisial reward Format iklan berinsentif yang memungkinkan Anda menawarkan reward untuk iklan yang muncul secara otomatis selama transisi alami dalam aplikasi. Menyiapkan iklan interstisial reward