טעינה של מודעת מעברון מתגמלת אחת

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

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

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

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

Android 

ca-app-pub-3940256099942544/5354046379

iOS 

ca-app-pub-3940256099942544/6978759866

טעינת מודעה

כדי לטעון מודעת מעברון מתגמלת, מפעילים את השיטה load במחלקה RewardedInterstitialAd.

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

export async function loadRewardedInterstitialAd(
  adUnitId: string,
): Promise<RewardedInterstitialAd | null> {
  try {
    const ad = await RewardedInterstitialAd.load({adUnitId});
    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load rewarded interstitial:', loadError.message);
    return null;
  }
}

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

לפני שמציגים את המודעה, מגדירים את המאזין adEventCallback במופע RewardedInterstitialAd שנטען. המאזין הזה מקבל קריאות חוזרות (callbacks) לאירועים במחזור החיים של המודעה, כמו הצגת המודעה במסך או לחיצה של המשתמש על המודעה. אפשר לעיין בAdEventCallback כדי לראות את הקריאות החוזרות הזמינות.

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

export function registerAdEvents(ad: RewardedInterstitialAd) {
  ad.adEventCallback = {
    // Called when the ad is presented on screen.
    onAdShowedFullScreenContent: () => {
      console.log('Rewarded interstitial ad showed full screen content.');
    },
    // Called when the ad is closed by the user.
    onAdDismissedFullScreenContent: () => {
      console.log('Rewarded interstitial ad dismissed full screen content.');
      ad.destroy();
    },
    // Called when presentation fails.
    onAdFailedToShowFullScreenContent: (error) => {
      console.error('Failed to show rewarded interstitial ad:', error);
      ad.destroy();
    },
    // Called when an impression is recorded.
    onAdImpression: () => {
      console.log('Rewarded interstitial ad recorded an impression.');
    },
    // Called when the user taps the ad.
    onAdClicked: () => {
      console.log('Rewarded interstitial ad was clicked.');
    },
    // Called when the ad is estimated to have earned money.
    onAdPaid: (adValue) => {
      console.log(
        `Rewarded interstitial ad paid: ${adValue.amountMicros} ${adValue.currencyCode}`,
      );
    },
  };
}

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

הצגת המודעה

כדי להציג מודעת מעברון מתגמלת, צריך להפעיל את הפונקציה show במופע של RewardedInterstitialAd שנטען, ולהעביר קריאה חוזרת (callback) כדי לקבל את האובייקט Reward:

export function showRewardedInterstitialAd(
  ad: RewardedInterstitialAd,
  onRewardEarned: (reward: Reward) => void,
) {
  ad.show(onRewardEarned);
}

אופציונלי: אימות קריאות חוזרות של אימות בצד השרת

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

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

  • ‫userId: מועבר לפרמטר השאילתה user_id כדי לזהות את המשתמש.
  • ‫customData: מועבר לפרמטר השאילתה custom_data כדי להעביר מטא-נתונים מותאמים אישית.

בדוגמה הבאה מוגדרים ServerSideVerificationOptions (customData וגם userId) באובייקט של מודעת מעברון מתגמלת לפני הצגת המודעה:

export function setServerSideVerificationRewardedInterstitial(
  ad: RewardedInterstitialAd,
) {
  ad.serverSideVerificationOptions = {
    userId: 'user_123',
    customData: 'sample_custom_data',
  };
}

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

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

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

export function RewardedInterstitialSingleLoadScreen() {
  const [ad, setAd] = useState<RewardedInterstitialAd | null>(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [status, setStatus] = useState<string>('Idle');
  const [reward, setReward] = useState<string | null>(null);

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

  const handleLoad = async () => {
    setReward(null);
    setStatus('Loading Rewarded Interstitial ad...');
    const loadedAd = await loadRewardedInterstitialAd(
      REWARDED_INTERSTITIAL_AD_UNIT_ID,
    );
    if (loadedAd) {
      registerAdEvents(loadedAd);
      const onDismiss =
        loadedAd.adEventCallback?.onAdDismissedFullScreenContent;
      loadedAd.adEventCallback = {
        ...loadedAd.adEventCallback,
        onAdDismissedFullScreenContent: () => {
          onDismiss?.();
          setStatus('Ad dismissed.');
        },
      };
      setAd((prevAd) => {
        prevAd?.destroy();
        return loadedAd;
      });
      setIsLoaded(true);
      setStatus('Rewarded Interstitial ad loaded!');
    } else {
      setStatus('Failed to load Rewarded Interstitial ad.');
    }
  };

  const handleShow = () => {
    if (ad) {
      showRewardedInterstitialAd(ad, (userReward) => {
        setReward(`${userReward.amount} ${userReward.type}`);
      });
      setIsLoaded(false);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Rewarded Interstitial Ad</Text>
      <Text style={styles.status}>Status: {status}</Text>
      {reward && <Text style={styles.rewardText}>Earned: {reward}</Text>}
      <View style={styles.buttonGroup}>
        <Button title="Load Ad" onPress={handleLoad} />
        <View style={styles.spacerSmall} />
        <Button title="Show Ad" onPress={handleShow} disabled={!isLoaded} />
      </View>
    </View>
  );
}

השלבים הבאים

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