راه‌اندازی «کیت توسعه نرم‌افزار تبلیغات تلفن همراه Google» برای React Native

برای ارائه آگهی و کسب درآمد، Google Mobile Ads SDK for React Native را در برنامه React Native خود ادغام کنید. این راهنما شامل نصب و مقداردهی اولیه Google Mobile Ads SDK for React Native و انتخاب قالب آگهی است.

پیش‌نیازها

پیش‌از ادامه دادن، موارد زیر را دریافت کنید:

  • React Native نسخه 0.85.0 یا بالاتر.
  • حساب AdMob و شناسه برنامه. برای دریافت شناسه برنامه، راه‌اندازی برنامه در AdMob را ببینید.

  • موارد Android زیر:

    • Android API سطح ۲۴ یا جدیدتر.
    • جدیدترین نسخه «استودیو Android».
    • افزایه Android Gradle (AGP) نسخه ۸.۰ یا بالاتر.

  • موارد iOS زیر:

    • ‫iOS نسخه ۱۳.۰ یا بالاتر.
    • Xcode نسخه ۱۶.۰ یا بالاتر و ابزارهای خط فرمان فعال‌شده.
    • CocoaPods

نصب Google Mobile Ads SDK for React Native

برای نصب Google Mobile Ads SDK for React Native، کارهای زیر را انجام دهید:

  1. پوشه gma-sdk-react-native را از Google Drive بارگیری کنید.

  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 را به فایل app.json ریشه پروژه‌تان اضافه کنید.

برای آزمایش، از شناسه‌های نمونه برنامه AdMob نشان‌داده‌شده در مثال زیر استفاده کنید:

{
  "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 موجودی ادغام می‌کنید، شناسه برنامه AdMob خود را در عنصر <application> فایل AndroidManifest.xml پروژه خود به‌جای فایل 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. وابستگی‌های CocoaPods را از فهرست راهنمای ios/ پروژه‌تان نصب کنید:

    pod install --repo-update

    یا به‌جای آن، وابستگی‌های CocoaPods را از دایرکتوری ریشه پروژه‌تان نصب کنید:

    npx pod-install

    پیوند خودکار CocoaPods اسکریپت فاز ساخت Xcode را پیکربندی می‌کند که ویژگی ios_app_id را از فایل app.json در فایل Info.plist ساخته‌شده شما اضافه می‌کند.

  2. در فایل Info.plist برنامه‌تان، کلید SKAdNetworkItems را در عنصر <dict> برای Google cstr6suwn9.skadnetwork و خریداران طرف سوم منتخب اضافه کنید.

    مثال زیر فایل 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 قالب‌های آگهی زیر را ارائه می‌دهد:

قالب شرح اسناد
باز شدن برنامه وقتی کاربران برنامه شما را باز می‌کنند یا به آن برمی‌گردند، این آگهی ظاهر می‌شود و روی صفحه بار کردن یا صفحه اسپلش قرار می‌گیرد. راه‌اندازی آگهی در صفحه باز شدن برنامه
بینابینی آگهی‌های تمام‌صفحه‌ای که میانای برنامه میزبان را می‌پوشانند. این آگهی‌ها در نقاط انتقال طبیعی در جریان برنامه ظاهر می‌شوند، مثلاً بین فعالیت‌ها یا درطول مکث بین مراحل بازی. راه‌اندازی آگهی‌های بینابینی
پاداش آگهی‌های تمام‌صفحه‌ای که به کاربران برای تماشای آگهی‌های ویدیویی یا تعامل با آگهی‌های قابل‌بازی پاداش می‌دهند. راه‌اندازی آگهی‌های پاداش‌دار
بینابینی پاداش‌دار قالب آگهی تشویقی که به شما امکان می‌دهد برای آگهی‌هایی که به‌طور خودکار درطول انتقال‌های طبیعی برنامه ظاهر می‌شوند پاداش ارائه دهید. راه‌اندازی آگهی‌های بینابینی پاداش‌دار