একটি পুরস্কার প্রদানকারী বিজ্ঞাপন লোড করা

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

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

পূর্বশর্ত

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

Android 

ca-app-pub-3940256099942544/5224354917

iOS 

ca-app-pub-3940256099942544/1712485313

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

পুরস্কার প্রদানকারী বিজ্ঞাপন লোড করতে, RewardedAd ক্লাসে load মেথড কল করুন।

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

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

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

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

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

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

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

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

পুরস্কার প্রদানকারী বিজ্ঞাপন দেখাতে, ব্যবহারকারীর জেতা পুরস্কার ম্যানেজ করার জন্য কলব্যাক সহ show পদ্ধতি কল করুন:

export function showRewardedAd(
  ad: RewardedAd,
  onRewardEarned: (reward: Reward) => void,
) {
  ad.show(onRewardEarned);
}

ঐচ্ছিক: সার্ভার-সাইড যাচাইকরণ কলব্যাক যাচাই করুন

আপনার অ্যাপের জন্য যদি কাস্টম যাচাইকরণ প্যারামিটার, যেমন ব্যবহারকারীর আইডি বা কাস্টম পুরস্কার মেটাডেটা, সার্ভার-সাইড যাচাইকরণ (SSV) কলব্যাকে প্রয়োজন হয়, তাহলে বিজ্ঞাপন দেখানোর আগে লোড করা বিজ্ঞাপন ইনস্ট্যান্সে serverSideVerificationOptions প্রপার্টি সেট করুন।

আপনার সেট করা ভ্যালু SSV কলব্যাক কোয়েরি প্যারামিটারে পাস করা হয়:

  • userId: ব্যবহারকারীকে শনাক্ত করতে user_id কোয়েরি প্যারামিটারে পাস করে।
  • customData: কাস্টম মেটাডেটা ফরওয়ার্ড করার জন্য custom_data কোয়েরি প্যারামিটারে পাস করে।

নিম্নলিখিত উদাহরণটি বিজ্ঞাপন দেখানোর আগে পুরস্কার প্রদানকারী বিজ্ঞাপন অবজেক্টে ServerSideVerificationOptions (customData এবং userId) সেট করে:

export function setServerSideVerificationRewarded(ad: RewardedAd) {
  ad.serverSideVerificationOptions = {
    userId: 'user_123',
    customData: 'sample_custom_data',
  };
}

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

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

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

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

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

  const handleLoad = async () => {
    setReward(null);
    setStatus('Loading Rewarded ad...');
    const loadedAd = await loadRewardedAd(REWARDED_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('Rewarded ad loaded!');
    } else {
      setStatus('Failed to load Rewarded ad.');
    }
  };

  const handleShow = () => {
    if (ad) {
      showRewardedAd(ad, (userReward) => {
        setReward(`${userReward.amount} ${userReward.type}`);
      });
      setIsLoaded(false);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Rewarded Ad (Single Load)</Text>
      <Text style={styles.status}>Status: {status}</Text>
      {reward && <Text style={styles.rewardText}>Earned: {reward}</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>
  );
}

পরবর্তী ধাপ

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