بار کردن یک آگهی بینابینی

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

این راهنما به شما نشان می‌دهد که چگونه آگهی‌های بینابینی را در برنامه 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>
  );
}

مراحل بعدی

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