एक इनाम वाला इंटरस्टीशियल विज्ञापन लोड करना

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

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

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

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

Android 

ca-app-pub-3940256099942544/5354046379

iOS 

ca-app-pub-3940256099942544/6978759866

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

अगले चरण

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