הגדרה של Google Mobile Ads SDK ל-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 ברמת API 24 ואילך.
    • הגרסה העדכנית של Android Studio.
    • פלאגין של Android Gradle (AGP) בגרסה 8.0 ואילך.

  • הפריטים הבאים ב-iOS:

    • ‫iOS מגרסה 13.0 ואילך.
    • ‫Xcode בגרסה 16.0 ואילך, וכלים לשורת הפקודה מופעלים.
    • 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 של הפרויקט ברמה הבסיסית (root).

למטרות בדיקה, השתמשו במזהי האפליקציות לדוגמה ב-AdMob שמופיעים בדוגמה הבאה:

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

בזמן ה-build, ‏Google Mobile Ads SDK for React Native מוסיף את המאפיין android_app_id לקובץ AndroidManifest.xml ואת המאפיין ios_app_id בקובץ Info.plist שנוצר כמפתח GADApplicationIdentifier.

כדי לבחור אפשרויות ספציפיות לפלטפורמה או להגדיר באופן ידני, בוחרים באחת מהפלטפורמות הבאות:

Android

אם אתם מנהלים כמה תצורות build או משלבים את 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 במהלך ה-build.

iOS

כך עושים את זה:

  1. מתקינים את יחסי התלות של CocoaPods מהספרייה ios/ של הפרויקט:

    pod install --repo-update

    אפשר גם להתקין את יחסי התלות של CocoaPods מספריית הבסיס של הפרויקט:

    npx pod-install

    הקישור האוטומטי של CocoaPods מגדיר את הסקריפט של שלב ה-build ב-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

לפני שטוענים מודעות, צריך להפעיל את ה-method‏ initialize כדי לאתחל את Google Mobile Ads SDK for React Native. מפעילים את ה-method‏ initialize פעם אחת כשהאפליקציה מופעלת, למשל ברכיב הבסיס (root) 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 מציע את פורמטי המודעות הבאים:

פורמט תיאור מאמרי עזרה
מודעה בפתיחת אפליקציה מופיעה כשמשתמשים פותחים את האפליקציה או חוזרים אליה, כשכבת-על במסך הטעינה או במסך הפתיחה. הגדרת מודעות בפתיחת האפליקציה
מעברון מודעות במסך מלא שמכסות את הממשק של האפליקציה המארחת. המודעות האלה מופיעות בנקודות מעבר טבעיות בזרימה של האפליקציה, למשל בין פעילויות או במהלך ההשהיה בין שלבים במשחק. הגדרת מודעות מעברון
ההטבה הופעלה מודעות במסך מלא שמתגמלות את המשתמשים על צפייה במודעות וידאו או על אינטראקציה עם מודעות התנסות באפליקציה. הגדרת מודעות מתגמלות
מודעת מעברון מתגמלת פורמט של מודעה שמופיע באופן אוטומטי בנקודות מעבר טבעיות באפליקציה ומאפשר לכם להציע תגמולים. הגדרה של מודעות מעברון מתגמלות