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

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

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

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

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

Android 

ca-app-pub-3940256099942544/5224354917

iOS 

ca-app-pub-3940256099942544/1712485313

טעינת מודעה

כדי לטעון מודעה מתגמלת, מפעילים את ה-method‏ load במחלקה RewardedAd.

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

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

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

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

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

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

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

הצגת המודעה

כדי להציג מודעה מתגמלת, קוראים ל-method‏ show עם קריאה חוזרת (callback) כדי לטפל בתגמול שהמשתמש הרוויח:

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

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

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

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

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

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

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

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

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

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

export function RewardedSingleLoadScreen() {
  const [ad, setAd] = useState<RewardedAd | 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 ad...');
    const loadedAd = await loadRewardedAd(REWARDED_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 ad loaded!');
    } else {
      setStatus('Failed to load Rewarded ad.');
    }
  };

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

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Rewarded Ad (Single Load)</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>
  );
}

השלבים הבאים

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