Google Display Network में दिखने वाले नेटिव विज्ञापन

जब कोई नेटिव विज्ञापन लोड होता है, तो आपके ऐप्लिकेशन को विज्ञापन ऑब्जेक्ट मिलता है. इसमें विज्ञापन की ऐसेट शामिल होती हैं. जैसे, विज्ञापन की इमेज, टेक्स्ट, और वीडियो. आपका ऐप्लिकेशन, नेटिव विज्ञापन व्यू लेआउट में विज्ञापन की ऐसेट दिखाने के लिए ज़िम्मेदार है. नीतियों का पालन करते हुए नेटिव विज्ञापन दिखाने के लिए, Google Mobile Ads SDK for React Native ये कॉम्पोनेंट उपलब्ध कराता है:

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

इस पेज पर, नेटिव विज्ञापन की ऐसेट रेंडर करने, मीडिया कॉन्टेंट को कॉन्फ़िगर करने, और Google Mobile Ads SDK for React Native का इस्तेमाल करके विज्ञापन इवेंट मैनेज करने का तरीका बताया गया है.

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

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

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

NativeAdView कॉम्पोनेंट, आपके नेटिव विज्ञापन के लेआउट के लिए टॉप-लेवल कंटेनर है. यह कॉम्पोनेंट, सभी ऐसेट व्यू को रैप करता है और ऐसेट व्यू को लोड किए गए NativeAd इंस्टेंस से बाइंड करता है.

अपनी ऐसेट को NativeAdView कॉम्पोनेंट में रैप करने से ये काम होते हैं:

  • स्क्रीन पर विज्ञापन दिखने पर इंप्रेशन रिकॉर्ड करें.
  • जब कोई उपयोगकर्ता इंटरैक्टिव ऐसेट पर टैप करता है, तो क्लिक रिकॉर्ड करना और नेविगेशन को मैनेज करना.
  • AdChoices ओवरले को दिखाना और उसकी जगह तय करना.

विज्ञापन एट्रिब्यूशन और AdChoices

Google के सभी नेटिव विज्ञापनों को लागू करने के लिए, विज्ञापन एट्रिब्यूशन और AdChoices ओवरले, नीति से जुड़ी ज़रूरी शर्तें हैं.

जब लेआउट को NativeAdView में रैप किया जाता है, तो Google Mobile Ads SDK for React Native डिफ़ॉल्ट रूप से विज्ञापन व्यू के सबसे ऊपर दाएं कोने में, AdChoices आइकॉन को अपने-आप रेंडर करता है. आइकॉन दिखाने के लिए, आपको कस्टम कोड या ऐसेट व्यू जोड़ने की ज़रूरत नहीं है.

आइकॉन के कोने के प्लेसमेंट को पसंद के मुताबिक बनाने के लिए, बेहतर नेटिव सुविधाएं सेट करें देखें.

ऐसेट व्यू को पॉप्युलेट और रजिस्टर करना

Google Mobile Ads SDK for React Native के साथ ऐसेट व्यू रजिस्टर करने के लिए, हर ऐसेट कॉम्पोनेंट को NativeAdView.Asset रैपर के साथ रैप करें. साथ ही, NativeAdAssetNames ऑब्जेक्ट का इस्तेमाल करके ऐसेट टाइप की जानकारी दें. हर NativeAdView.Asset रैपर में एक React Native होस्ट एलिमेंट होना चाहिए, जैसे कि Text, Image या View. यह एलिमेंट, nativeID प्रॉपर्टी को स्वीकार करता है. उपलब्ध एसेट प्रॉपर्टी के बारे में जानकारी के लिए, क्लास NativeAd देखें.

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

एसेट टाइप जानकारी और उदाहरण
ADVERTISER

टारगेट प्रॉपर्टी: NativeAd.advertiser

{/* The advertiser or sponsor name (optional). */}
{ad.advertiser && (
  <NativeAdView.Asset type={NativeAdAssetNames.ADVERTISER}>
    <Text>{ad.advertiser}</Text>
  </NativeAdView.Asset>
)}
BODY

टारगेट प्रॉपर्टी: NativeAd.body

{/* Detailed description text (optional). */}
{ad.body && (
  <NativeAdView.Asset type={NativeAdAssetNames.BODY}>
    <Text>{ad.body}</Text>
  </NativeAdView.Asset>
)}
CALL_TO_ACTION

टारगेट प्रॉपर्टी: NativeAd.callToAction

{/* Action button text such as "Install" or "Shop Now" (optional). */}
{ad.callToAction && (
  <NativeAdView.Asset type={NativeAdAssetNames.CALL_TO_ACTION}>
    <View>
      <Text>{ad.callToAction}</Text>
    </View>
  </NativeAdView.Asset>
)}
HEADLINE

टारगेट प्रॉपर्टी: NativeAd.headline

{/* The main title of the ad (required). */}
<NativeAdView.Asset type={NativeAdAssetNames.HEADLINE}>
  <Text>{ad.headline}</Text>
</NativeAdView.Asset>
ICON

टारगेट प्रॉपर्टी: NativeAd.icon

{/* The advertiser logo or app icon (optional). */}
{ad.icon && (
  <NativeAdView.Asset type={NativeAdAssetNames.ICON}>
    <Image source={{uri: ad.icon.uri}} />
  </NativeAdView.Asset>
)}
PRICE

टारगेट प्रॉपर्टी: NativeAd.price

{/* Price string for products or paid apps (optional). */}
{ad.price && (
  <NativeAdView.Asset type={NativeAdAssetNames.PRICE}>
    <Text>{ad.price}</Text>
  </NativeAdView.Asset>
)}
STAR_RATING

टारगेट प्रॉपर्टी: NativeAd.starRating

{/* App rating score from 0 to 5 (optional). */}
{ad.starRating !== undefined && ad.starRating > 0 && (
  <NativeAdView.Asset type={NativeAdAssetNames.STAR_RATING}>
    <Text>★ {ad.starRating.toFixed(1)}</Text>
  </NativeAdView.Asset>
)}
STORE

टारगेट प्रॉपर्टी: NativeAd.store

{/* App store source such as "Google Play" or "App Store" (optional). */}
{ad.store && (
  <NativeAdView.Asset type={NativeAdAssetNames.STORE}>
    <Text>{ad.store}</Text>
  </NativeAdView.Asset>
)}

नीचे दिए गए वैकल्पिक ऐसेट व्यू को हमेशा शर्त के साथ रेंडर करें:

  • ad.icon
  • ad.body
  • ad.advertiser
  • ad.price
  • ad.store
  • ad.starRating

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

मीडिया कॉन्टेंट दिखाना

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

मीडिया का साइज़ बदलने वाला मोड लागू करें

मीडिया व्यू कंटेनर में इमेज के स्केल होने के तरीके को कंट्रोल करने के लिए, NativeAdMediaView कॉम्पोनेंट पर resizeMode प्रॉपर्टी लागू करें:

      {/* Video or image media asset (optional). */}
      <NativeAdMediaView resizeMode={ResizeMode.COVER} />

ResizeMode के लिए ये वैल्यू उपलब्ध हैं:

मीडिया का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) सेट करना

अपने मीडिया व्यू लेआउट के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) से मैच करने वाले विज्ञापन क्रिएटिव का अनुरोध करने के लिए, NativeAdRequest इंस्टेंस पर aspectRatio प्रॉपर्टी की जानकारी दें.

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

export async function loadNativeAdWithAspectRatio(
  adUnitId: string,
): Promise<NativeAd | null> {
  try {
    const ad = await NativeAd.load({
      adUnitId,
      aspectRatio: NativeMediaAspectRatio.LANDSCAPE,
    });
    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load native ad:', loadError.message);
    return null;
  }
}

NativeMediaAspectRatio के लिए उपलब्ध वैल्यू में ये शामिल हैं:

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

इंप्रेशन या क्लिक जैसे विज्ञापन लाइफ़साइकल इवेंट की सूचना देने के लिए, NativeAdView कॉम्पोनेंट को इवेंट कॉलबैक पास करें. सभी उपलब्ध कॉलबैक के लिए, AdEventCallback देखें.

यहां दिए गए उदाहरण में, विज्ञापन इवेंट के लिए इवेंट कॉलबैक पास किए गए हैं. जैसे, फ़ुल-स्क्रीन कॉन्टेंट दिखाना या खारिज करना. ये कॉलबैक, NativeAdView कॉम्पोनेंट को पास किए गए हैं:

export function NativeAdWithEvents({ad}: {ad: NativeAd}) {
  return (
    <NativeAdView
      ad={ad}
      // Called when the user taps the ad.
      onAdClicked={() => {
        console.log('Native ad was clicked.');
      }}
      // Called when an impression is recorded.
      onAdImpression={() => {
        console.log('Native ad recorded an impression.');
      }}
      // Called when the ad presents full-screen content.
      onAdShowedFullScreenContent={() => {
        console.log('Native ad showed full screen content.');
      }}
      // Called when full-screen content is dismissed.
      onAdDismissedFullScreenContent={() => {
        console.log('Native ad dismissed full screen content.');
      }}
      // Called when the ad is estimated to have earned money.
      onAdPaid={(adValue: AdValue) => {
        console.log(
          `Native ad paid: ${adValue.amountMicros} ${adValue.currencyCode}`,
        );
      }}
    />
  );
}

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

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

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

export function NativeAdCard({ad}: {ad: NativeAd}) {
  return (
    <NativeAdView ad={ad}>
      {/* 1. Ad Attribution Badge */}
      <View>
        <Text>Ad</Text>
      </View>

      {/* 2. Header: Icon, Headline, Advertiser, and Star Rating */}
      <View>
        {/* The advertiser logo or app icon (optional). */}
        {ad.icon && (
          <NativeAdView.Asset type={NativeAdAssetNames.ICON}>
            <Image source={{uri: ad.icon.uri}} />
          </NativeAdView.Asset>
        )}

        <View>
          {/* The main title of the ad (required). */}
          <NativeAdView.Asset type={NativeAdAssetNames.HEADLINE}>
            <Text>{ad.headline}</Text>
          </NativeAdView.Asset>

          {/* The advertiser or sponsor name (optional). */}
          {ad.advertiser && (
            <NativeAdView.Asset type={NativeAdAssetNames.ADVERTISER}>
              <Text>{ad.advertiser}</Text>
            </NativeAdView.Asset>
          )}

          {/* App rating score from 0 to 5 (optional). */}
          {ad.starRating !== undefined && ad.starRating > 0 && (
            <NativeAdView.Asset type={NativeAdAssetNames.STAR_RATING}>
              <Text>★ {ad.starRating.toFixed(1)}</Text>
            </NativeAdView.Asset>
          )}
        </View>
      </View>

      {/* 3. Media Content */}
      {/* Video or image media asset (optional). */}
      <NativeAdMediaView resizeMode={ResizeMode.COVER} />

      {/* 4. Body Text */}
      {/* Detailed description text (optional). */}
      {ad.body && (
        <NativeAdView.Asset type={NativeAdAssetNames.BODY}>
          <Text>{ad.body}</Text>
        </NativeAdView.Asset>
      )}

      {/* 5. Footer: Price, Store, and Call To Action */}
      <View>
        {/* Price string for products or paid apps (optional). */}
        {ad.price && (
          <NativeAdView.Asset type={NativeAdAssetNames.PRICE}>
            <Text>{ad.price}</Text>
          </NativeAdView.Asset>
        )}

        {/* App store source such as "Google Play" or "App Store" (optional). */}
        {ad.store && (
          <NativeAdView.Asset type={NativeAdAssetNames.STORE}>
            <Text>{ad.store}</Text>
          </NativeAdView.Asset>
        )}

        {/* Action button text such as "Install" or "Shop Now" (optional). */}
        {ad.callToAction && (
          <NativeAdView.Asset type={NativeAdAssetNames.CALL_TO_ACTION}>
            <View>
              <Text>{ad.callToAction}</Text>
            </View>
          </NativeAdView.Asset>
        )}
      </View>
    </NativeAdView>
  );
}