নেটিভ বিজ্ঞাপন দেখানো

নেটিভ বিজ্ঞাপন লোড হলে, আপনার অ্যাপ বিজ্ঞাপনের অ্যাসেট সহ একটি বিজ্ঞাপন অবজেক্ট পায়, যেমন বিজ্ঞাপনের ছবি, টেক্সট ও ভিডিও। নেটিভ বিজ্ঞাপন ভিউ লেআউটে বিজ্ঞাপন অ্যাসেট দেখানোর দায়িত্ব আপনার অ্যাপের। নীতি মেনে নেটিভ বিজ্ঞাপন দেখানোর জন্য, Google Mobile Ads SDK for React Native নিম্নলিখিত কম্পোনেন্ট প্রদান করে:

নেটিভ বিজ্ঞাপন সঠিকভাবে দেখানোর ব্যাপারে আরও জানতে, নেটিভ অ্যাডভান্সড ব্যবহার করে নেটিভ বিজ্ঞাপন দেখুন।

এই পৃষ্ঠায় Google Mobile Ads SDK for React Native ব্যবহার করে কীভাবে নেটিভ বিজ্ঞাপনের অ্যাসেট রেন্ডার, মিডিয়া কন্টেন্ট কনফিগার এবং বিজ্ঞাপনের ইভেন্ট ম্যানেজ করতে হয় তা কভার করা হয়েছে।

পূর্বশর্ত

চালিয়ে যাওয়ার আগে, নিম্নলিখিত কাজগুলি করুন:

নেটিভ বিজ্ঞাপন ভিউ কম্পোনেন্ট নির্ধারণ করুন

NativeAdView কম্পোনেন্ট হল আপনার নেটিভ বিজ্ঞাপন লেআউটের টপ-লেভেল কন্টেনার। এই কম্পোনেন্ট সব স্বতন্ত্র অ্যাসেট ভিউকে র‍্যাপ করে এবং অ্যাসেট ভিউকে লোড করা NativeAd ইনস্ট্যান্সের সাথে বাইন্ড করে।

NativeAdView কম্পোনেন্টে আপনার অ্যাসেট র‍্যাপ করলে নিম্নলিখিত কাজগুলি হয়:

  • স্ক্রিনে বিজ্ঞাপন দেখানো হলে ইম্প্রেশন রেকর্ড করুন।
  • ব্যবহারকারী ইন্টার‍্যাক্টিভ অ্যাসেটে ট্যাপ করলে ক্লিক রেকর্ড করুন এবং নেভিগেশন ম্যানেজ করুন।
  • AdChoices ওভারলে দেখান ও পজিশন করুন।

বিজ্ঞাপন অ্যাট্রিবিউশন ও AdChoices

বিজ্ঞাপনের অ্যাট্রিবিউশন এবং AdChoices ওভারলে হল সমস্ত Google নেটিভ বিজ্ঞাপন প্রয়োগের জন্য বাধ্যতামূলক নীতি সংক্রান্ত প্রয়োজনীয়তা।

আপনি 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

কোনও বিজ্ঞাপন ঐচ্ছিক অ্যাসেট বাদ দিলে, আপনার অ্যাপে খালি UI এলিমেন্ট দেখানো যাবে না।

মিডিয়া কন্টেন্ট দেখুন

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>
  );
}