इनाम वाले किसी एक विज्ञापन को लोड करना

इनाम वाले विज्ञापनों की मदद से, उपयोगकर्ताओं को वीडियो विज्ञापनों, गेम खेलने देने वाले विज्ञापनों, और सर्वे के साथ इंटरैक्ट करने पर, ऐप्लिकेशन में खरीदने के लिए आइटम दिए जा सकते हैं. ज़्यादा जानकारी के लिए, इनाम वाली विज्ञापन यूनिट के बारे में खास जानकारी देखें.

इस गाइड में, React Native ऐप्लिकेशन में इनाम वाले विज्ञापनों को इंटिग्रेट करने का तरीका बताया गया है.

ज़रूरी शर्तें

जारी रखने से पहले, ये काम करें:

Android 

ca-app-pub-3940256099942544/5224354917

iOS 

ca-app-pub-3940256099942544/1712485313

विज्ञापन लोड करना

इनाम वाले विज्ञापन को लोड करने के लिए, RewardedAd क्लास पर load तरीके को कॉल करें.

यहां दिए गए उदाहरण में, विज्ञापन लोड होने पर इनाम वाला विज्ञापन लोड होता है और लोड न होने पर गड़बड़ी को लॉग किया जाता है:

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;
  }
}

विज्ञापन इवेंट को मॉनिटर करना

विज्ञापन दिखाने से पहले, लोड किए गए RewardedAd इंस्टेंस पर adEventCallback लिसनर सेट करें. इस लिसनर को विज्ञापन की लाइफ़साइकल से जुड़े इवेंट के लिए कॉलबैक मिलते हैं. जैसे, स्क्रीन पर विज्ञापन दिखना या उपयोगकर्ता का विज्ञापन पर टैप करना. उपलब्ध कॉलबैक के लिए, AdEventCallback देखें.

यहां दिए गए उदाहरण में, विज्ञापन इवेंट के इनपुट के लिए रीऐक्ट करने वाले कॉलबैक सेट किए गए हैं:

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}`,
      );
    },
  };
}

इस उदाहरण में, destroy मेथड को तब भी कॉल किया जाता है, जब कोई उपयोगकर्ता विज्ञापन बंद करता है या विज्ञापन नहीं दिखता. इस प्रोसेस से, विज्ञापन में इस्तेमाल किए गए संसाधन रिलीज़ हो जाते हैं.

विज्ञापन दिखाना

इनाम वाला विज्ञापन दिखाने के लिए, show तरीके को कॉल करें. साथ ही, उपयोगकर्ता को मिले इनाम को मैनेज करने के लिए, कॉलबैक का इस्तेमाल करें:

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

ज़रूरी नहीं: सर्वर साइड से की जाने वाली पुष्टि के कॉलबैक की पुष्टि करना

अगर आपके ऐप्लिकेशन को सर्वर साइड से की जाने वाली पुष्टि (एसएसवी) कॉलबैक में, पुष्टि करने के लिए कस्टम पैरामीटर की ज़रूरत है, जैसे कि यूज़र आईडी या इनाम का कस्टम मेटाडेटा, तो विज्ञापन दिखाने से पहले, लोड किए गए विज्ञापन इंस्टेंस पर 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 Native ऐप्लिकेशन में इनाम वाले विज्ञापन को इंटिग्रेट करने का पूरा उदाहरण दिया गया है.

यहां दिए गए उदाहरण में, विज्ञापन को 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>
  );
}

अगले चरण

इनाम वाले विज्ञापन को इंटिग्रेट करने के बाद, इन विषयों के बारे में जानें: