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

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

این راهنما به شما نشان می‌دهد که چگونه آگهی‌های پاداشی را در برنامه React Native ادغام کنید.

پیش‌نیازها

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

Android 

ca-app-pub-3940256099942544/5224354917

iOS 

ca-app-pub-3940256099942544/1712485313

بار کردن آگهی

برای بار کردن آگهی پاداشی، روش load را در کلاس RewardedAd فراخوانی کنید.

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

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

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

قبل‌از نمایش آگهی، شنونده adEventCallback را در نمونه RewardedAd بارشده تنظیم کنید. این شنونده فراخوان‌های برگشتی را برای رویدادهای چرخه حیات آگهی دریافت می‌کند، مانند نمایش آگهی روی صفحه یا ضربه زدن کاربر روی آگهی. برای تماس‌های برگشتی دردسترس، 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>
  );
}

مراحل بعدی

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