بار کردن یک آگهی بینابینی پاداش‌دار

آگهی‌های بینابینی پاداش‌دار به شما امکان می‌دهد در ازای آگهی‌هایی که بین صفحه‌ها یا سطوح بازی ظاهر می‌شوند، موارد درون‌برنامه ارائه دهید. برخلاف آگهی‌های پاداش‌دار، کاربران شما برای مشاهده آگهی نیازی به موافقت کردن ندارند. برای جزئیات، نمای کلی واحدهای آگهی تمام‌صفحه پاداش‌دار را ببینید.

این راهنما نحوه ادغام آگهی‌های بینابینی پاداش‌دار را در برنامه React Native توضیح می‌دهد.

پیش‌نیازها

پیش‌از ادامه دادن، کارهای زیر را انجام دهید:

Android 

ca-app-pub-3940256099942544/5354046379

iOS 

ca-app-pub-3940256099942544/6978759866

بار کردن آگهی

برای بار کردن آگهی تمام‌صفحه پاداش‌دار، روش load را در کلاس RewardedInterstitialAd فراخوانی کنید.

نمونه زیر یک آگهی تمام‌صفحه پاداش‌دار را درصورت موفقیت بار می‌کند و درصورت شکست، یک خطا را ثبت می‌کند:

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

گوش دادن به رویدادهای آگهی

قبل‌از نمایش آگهی، شنونده adEventCallback را در نمونه RewardedInterstitialAd بارشده تنظیم کنید. این شنونده برای رویدادهای چرخه حیات آگهی، مانند نمایش آگهی روی صفحه یا ضربه زدن کاربر روی آگهی، فراخوان‌های برگشتی دریافت می‌کند. برای تماس‌های برگشتی دردسترس، AdEventCallback را ببینید.

مثال زیر فراخوان‌های برگشتی را برای گوش دادن به رویدادهای آگهی تنظیم می‌کند:

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

این مثال همچنین روش destroy را زمانی که کاربر آگهی را می‌بندد یا زمانی که آگهی نمایش داده نمی‌شود فراخوانی می‌کند. این فرایند منابعی را که آگهی استفاده کرده است آزاد می‌کند.

نمایش آگهی

برای نمایش آگهی بینابینی پاداش‌دار، show را در نمونه بارشده RewardedInterstitialAd فراخوانی کنید و یک فراخوان برگشتی را برای دریافت Reward ارسال کنید:

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

اختیاری: اعتبارسنجی تماس‌های برگشتی درستی‌سنجی سمت سرور

اگر برنامه‌تان به پارامترهای درستی‌سنجی سفارشی، مثل شناسه کاربر یا فراداده پاداش سفارشی، در بازخوانی‌های درستی‌سنجی سمت سرور (SSV) نیاز دارد، ویژگی serverSideVerificationOptions را قبل‌از نمایش آگهی در نمونه آگهی بارشده تنظیم کنید.

مقادیری که تنظیم می‌کنید به پارامترهای پُرسمان بازخوانی SSV ارسال می‌شوند:

  • userId: به پارامتر پُرسمان user_id منتقل می‌شود تا کاربر را شناسایی کند.
  • customData: به پارامتر پُرسمان custom_data منتقل می‌شود تا فراداده سفارشی را بازارسال کند.

مثال زیر ServerSideVerificationOptions (customData و userId) را در شیء آگهی تمام‌صفحه پاداش‌دار پیش‌از نمایش آگهی تنظیم می‌کند:

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

مشاهده مثال کامل

این بخش نمونه کامل ادغام آگهی تمام‌صفحه پاداش‌دار در برنامه React Native را پوشش می‌دهد.

مثال زیر آگهی را در مؤلفه React Native ادغام می‌کند، نمونه آگهی را در حالت مدیریت می‌کند، و کنترل‌هایی برای بار کردن و نمایش آگهی ارائه می‌دهد:

export function RewardedInterstitialSingleLoadScreen() {
  const [ad, setAd] = useState<RewardedInterstitialAd | 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 Interstitial ad...');
    const loadedAd = await loadRewardedInterstitialAd(
      REWARDED_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('Rewarded Interstitial ad loaded!');
    } else {
      setStatus('Failed to load Rewarded Interstitial ad.');
    }
  };

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

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Rewarded Interstitial Ad</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>
  );
}

مراحل بعدی

پس‌از ادغام آگهی‌های تمام‌صفحه پاداش‌دار، موضوعات زیر را کاوش کنید: