הגדרת מודעות באנר

בחירת פלטפורמה: Android iOS Unity Flutter React Native Android (גרסה קודמת)

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

בדף הזה מוסבר איך לשלב מודעות באנר מותאמות ומעוגנות באפליקציית נייטיב של React.

דרישות מוקדמות

לפני שממשיכים, צריך לבצע את הפעולות הבאות:

• מגדירים את Google Mobile Ads SDK for React Native.
• מפעילים מודעות בדיקה ומשתמשים במזהה הבא של יחידת המודעות לבדיקה:

Android

ca-app-pub-3940256099942544/9214589741

iOS

ca-app-pub-3940256099942544/2435281174

איך מקבלים את גודל המודעה

כדי לבקש מודעת באנר מותאמת ומעוגנת, צריך להפעיל את ה-method‏ AdSize.getLargeAnchoredAdaptiveBannerAdSize עם רוחב מאגר המודעות הזמין בפיקסלים שלא תלויים בצפיפות (dp). השיטה הזו מחזירה הבטחה (promise) שמתקבלת כאובייקט AdSize.

בדוגמה הבאה מוצג איך מקבלים ומחזירים את גודל המודעה של מודעת באנר מותאמת ומעוגנת:

export async function getAdaptiveAdSize(width: number): Promise<AdSize> {
  const adSize = await AdSize.getLargeAnchoredAdaptiveBannerAdSize(width);
  return adSize;
}

טעינת מודעה

אחרי שמקבלים אובייקט AdSize, מפעילים את השיטה load במחלקה BannerAd עם מזהה יחידת המודעות וגודל המודעה.

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

export function loadBannerAd(
  adUnitId: string,
  adSize: AdSize,
  callback?: BannerAdLoadCallback,
): void {
  BannerAd.load(
    {adUnitId, adSize},
    {
      // Called when an ad has finished loading.
      onAdLoaded: (ad) => {
        console.log('Banner ad loaded successfully.');
        callback?.onAdLoaded?.(ad);
      },
      // Called when an ad request fails.
      onAdFailedToLoad: (error: LoadAdError) => {
        console.error('Failed to load banner ad:', error.message);
        callback?.onAdFailedToLoad?.(error);
      },
    },
  );
}

רענון מודעה

אם הגדרתם את יחידת המודעות לרענון, אתם לא צריכים לבקש מודעה אחרת כשהמודעה לא נטענת. ‫Google Mobile Ads SDK for React Native מכבד את קצב הרענון שציינתם בממשק המשתמש של AdMob. אם לא הפעלתם את הרענון, שלחו בקשה חדשה. לפרטים נוספים על רענון יחידות מודעות, כמו הגדרת קצב רענון, ראו שימוש ברענון אוטומטי במודעות באנר.

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

הצגת מודעת באנר

כדי להציג מופע של BannerAd שנטען, מעבירים את מופע המודעה למאפיין ad של רכיב BannerAdView בהיררכיית התצוגות.

בדוגמה הבאה מוצגת מודעה, והיא מושמדת כשהרכיב מוסר:

export function BannerAdViewComponent({ad}: {ad: BannerAd}): React.JSX.Element {
  useEffect(() => {
    // Destroy native resources when the component unmounts.
    return () => {
      ad.destroy();
    };
  }, [ad]);

  return <BannerAdView ad={ad} />;
}

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

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

האזנה לאירועים של מודעות

כדי להאזין לאירועי מודעות, כמו חשיפות של מודעות וקליקים, מגדירים קריאות חוזרות (callbacks) ברכיב BannerAdView. לרשימה של כל הקריאות החוזרות, ראו BannerAdViewProps.

בדוגמה הבאה מוגדרות קריאות חוזרות (callback) כדי להאזין לאירועים של מודעות באנר:

export function BannerEventsExample({ad}: {ad: BannerAd}): React.JSX.Element {
  return (
    <BannerAdView
      ad={ad}
      // Called when an impression is recorded for an ad.
      onAdImpression={() => {
        console.log('Banner ad recorded an impression.');
      }}
      // Called when a click is recorded for an ad.
      onAdClicked={() => {
        console.log('Banner ad clicked.');
      }}
      // Called when the ad opens an in-app overlay or landing page.
      onAdShowedFullScreenContent={() => {
        console.log('Banner ad opened overlay content.');
      }}
      // Called when the user dismisses the ad overlay.
      onAdDismissedFullScreenContent={() => {
        console.log('Banner ad overlay dismissed.');
      }}
      // Called when the ad is estimated to have earned money.
      onAdPaid={(adValue) => {
        console.log(
          `Banner ad paid: ${adValue.amountMicros} ${adValue.currencyCode}`,
        );
      }}
      // Called when the ad automatically refreshes.
      onAdRefreshed={() => {
        console.log('Banner ad refreshed.');
      }}
      // Called when the ad fails to automatically refresh.
      onAdFailedToRefresh={(error) => {
        console.error('Banner ad failed to refresh:', error.message);
      }}
    />
  );
}

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

לצפייה בדוגמה המלאה

בקטע הזה מופיעה דוגמה מלאה לשילוב של מודעת באנר ברכיב React Native.

בדוגמה הבאה, מודעת באנר משולבת ברכיב React Native, והמופע של המודעה מנוהל במצב:

export function BannerScreen() {
  const {width} = useWindowDimensions();
  const insets = useSafeAreaInsets();
  const [ad, setAd] = useState<BannerAd | null>(null);
  const [status, setStatus] = useState('Idle');

  useEffect(() => {
    return () => {
      ad?.destroy();
    };
  }, [ad]);

  const handleLoadAd = async () => {
    setStatus('Loading adaptive banner ad...');
    try {
      const adaptiveSize = await getAdaptiveAdSize(width);
      loadBannerAd(BANNER_AD_UNIT_ID, adaptiveSize, {
        onAdLoaded: (loadedAd) => {
          setAd(loadedAd);
          setStatus('Banner ad loaded successfully.');
        },
        onAdFailedToLoad: (error: LoadAdError) => {
          setStatus(`Failed to load banner ad: ${error.message}`);
        },
      });
    } catch (error) {
      setStatus(`Failed to get adaptive ad size: ${error}`);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Anchored Adaptive Banner Ad</Text>
      <Text style={styles.status}>Status: {status}</Text>
      <View style={styles.buttonGroup}>
        <Button title="Load Banner Ad" onPress={handleLoadAd} />
      </View>
      {ad ? (
        <View style={[styles.bannerContainer, {bottom: insets.bottom}]}>
          <BannerAdView
            ad={ad}
            onAdImpression={() => setStatus('Banner ad recorded impression.')}
            onAdClicked={() => setStatus('Banner ad clicked.')}
            onAdShowedFullScreenContent={() =>
              setStatus('Banner ad showed overlay content.')
            }
            onAdDismissedFullScreenContent={() =>
              setStatus('Banner ad overlay dismissed.')
            }
          />
        </View>
      ) : null}
    </View>
  );
}

מחליפים את BANNER_AD_UNIT_ID במזהה יחידת המודעות.

השלבים הבאים

אחרי שמשלבים מודעות באנר, כדאי לעיין בנושאים הבאים:

• הכנסות מפרסום לפי חשיפות (iLAR)
• פרטיות המשתמשים והסכמה