একটি ইন্টারস্টিশিয়াল বিজ্ঞাপন লোড করা

পৃষ্ঠা মধ্যকালিন বিজ্ঞাপন হল ফুল-স্ক্রিন বিজ্ঞাপন যা আপনার অ্যাপের ট্রানজিশন পয়েন্টে দেখানো হয়, যেমন স্ক্রিনের মধ্যে বা কোনও গেমের লেভেল পরিবর্তন হওয়ার সময়। আপনার ব্যবহারকারীরা গন্তব্যে যেতে বিজ্ঞাপনে ট্যাপ করতে পারেন অথবা বিজ্ঞাপন বন্ধ করে অ্যাপে ফিরে আসতে পারেন। আরও জানতে, ইন্টারস্টিশিয়াল বিজ্ঞাপন সংক্রান্ত নির্দেশিকা এবং কেস স্টাডি দেখুন।

এই নির্দেশিকা থেকে আপনি জানতে পারবেন যে কীভাবে React Native অ্যাপে ইন্টারস্টিশিয়াল বিজ্ঞাপন ইন্টিগ্রেট করতে হয়।

পূর্বশর্ত

Android 

ca-app-pub-3940256099942544/1033173712

iOS 

ca-app-pub-3940256099942544/4411468910

বিজ্ঞাপন লোড করা

পৃষ্ঠা মধ্যকালিন বিজ্ঞাপন লোড করতে, InterstitialAd ক্লাসে load পদ্ধতি কল করুন।

নিম্নলিখিত উদাহরণটি সফল হলে ইন্টারস্টিশিয়াল বিজ্ঞাপন লোড করে এবং ব্যর্থ হলে ত্রুটি লগ করে:

export async function loadInterstitialAd(
  adUnitId: string,
): Promise<InterstitialAd | null> {
  try {
    const ad = await InterstitialAd.load({adUnitId});
    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load interstitial ad:', loadError.message);
    return null;
  }
}

বিজ্ঞাপন ইভেন্টের জন্য শুনুন

বিজ্ঞাপন দেখানোর আগে, লোড করা InterstitialAd ইনস্ট্যান্সে adEventCallback লিসেনার সেট করুন। এই লিসেনার বিজ্ঞাপন লাইফসাইকেল ইভেন্টের জন্য কলব্যাক পায়, যেমন স্ক্রিনে বিজ্ঞাপন দেখানো বা ব্যবহারকারীর বিজ্ঞাপনে ট্যাপ করা। উপলভ্য কলব্যাকের জন্য, AdEventCallback দেখুন।

নিম্নলিখিত উদাহরণে বিজ্ঞাপন ইভেন্ট শোনার জন্য কলব্যাক সেট করা হয়েছে:

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

ব্যবহারকারী বিজ্ঞাপন বন্ধ করলে বা বিজ্ঞাপন দেখাতে না পারলে, এই উদাহরণে destroy পদ্ধতিও কল করা হয়। এই প্রসেস বিজ্ঞাপন দ্বারা ব্যবহৃত রিসোর্স রিলিজ করে।

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

পৃষ্ঠা মধ্যবর্তী বিজ্ঞাপন দেখাতে, লোড করা InterstitialAd ইনস্ট্যান্সে show পদ্ধতি কল করুন।

নিম্নলিখিত উদাহরণে একটি ইন্টারস্টিশিয়াল বিজ্ঞাপন দেখানো হয়েছে:

export function showInterstitialAd(ad: InterstitialAd) {
  ad.show();
}

সম্পূর্ণ উদাহরণ দেখুন

এই বিভাগে React Native অ্যাপে ইন্টারস্টিশিয়াল বিজ্ঞাপন ইন্টিগ্রেট করার সম্পূর্ণ উদাহরণ দেওয়া হয়েছে।

নিচে দেওয়া উদাহরণে, React Native কম্পোনেন্টে বিজ্ঞাপন ইন্টিগ্রেট করা হয়েছে, স্টেটে বিজ্ঞাপনের ইনস্ট্যান্স ম্যানেজ করা হয়েছে এবং বিজ্ঞাপন লোড ও দেখানোর জন্য কন্ট্রোল প্রদান করা হয়েছে:

export function InterstitialSingleLoadScreen() {
  const [ad, setAd] = useState<InterstitialAd | null>(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [status, setStatus] = useState<string>('Idle');

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

  const handleLoad = async () => {
    setStatus('Loading Interstitial ad...');
    const loadedAd = await loadInterstitialAd(INTERSTITIAL_AD_UNIT_ID);
    if (loadedAd) {
      registerAdEvents(loadedAd);
      const onDismiss =
        loadedAd.adEventCallback?.onAdDismissedFullScreenContent;
      loadedAd.adEventCallback = {
        ...loadedAd.adEventCallback,
        onAdDismissedFullScreenContent: () => {
          onDismiss?.();
          setStatus('Ad dismissed.');
        },
      };
      setAd((prevAd) => {
        prevAd?.destroy();
        return loadedAd;
      });
      setIsLoaded(true);
      setStatus('Interstitial ad loaded!');
    } else {
      setStatus('Failed to load Interstitial ad.');
    }
  };

  const handleShow = () => {
    if (ad) {
      showInterstitialAd(ad);
      setIsLoaded(false);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Interstitial Ad</Text>
      <Text style={styles.status}>Status: {status}</Text>
      <View style={styles.buttonGroup}>
        <Button title="Load Ad" onPress={handleLoad} />
        <View style={styles.spacerSmall} />
        <Button title="Show Ad" onPress={handleShow} disabled={!isLoaded} />
      </View>
    </View>
  );
}

পরবর্তী ধাপ

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