React Native için Google Mobile Ads SDK'sını ayarlama

Reklam yayınlamak ve gelir elde etmek için Google Mobile Ads SDK for React Native'ı React Native uygulamanıza entegre edin. Bu kılavuzda, Google Mobile Ads SDK for React Native'ın yüklenmesi ve başlatılması ile reklam biçimi seçimi ele alınmaktadır.

Ön koşullar

Devam etmeden önce aşağıdakileri edinin:

  • React Native 0.85.0 veya sonraki sürümler.
  • AdMob hesabı ve uygulama kimliği. Uygulama kimliği almak için AdMob'da uygulama oluşturma başlıklı makaleyi inceleyin.

  • Aşağıdaki Android öğeleri:

    • Android API düzeyi 24 veya sonraki sürümler
    • Android Studio'nun en yeni sürümü.
    • Android Gradle eklentisi (AGP) 8.0 veya sonraki sürümler

  • Aşağıdaki iOS öğeleri:

    • iOS 13.0 veya sonraki sürümler
    • Xcode 16.0 veya sonraki sürümler ve komut satırı araçları etkinleştirilmiş olmalıdır.
    • CocoaPods

Google Mobile Ads SDK for React Native uygulamasını yükle

Google Mobile Ads SDK for React Native uygulamasını yüklemek için aşağıdakileri yapın:

  1. Google Drive'dan gma-sdk-react-native klasörünü indirin.

  2. ZIP arşivini, çalışma projenizin dizini dışında ayrı bir dizine çıkarın. Bu işlem, projenizin yapılandırma dosyalarıyla çakışmaları önleyebilir.

  3. Projenizin kök dizininde bir local_packages/ dizini oluşturun.

  4. Bu dizinde mobile-ads-0.1.0.tgz dosyasını kopyalayın:

    mkdir -p local_packages
cp EXTRACT_DIR/gma-sdk-react-native/google-mobile-ads/mobile-ads-0.1.0.tgz local_packages/

    EXTRACT_DIR ifadesini, arşivi çıkardığınız dizinin yoluyla değiştirin.

  5. Tercih ettiğiniz paket yöneticisiyle paketi yükleyin:

    npm

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

    yumak

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

Uygulamanızı yapılandırma

Uygulamanızı platform bağımlılıklarıyla yapılandırmak için AdMob uygulama kimliklerinizi proje kökünüzün app.json dosyasına ekleyin.

Test için aşağıdaki örnekte gösterilen örnek AdMob uygulama kimliklerini kullanın:

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

Derleme sırasında Google Mobile Ads SDK for React Native, android_app_id özelliğini AndroidManifest.xml dosyasına ve ios_app_id özelliğini de derlenen Info.plist dosyanıza GADApplicationIdentifier anahtarı olarak ekler.

Platforma özel seçenekler veya manuel yapılandırma için aşağıdaki platformlardan birini seçin:

Android

Birden fazla derleme yapılandırması yönetiyorsanız veya React Native'i mevcut bir Android uygulamasına entegre ediyorsanız AdMob uygulama kimliğinizi app.json dosyası yerine projenizin AndroidManifest.xml dosyasındaki <application> öğesine ekleyin:

<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, derleme sırasında Android bağımlılıklarını otomatik olarak çözer.

iOS

Aşağıdaki adımları tamamlayın:

  1. Projenizin ios/ dizininden CocoaPods bağımlılıklarını yükleyin:

    pod install --repo-update

    Alternatif olarak, CocoaPods bağımlılıklarını projenizin kök dizininden yükleyebilirsiniz:

    npx pod-install

    CocoaPods otomatik bağlantısı, derlenmiş Info.plist dosyanızdaki app.json dosyasından ios_app_id özelliğini ekleyen Xcode derleme aşaması komut dosyasını yapılandırır.

  2. Uygulamanızın Info.plist dosyasında, Google cstr6suwn9.skadnetwork ve belirli üçüncü taraf alıcılar için <dict> öğesine bir SKAdNetworkItems anahtarı ekleyin.

    Aşağıdaki örnekte, gerekli SKAdNetworkItems dizisini içeren eksiksiz bir Info.plist dosyası gösterilmektedir:

    Eksiksiz örnek

    <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 başlatılıyor

Reklamları yüklemeden önce Google Mobile Ads SDK for React Native'ı ilk kullanıma hazırlamak için initialize yöntemini çağırın. Uygulama başlatıldığında initialize yöntemini bir kez çağırın (ör. kök App.tsx bileşeninizde).

Aşağıdaki örnekte Google Mobile Ads SDK for React Native başlatılmaktadır:

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>
  );
}

Bir reklam biçimi seçin

Google Mobile Ads SDK for React Native başlatıldıktan sonra reklamları uygulayabilirsiniz. AdMob'da aşağıdaki reklam biçimleri sunulur:

Biçim Açıklama Belgeler
Uygulama açılışı Kullanıcılar uygulamanızı açtığında veya uygulamanıza geri döndüğünde, yükleme ya da başlangıç ekranının üzerinde gösterilir. Uygulama açılış reklamlarını ayarlama
Geçiş reklamı Barındıkları uygulamanın arayüzünü kaplayan tam ekran reklamlardır. Bu reklamlar, uygulamanın akışındaki doğal geçiş noktalarında (ör. etkinlikler veya bir oyundaki seviyeler arasındaki duraklama sırasında) gösterilir. Geçiş reklamları oluşturma
Ödüllü Kullanıcıları video reklam izledikleri veya oynanabilir reklamlarla etkileşim kurdukları için ödüllendiren tam ekran reklamlar. Ödüllü reklamları ayarlama
Ödüllü geçiş reklamı Doğal uygulama geçişleri sırasında otomatik olarak görünen reklamlar için ödül sunmanıza olanak tanıyan, teşvik edici bir reklam biçimidir. Ödüllü geçiş reklamları oluşturma