ऐप्लिकेशन खोलने पर दिखने वाला एक विज्ञापन लोड करना

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

ऐप्लिकेशन खोलने पर दिखने वाले विज्ञापन के लिए सलाह और सबसे सही तरीके.

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

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

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

Android 

ca-app-pub-3940256099942544/9257395921

iOS 

ca-app-pub-3940256099942544/5575463023

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

ऐप्लिकेशन खोलने पर दिखने वाले विज्ञापन को लोड करने के लिए, load तरीके को कॉल करें.

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

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

विज्ञापन इवेंट सुनना

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

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

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

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

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

ऐप्लिकेशन खोलने पर दिखने वाला विज्ञापन दिखाने के लिए, show तरीके को कॉल करें:

export function showAppOpenAd(ad: AppOpenAd) {
  ad.show();
}

ऐप्लिकेशन-लेवल मैनेजर की मदद से विज्ञापन मैनेज करना

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

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

export class SingleLoadAppOpenAdManager {
  private ad: AppOpenAd | null = null;
  private loadTime = 0;
  private isShowingAd = false;

  async loadAd(adUnitId: string) {
    // Avoid re-loading if an ad is already loaded or showing.
    if (this.ad) {
      return;
    }
    try {
      this.ad = await AppOpenAd.load({adUnitId});
      this.loadTime = Date.now();
      this.ad.adEventCallback = {
        onAdDismissedFullScreenContent: () => {
          this.ad?.destroy();
          this.ad = null;
          this.isShowingAd = false;
          // Preload the next ad for future foreground transitions.
          this.loadAd(adUnitId);
        },
        onAdFailedToShowFullScreenContent: () => {
          // An ad object that fails to present is consumed and cannot be reused.
          // Clean up native resources and preload a new ad for future events.
          this.ad?.destroy();
          this.ad = null;
          this.isShowingAd = false;
          this.loadAd(adUnitId);
        },
      };
    } catch (error) {
      console.error('Failed to load app open ad:', error);
    }
  }

  showAdIfAvailable() {
    if (!this.ad || !this.isAdAvailable()) {
      console.warn(
        'App open ad cannot be shown: ad is not loaded or has expired.',
      );
      return;
    }
    if (this.isShowingAd) {
      console.warn('App open ad cannot be shown: an ad is already displaying.');
      return;
    }

    this.ad.show();
    this.isShowingAd = true;
  }

  isAdAvailable(): boolean {
    // App Open ads expire after 4 hours per Google Mobile Ads policy.
    const FOUR_HOURS_IN_MS = 4 * 60 * 60 * 1000;
    return this.ad !== null && Date.now() - this.loadTime < FOUR_HOURS_IN_MS;
  }
}

ऐप्लिकेशन-लेवल मैनेजर की मदद से ये काम किए जा सकते हैं:

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

ऐप्लिकेशन के फ़ोरग्राउंड इवेंट सुनने की अनुमति

जब आपका ऐप्लिकेशन फ़ोरग्राउंड में वापस आए, तब विज्ञापन दिखाने के लिए, AppState मॉड्यूल का इस्तेमाल करें. इससे आपको अपने ऐप्लिकेशन के रूट में, ऐप्लिकेशन की स्थिति में होने वाले बदलावों के बारे में पता चलेगा. उदाहरण के लिए, App.tsx फ़ाइल में. तो निम्न कार्य करें:

  1. 'change' इवेंट के लिए, AppState लिसनर को रजिस्टर करें.
  2. जब स्थिति 'active' में बदल जाए, तब विज्ञापन मैनेजर इंस्टेंस पर showAdIfAvailable तरीके को कॉल करें.

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

export function setupAppOpenAdForegroundListener(adManager: {
  showAdIfAvailable: () => void;
}): NativeEventSubscription {
  return AppState.addEventListener('change', (nextAppState: AppStateStatus) => {
    if (nextAppState === 'active') {
      adManager.showAdIfAvailable();
    }
  });
}

कोल्ड स्टार्ट और लोडिंग स्क्रीन के बारे में जानकारी

कोल्ड स्टार्ट तब होता है, जब आपका ऐप्लिकेशन शुरू से लॉन्च होता है. उदाहरण के लिए, जब कोई उपयोगकर्ता आपके ऐप्लिकेशन को पहली बार खोलता है या जब डिवाइस, मेमोरी खाली करने के लिए ऐप्लिकेशन को बंद कर देता है. कोल्ड स्टार्ट के दौरान, आपके पास पहले से लोड किया गया कोई ऐसा ऐप्लिकेशन खोलने पर दिखने वाला विज्ञापन नहीं होता जिसे अगली बार दिखाया जा सके.

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

टेस्ट स्क्रीन सेट अप करना

विज्ञापनों को इंटरैक्टिव तरीके से टेस्ट करने या किसी खास स्क्रीन पर विज्ञापन दिखाने के लिए, कॉम्पोनेंट स्टेट में विज्ञापन इंस्टेंस को मैनेज करें.

यहां दिए गए उदाहरण में, ऐप्लिकेशन खोलने पर दिखने वाले विज्ञापन को useEffect क्लीनअप हुक के साथ React Native कॉम्पोनेंट में इंटिग्रेट किया गया है. अगर विज्ञापन दिखने से पहले कॉम्पोनेंट अनमाउंट हो जाता है, तो यह हुक नेटिव रिसॉर्स को रिलीज़ कर देता है.

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

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

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

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

  return (
    <View style={styles.container}>
      <Text style={styles.title}>App Open 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>
  );
}

अगले चरण

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