تحميل إعلان بيني واحد

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

يوضّح لك هذا الدليل كيفية دمج "الإعلانات البينية" في تطبيق React Native.

المتطلبات الأساسية

Android 

ca-app-pub-3940256099942544/1033173712

iOS 

ca-app-pub-3940256099942544/4411468910

تحميل إعلان

لتحميل إعلان بيني، استخدِم طريقة load في فئة InterstitialAd.

يحمّل المثال التالي إعلانًا بينيًا في حال نجاح العملية ويسجّل خطأً في حال فشلها:

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

الاستماع إلى أحداث الإعلانات

قبل عرض الإعلان، اضبط أداة الاستماع adEventCallback على مثيل InterstitialAd الذي تم تحميله. يتلقّى هذا المستمع عمليات استدعاء لأحداث يتم في مراحل نشاط الإعلان، مثل ظهور الإعلان على الشاشة أو نقر المستخدم على الإعلان. للاطّلاع على عمليات الاستدعاء المتاحة، يُرجى مراجعة 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 عندما يغلق المستخدم الإعلان أو عندما يتعذّر عرض الإعلان. تؤدي هذه العملية إلى تحرير الموارد التي استخدمها الإعلان.

عرض الإعلان

لعرض إعلان بيني، استخدِم طريقة show في مثيل InterstitialAd الذي تم تحميله.

يعرض المثال التالي "إعلانًا بينيًا":

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

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

بعد دمج "الإعلانات البينية"، اطّلِع على المواضيع التالية: