تحميل إعلان بيني واحد مقابل مكافأة

تتيح لك "الإعلانات البينية مقابل مكافأة" تقديم منتجات داخل التطبيق مقابل الإعلانات التي تظهر بين الشاشات أو مستويات اللعبة. وعلى عكس "الإعلانات مقابل مكافأة"، لا يحتاج المستخدمون إلى الموافقة لعرض الإعلان. لمزيد من التفاصيل، يُرجى الاطّلاع على نظرة عامة على وحدات "الإعلانات البينية مقابل مكافأة".

يشرح هذا الدليل كيفية دمج "الإعلانات البينية مقابل مكافأة" في تطبيق 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>
  );
}

الخطوات التالية

بعد دمج "الإعلانات البينية مقابل مكافأة"، استكشِف المواضيع التالية: