ব্যানার বিজ্ঞাপন সেট-আপ করা

ব্যানার বিজ্ঞাপন আপনার অ্যাপের লেআউটে একটি নির্দিষ্ট জায়গা দখল করে, যেমন ডিভাইসের স্ক্রিনের উপরে বা নিচে। ব্যবহারকারী আপনার অ্যাপের সাথে ইন্টার‍্যাক্ট করার সময় এই বিজ্ঞাপনগুলি স্ক্রিনে থাকে এবং আপনার সেট করা সময়সীমা অনুযায়ী রিফ্রেশ হয়। অ্যাঙ্কর করা অ্যাডাপ্টিভ ব্যানার আপনার উল্লেখ করা বিজ্ঞাপনের প্রস্থ ব্যবহার করে প্রতিটি ডিভাইসের জন্য বিজ্ঞাপনের সাইজ ব্যবহার করে।

এই পৃষ্ঠায় অ্যাঙ্কর করা অ্যাডাপ্টিভ ব্যানার বিজ্ঞাপন কীভাবে React Native অ্যাপে ইন্টিগ্রেট করতে হয় তা কভার করা হয়েছে।

পূর্বশর্ত

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

Android 

ca-app-pub-3940256099942544/9214589741

iOS 

ca-app-pub-3940256099942544/2435281174

বিজ্ঞাপনের সাইজ পান

অ্যাঙ্কর করা অ্যাডাপ্টিভ ব্যানার বিজ্ঞাপনের অনুরোধ করতে, ঘনত্ব-নিরপেক্ষ পিক্সেল (dp)-এ আপনার উপলভ্য বিজ্ঞাপন কন্টেনারের প্রস্থ সহ 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);
      },
    },
  );
}

বিজ্ঞাপন রিফ্রেশ করা

আপনি যদি রিফ্রেশ করার জন্য আপনার বিজ্ঞাপন ইউনিট কনফিগার করে থাকেন, তাহলে বিজ্ঞাপন লোড না হলে আপনাকে অন্য বিজ্ঞাপনের জন্য অনুরোধ করতে হবে না। AdMob UI-তে আপনার উল্লেখ করা যেকোনও রিফ্রেশ রেট Google Mobile Ads SDK for React Native মেনে চলে। আপনি রিফ্রেশ করার সুবিধা চালু না করে থাকলে, নতুন অনুরোধ করুন। বিজ্ঞাপন ইউনিট রিফ্রেশ করার ব্যাপারে আরও জানতে, যেমন রিফ্রেশ রেট সেট করা, দেখুন ব্যানার বিজ্ঞাপনের জন্য অটোমেটিক রিফ্রেশ ব্যবহার করুন।

ব্যানার বিজ্ঞাপন দেখানো

লোড করা 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-এর জায়গায় আপনার বিজ্ঞাপন ইউনিট আইডি লিখুন।

পরবর্তী ধাপ

ব্যানার বিজ্ঞাপন ইন্টিগ্রেট করার পরে, নিম্নলিখিত বিষয়গুলি এক্সপ্লোর করুন: