إعداد حزمة "SDK لإعلانات Google على الأجهزة الجوّالة" في React Native

لعرض الإعلانات وتحقيق الإيرادات، يمكنك دمج Google Mobile Ads SDK for React Native في تطبيق React Native. يتناول هذا الدليل كيفية تثبيت Google Mobile Ads SDK for React Native وإعداده واختيار شكل الإعلان.

المتطلبات الأساسية

قبل المتابعة، عليك الحصول على ما يلي:

  • الإصدار 0.85.0 من React Native أو إصدار أحدث
  • حساب على AdMob ومعرّف تطبيق للحصول على معرّف تطبيق، يُرجى الاطّلاع على مقالة إعداد تطبيق في AdMob.

  • عناصر Android التالية:

    • الإصدار 24 أو الإصدارات الأحدث من مستوى واجهة برمجة التطبيقات لنظام التشغيل Android
    • أحدث إصدار من "استوديو Android"
    • الإصدار 8.0 أو إصدار أحدث من المكوّن الإضافي لنظام Gradle المتوافق مع Android ‏ (AGP)

  • عناصر iOS التالية:

    • الإصدار 13.0 من نظام التشغيل iOS أو إصدار أحدث
    • الإصدار 16.0 من 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 أشكال الإعلانات التالية:

التنسيق الوصف الوثائق
إعلان على شاشة فتح التطبيق يظهر هذا الإعلان عندما يفتح المستخدمون تطبيقك أو يعودون إليه، ويتم عرضه على شاشة التحميل أو شاشة البداية. إعداد "الإعلانات على شاشة فتح التطبيق"
إعلان بيني هي إعلانات بملء الشاشة تغطي واجهة التطبيق المضيف، وتظهر في نقاط انتقال طبيعية خلال مسار عرض التطبيق، على سبيل المثال بين الأنشطة أو في الوقت الفاصل بين مستويَين في لعبة. إعداد "الإعلانات البينية"
تمت المكافأة هي إعلانات بملء الشاشة تمنح المستخدمين مكافآت مقابل مشاهدة إعلانات الفيديو أو التفاعل مع إعلانات تشغيل إصدار بسيط من اللعبة. إعداد "الإعلانات مقابل مكافأة"
إعلان بيني مقابل مكافأة هو شكل إعلان محفِّز يتيح لك تقديم مكافآت مقابل الإعلانات التي تظهر تلقائيًا أثناء عمليات الانتقال الطبيعية في التطبيق. إعداد "الإعلانات البينية مقابل مكافأة"