ऐप्लिकेशन खोलने पर दिखने वाले विज्ञापन सेट अप करना

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

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

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

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

Android 

ca-app-pub-3940256099942544/9257395921

iOS 

ca-app-pub-3940256099942544/5575463023

विज्ञापन लोड और कैश होने की प्रोसेस के बारे में जानकारी

Google Mobile Ads SDK for React Native में विज्ञापन लोड और कैश होने की प्रोसेस, विज्ञापन लोड होने और कैश होने की प्रोसेस को ऑटोमेट करती है.

विज्ञापन लोड और कैश होने की प्रोसेस से ये फ़ायदे मिलते हैं:

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

विज्ञापनों को मैन्युअल तरीके से लोड करने के लिए, ऐप्लिकेशन खोलने पर दिखने वाला एक विज्ञापन लोड करें गाइड देखें.

प्रीलोड करना शुरू करें

विज्ञापनों को पहले से लोड करने के लिए, AppOpenAdPreloader.start तरीके को कॉल करें. साथ ही, बफ़र की स्थिति में होने वाले बदलावों पर नज़र रखने के लिए, preloadId वैल्यू, कॉन्फ़िगरेशन सेटिंग, और इवेंट कॉलबैक पास करें:

export function startAppOpenAdPreloader(
  adUnitId: string,
  preloadId: string,
  customPreloadCallback?: PreloadCallback,
): boolean {
  const started = AppOpenAdPreloader.start(
    preloadId,
    {
      request: {adUnitId},
      bufferSize: 2,
    },
    {
      // Called when an ad is preloaded into the buffer.
      onAdPreloaded: (event) => {
        console.log(`App open ad preloaded for ${event.preloadId}`);
        customPreloadCallback?.onAdPreloaded?.(event);
      },
      // Called when an ad fails to preload.
      onAdFailedToPreload: (error: LoadAdError) => {
        console.error('Failed to preload app open ad:', error.message);
        customPreloadCallback?.onAdFailedToPreload?.(error);
      },
      // Called when all preloaded ads in the buffer have been shown.
      onAdsExhausted: () => {
        console.log('App open ad buffer exhausted.');
        customPreloadCallback?.onAdsExhausted?.();
      },
    },
  );
  return started;
}

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

जब आपका ऐप्लिकेशन बफ़र से पहले से लोड किए गए विज्ञापन को पोल करता है, तो Google Mobile Ads SDK for React Native बफ़र को फिर से भरने के लिए, बैकग्राउंड में विज्ञापन को बदलने का अनुरोध करता है. अगर बफ़र में पहले से लोड किया गया कोई विज्ञापन नहीं बचा है, तो Google Mobile Ads SDK for React Native, onAdsExhausted कॉलबैक को शुरू करता है.

कैश मेमोरी में पहले से लोड करने की सीमाएं

Google Mobile Ads SDK for React Native, पहले से लोड किए गए विज्ञापनों की कुल संख्या पर, पूरे ऐप्लिकेशन के लिए एक सीमा लागू करता है:

  • डिफ़ॉल्ट सीमा: Google, मेमोरी में पहले से लोड किए गए ज़्यादा से ज़्यादा छह विज्ञापन सेव रखता है.
  • हमारा सुझाव है कि हर प्रीलोड आईडी के लिए, बफ़र साइज़ दो रखें.

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

पोल करें और विज्ञापन दिखाएं

पहले से लोड किए गए विज्ञापनों की उपलब्धता देखने और विज्ञापन इंस्टेंस को वापस पाने के लिए, AppOpenAdPreloader.pollAd तरीके को कॉल करें.

फ़ुल-स्क्रीन प्रज़ेंटेशन इवेंट सुनने के लिए, show तरीके को कॉल करने से पहले, दिखाए गए AppOpenAd इंस्टेंस की adEventCallback प्रॉपर्टी पर कॉलबैक रजिस्टर करें:

export function showPreloadedAppOpenAd(
  preloadId: string,
  customAdEventCallback?: FullScreenAdEventCallback,
) {
  if (!AppOpenAdPreloader.isAdAvailable(preloadId)) {
    console.log('No preloaded app open ad available right now.');
    return;
  }

  const ad = AppOpenAdPreloader.pollAd(preloadId);
  if (!ad) {
    return;
  }

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

  ad.show();
}

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

जवाब की जानकारी पढ़ें

कैश मेमोरी से विज्ञापन को हटाए बिना, पहले से लोड किए गए अगले विज्ञापन की जानकारी देखने के लिए, AppOpenAdPreloader.peekAdResponseInfo तरीके को कॉल करें:

export function peekAppOpenAdResponseInfo(
  preloadId: string,
): ResponseInfo | null {
  const responseInfo = AppOpenAdPreloader.peekAdResponseInfo(preloadId);
  if (responseInfo) {
    console.log('Next preloaded app open ad response info:', responseInfo);
  }
  return responseInfo;
}

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

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

ऐप्लिकेशन-लेवल मैनेजर का इस्तेमाल करने के कई अहम फ़ायदे हैं:

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

यहां दिए गए उदाहरण में, AppOpenAdPreloader ऑब्जेक्ट का इस्तेमाल करके, ऐप्लिकेशन-लेवल मैनेजर को लागू करने का तरीका बताया गया है:

export class AppOpenAdManager {
  private adUnitId: string;
  private preloadId: string;
  private appStateSubscription?: NativeEventSubscription;
  private startTimeoutId?: ReturnType<typeof setTimeout>;

  constructor(adUnitId: string, preloadId: string) {
    this.adUnitId = adUnitId;
    this.preloadId = preloadId;
  }

  start(): boolean {
    if (!AppOpenAdPreloader.getConfiguration(this.preloadId)) {
      AppOpenAdPreloader.start(
        this.preloadId,
        {
          request: {adUnitId: this.adUnitId},
          bufferSize: 2,
        },
        {
          onAdPreloaded: (event) => {
            console.log(`App open ad preloaded for ${event.preloadId}`);
          },
          onAdFailedToPreload: (error: LoadAdError) => {
            console.error('Failed to preload app open ad:', error.message);
          },
          onAdsExhausted: () => {
            console.log('App open ad buffer exhausted.');
          },
        },
      );
    }

    if (!this.appStateSubscription && !this.startTimeoutId) {
      // Delay attaching the listener to ensure native dismissal transitions complete
      this.startTimeoutId = setTimeout(() => {
        this.startTimeoutId = undefined;
        if (!this.appStateSubscription) {
          this.appStateSubscription = AppState.addEventListener(
            'change',
            (nextAppState: AppStateStatus) => {
              if (nextAppState === 'active') {
                this.showAdIfAvailable();
              }
            },
          );
        }
      }, APP_STATE_LISTENER_DELAY_MS);
    }

    return true;
  }

  pause(): void {
    if (this.startTimeoutId) {
      clearTimeout(this.startTimeoutId);
      this.startTimeoutId = undefined;
    }
    this.appStateSubscription?.remove();
    this.appStateSubscription = undefined;
  }

  stop(): void {
    this.pause();
    AppOpenAdPreloader.destroy(this.preloadId);
  }

  showAdIfAvailable() {
    if (!AppOpenAdPreloader.isAdAvailable(this.preloadId)) {
      console.log('App open ad is not preloaded or available right now.');
      return;
    }

    const ad = AppOpenAdPreloader.pollAd(this.preloadId);
    if (!ad) {
      return;
    }

    // Pause listener while presenting the ad
    this.pause();

    ad.adEventCallback = {
      onAdShowedFullScreenContent: () => {
        console.log('Preloaded app open ad showed full screen content.');
      },
      onAdDismissedFullScreenContent: () => {
        console.log('Preloaded app open ad dismissed full screen content.');
        ad.destroy();
        this.start();
      },
      onAdFailedToShowFullScreenContent: (error) => {
        console.error('Failed to show preloaded app open ad:', error);
        ad.destroy();
        this.start();
      },
    };

    ad.show();
  }
}

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

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

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

  1. फ़ुल-स्क्रीन विज्ञापन दिखाने से पहले, AppState इवेंट लिसनर को हटाएं.
  2. यह पक्का करने के लिए कि उपयोगकर्ता के विज्ञापन खारिज करने या विज्ञापन न दिखने पर भी ऑडियो फिर से चलने लगे, onAdDismissedFullScreenContent और onAdFailedToShowFullScreenContent कॉलबैक में AppState इवेंट लिसनर को फिर से जोड़ें.

फ़ोरग्राउंड इवेंट लिसनर को रोकने और फिर से शुरू करने का उदाहरण देखने के लिए, AppOpenAdManager लागू करने का तरीका देखें.

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

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

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

संसाधन मिटाना

जब किसी स्क्रीन या विज्ञापन यूनिट आईडी के लिए, विज्ञापनों को पहले से लोड करने की ज़रूरत न हो, जैसे कि विज्ञापनों को पहले से लोड करने वाली स्क्रीन से दूर जाने पर, प्रीलोडर के संसाधनों को रिलीज़ करने और मेमोरी में इस्तेमाल न किए गए विज्ञापन ऑब्जेक्ट को सेव होने से रोकने के लिए, AppOpenAdPreloader.destroy तरीके को कॉल करें:

export function destroyAppOpenAdPreloader(preloadId: string) {
  AppOpenAdPreloader.destroy(preloadId);
}

प्रीलोडर सूची को खत्म करने के साथ-साथ, जब कोई उपयोगकर्ता किसी विज्ञापन को खारिज कर देता है या विज्ञापन नहीं दिखता है, तो पोल किए गए विज्ञापन के अलग-अलग इंस्टेंस को खत्म करना न भूलें. ज़्यादा जानकारी के लिए, पोल करें और विज्ञापन दिखाएं लेख पढ़ें.

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

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

export function AppOpenScreen() {
  const [numAdsAvailable, setNumAdsAvailable] = useState<number>(0);
  const [status, setStatus] = useState<string>('Preloader idle.');

  const refreshAdCount = () => {
    const count = AppOpenAdPreloader.getNumAdsAvailable(PRELOAD_ID);
    setNumAdsAvailable(count);
  };

  useEffect(() => {
    // Start preloading ads on component mount
    const started = startAppOpenAdPreloader(APP_OPEN_AD_UNIT_ID, PRELOAD_ID, {
      onAdPreloaded: () => {
        refreshAdCount();
        setStatus('App open ad preloaded into buffer.');
      },
      onAdFailedToPreload: (error) => {
        setStatus(`Failed to preload app open ad: ${error.message}`);
      },
      onAdsExhausted: () => {
        refreshAdCount();
        setStatus('Preload buffer exhausted for app open ads.');
      },
    });
    if (started) {
      setStatus('Preloader started.');
    }

    // Clean up preloader resources on component unmount
    return () => {
      destroyAppOpenAdPreloader(PRELOAD_ID);
    };
  }, []);

  const handleShowAd = () => {
    setStatus('Showing preloaded ad...');
    showPreloadedAppOpenAd(PRELOAD_ID, {
      onAdDismissedFullScreenContent: () => {
        setStatus('Ad dismissed.');
      },
      onAdFailedToShowFullScreenContent: (error) => {
        setStatus(`Failed to show preloaded ad: ${error.message}`);
      },
    });
    refreshAdCount();
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Preload App Open Ads</Text>
      <Text style={styles.status}>Status: {status}</Text>
      <Text style={styles.status}>Ads Available: {numAdsAvailable}</Text>
      <View style={styles.buttonGroup}>
        <Button
          title="Show Preloaded Ad"
          onPress={handleShowAd}
          disabled={numAdsAvailable === 0}
        />
      </View>
    </View>
  );
}

इनकी जगह ये डालें:

  • APP_OPEN_AD_UNIT_ID को अपने विज्ञापन यूनिट आईडी से बदलें.
  • PRELOAD_ID को अपने प्रीलोडर आईडी के साथ.

अगले चरण

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