बैनर विज्ञापन सेट अप करना

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

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

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

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

Android 

ca-app-pub-3940256099942544/9214589741

iOS 

ca-app-pub-3940256099942544/2435281174

विज्ञापन का साइज़ पाना

ऐंकर किए गए अडैप्टिव बैनर विज्ञापन का अनुरोध करने के लिए, डेंसिटी-इंडिपेंडेंट पिक्सल (डीपी) में उपलब्ध विज्ञापन कंटेनर की चौड़ाई के साथ, AdSize.getLargeAnchoredAdaptiveBannerAdSize तरीके को कॉल करें. यह तरीका, एक प्रॉमिस दिखाता है जो AdSize ऑब्जेक्ट को रिज़ॉल्व करता है.

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

export async function getAdaptiveAdSize(width: number): Promise<AdSize> {
  const adSize = await AdSize.getLargeAnchoredAdaptiveBannerAdSize(width);
  return adSize;
}

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

AdSize ऑब्जेक्ट मिलने के बाद, विज्ञापन यूनिट का आईडी और विज्ञापन के साइज़ के साथ BannerAd क्लास पर load तरीके को कॉल करें.

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

export function loadBannerAd(
  adUnitId: string,
  adSize: AdSize,
  callback?: BannerAdLoadCallback,
): void {
  BannerAd.load(
    {adUnitId, adSize},
    {
      // Called when an ad has finished loading.
      onAdLoaded: (ad) => {
        console.log('Banner ad loaded successfully.');
        callback?.onAdLoaded?.(ad);
      },
      // Called when an ad request fails.
      onAdFailedToLoad: (error: LoadAdError) => {
        console.error('Failed to load banner ad:', error.message);
        callback?.onAdFailedToLoad?.(error);
      },
    },
  );
}

किसी विज्ञापन को रीफ़्रेश करना

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

बैनर विज्ञापन दिखाना

लोड किए गए BannerAd इंस्टेंस को दिखाने के लिए, विज्ञापन इंस्टेंस को अपनी व्यू हैरारकी (व्यू और व्यू ग्रुप के लेआउट का क्रम) में मौजूद BannerAdView कॉम्पोनेंट की ad प्रॉपर्टी में पास करें.

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

export function BannerAdViewComponent({ad}: {ad: BannerAd}): React.JSX.Element {
  useEffect(() => {
    // Destroy native resources when the component unmounts.
    return () => {
      ad.destroy();
    };
  }, [ad]);

  return <BannerAdView ad={ad} />;
}

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

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

विज्ञापन इंप्रेशन और क्लिक जैसे विज्ञापन इवेंट को सुनने के लिए, BannerAdView कॉम्पोनेंट पर कॉलबैक सेट करें. सभी कॉलबैक के लिए, BannerAdViewProps देखें.

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

export function BannerEventsExample({ad}: {ad: BannerAd}): React.JSX.Element {
  return (
    <BannerAdView
      ad={ad}
      // Called when an impression is recorded for an ad.
      onAdImpression={() => {
        console.log('Banner ad recorded an impression.');
      }}
      // Called when a click is recorded for an ad.
      onAdClicked={() => {
        console.log('Banner ad clicked.');
      }}
      // Called when the ad opens an in-app overlay or landing page.
      onAdShowedFullScreenContent={() => {
        console.log('Banner ad opened overlay content.');
      }}
      // Called when the user dismisses the ad overlay.
      onAdDismissedFullScreenContent={() => {
        console.log('Banner ad overlay dismissed.');
      }}
      // Called when the ad is estimated to have earned money.
      onAdPaid={(adValue) => {
        console.log(
          `Banner ad paid: ${adValue.amountMicros} ${adValue.currencyCode}`,
        );
      }}
      // Called when the ad automatically refreshes.
      onAdRefreshed={() => {
        console.log('Banner ad refreshed.');
      }}
      // Called when the ad fails to automatically refresh.
      onAdFailedToRefresh={(error) => {
        console.error('Banner ad failed to refresh:', error.message);
      }}
    />
  );
}

इस उदाहरण में, विज्ञापन से जुड़े इवेंट को सुना जाता है. जैसे, विज्ञापन खारिज करना, इंप्रेशन, क्लिक, फ़ुल-स्क्रीन प्रज़ेंटेशन, विज्ञापन से मिलने वाला अनुमानित रेवेन्यू, और रीफ़्रेश करने में मिली सफलता और विफलता.

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

इस सेक्शन में, React Native कॉम्पोनेंट में बैनर विज्ञापन को इंटिग्रेट करने का पूरा उदाहरण दिया गया है.

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

export function BannerScreen() {
  const {width} = useWindowDimensions();
  const insets = useSafeAreaInsets();
  const [ad, setAd] = useState<BannerAd | null>(null);
  const [status, setStatus] = useState('Idle');

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

  const handleLoadAd = async () => {
    setStatus('Loading adaptive banner ad...');
    try {
      const adaptiveSize = await getAdaptiveAdSize(width);
      loadBannerAd(BANNER_AD_UNIT_ID, adaptiveSize, {
        onAdLoaded: (loadedAd) => {
          setAd(loadedAd);
          setStatus('Banner ad loaded successfully.');
        },
        onAdFailedToLoad: (error: LoadAdError) => {
          setStatus(`Failed to load banner ad: ${error.message}`);
        },
      });
    } catch (error) {
      setStatus(`Failed to get adaptive ad size: ${error}`);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Anchored Adaptive Banner Ad</Text>
      <Text style={styles.status}>Status: {status}</Text>
      <View style={styles.buttonGroup}>
        <Button title="Load Banner Ad" onPress={handleLoadAd} />
      </View>
      {ad ? (
        <View style={[styles.bannerContainer, {bottom: insets.bottom}]}>
          <BannerAdView
            ad={ad}
            onAdImpression={() => setStatus('Banner ad recorded impression.')}
            onAdClicked={() => setStatus('Banner ad clicked.')}
            onAdShowedFullScreenContent={() =>
              setStatus('Banner ad showed overlay content.')
            }
            onAdDismissedFullScreenContent={() =>
              setStatus('Banner ad overlay dismissed.')
            }
          />
        </View>
      ) : null}
    </View>
  );
}

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

अगले चरण

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