โหลดโฆษณาคั่นระหว่างหน้า 1 รายการ

โฆษณาคั่นระหว่างหน้าคือโฆษณาแบบเต็มหน้าจอที่ปรากฏที่จุดเปลี่ยนหน้าในแอป เช่น ระหว่างหน้าจอหรือในช่วงหยุดชั่วคราวระหว่างเปลี่ยนด่านในเกม ผู้ใช้สามารถแตะโฆษณาเพื่อไปยังปลายทาง หรือปิดโฆษณาและกลับไปที่แอปได้ ดูรายละเอียดได้ที่หลักเกณฑ์เกี่ยวกับโฆษณาคั่นระหว่างหน้าและกรณีศึกษา

คู่มือนี้แสดงวิธีผสานรวมโฆษณาคั่นระหว่างหน้าลงในแอป 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;
  }
}

รอเหตุการณ์โฆษณา

ก่อนแสดงโฆษณา ให้ตั้งค่า Listener adEventCallback ในอินสแตนซ์ InterstitialAd ที่โหลดแล้ว Listener นี้จะรับ Callback สำหรับเหตุการณ์ในวงจรของโฆษณา เช่น โฆษณาที่แสดงบนหน้าจอหรือผู้ใช้แตะโฆษณา ดู Callback ที่ใช้ได้ที่ AdEventCallback

ตัวอย่างต่อไปนี้ตั้งค่า Callback เพื่อรอเหตุการณ์โฆษณา

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

ขั้นตอนถัดไป

หลังจากผสานรวมโฆษณาคั่นระหว่างหน้าแล้ว ให้สำรวจหัวข้อต่อไปนี้