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

अचानक दिखने वाले (इंटरस्टीशियल) विज्ञापन, फ़ुल-स्क्रीन विज्ञापन होते हैं. ये आपके ऐप्लिकेशन में ट्रांज़िशन पॉइंट पर दिखते हैं. जैसे, स्क्रीन के बीच में या गेम के लेवल के बीच में रुकने पर. उपयोगकर्ता, विज्ञापन पर टैप करके डेस्टिनेशन पर जा सकते हैं या विज्ञापन को बंद करके ऐप्लिकेशन पर वापस आ सकते हैं. ज़्यादा जानकारी के लिए, इंटरस्टीशियल विज्ञापन के लिए दिशा-निर्देश और केस स्टडी देखें.

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

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

Android 

ca-app-pub-3940256099942544/1033173712

iOS 

ca-app-pub-3940256099942544/4411468910

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

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

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

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

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

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

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

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

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

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

इंटरस्टीशियल विज्ञापन दिखाने के लिए, लोड किए गए InterstitialAd इंस्टेंस पर show तरीके को कॉल करें.

यहां इंटरस्टीशियल विज्ञापन का एक उदाहरण दिया गया है:

export function showInterstitialAd(ad: InterstitialAd) {
  ad.show();
}

पूरा उदाहरण देखें

इस सेक्शन में, React Native खास ऐप्लिकेशन में अचानक दिखने वाला (इंटरस्टीशियल) विज्ञापन को इंटिग्रेट करने का पूरा उदाहरण दिया गया है.

यहां दिए गए उदाहरण में, विज्ञापन को React Native कॉम्पोनेंट में इंटिग्रेट किया गया है. साथ ही, विज्ञापन के इंस्टेंस को स्टेट में मैनेज किया गया है. इसके अलावा, विज्ञापन को लोड करने और दिखाने के लिए कंट्रोल उपलब्ध कराए गए हैं:

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

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

  const handleLoad = async () => {
    setStatus('Loading Interstitial ad...');
    const loadedAd = await loadInterstitialAd(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('Interstitial ad loaded!');
    } else {
      setStatus('Failed to load Interstitial ad.');
    }
  };

  const handleShow = () => {
    if (ad) {
      showInterstitialAd(ad);
      setIsLoaded(false);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Interstitial Ad</Text>
      <Text style={styles.status}>Status: {status}</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>
  );
}

अगले चरण

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