ตั้งค่าโฆษณาคั่นระหว่างหน้า

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

เพื่อลดเวลาในการตอบสนองของการนำเสนอและตรวจสอบว่ามีโฆษณาพร้อมใช้งานเมื่อเกิดการเปลี่ยนผ่าน Google Mobile Ads SDK for React Native จะใช้การโหลดโฆษณาล่วงหน้าเพื่อจัดการการโหลดในเบื้องหลัง การแคช และการเติมบัฟเฟอร์

คู่มือนี้แสดงวิธีผสานรวมโฆษณาคั่นระหว่างหน้าลงในแอป React Native

ข้อกำหนดเบื้องต้น

โปรดทำสิ่งต่อไปนี้ก่อนดำเนินการต่อ

Android 

ca-app-pub-3940256099942544/1033173712

iOS 

ca-app-pub-3940256099942544/4411468910

ทำความเข้าใจการโหลดโฆษณาล่วงหน้า

การโหลดโฆษณาล่วงหน้าใน Google Mobile Ads SDK for React Native จะโหลดและแคชโฆษณาโดยอัตโนมัติ

การโหลดโฆษณาล่วงหน้ามีประโยชน์ดังนี้

  • การจัดการข้อมูลอ้างอิง: เก็บข้อมูลอ้างอิงไว้จนกว่าโฆษณาจะแสดง
  • การโหลดซ้ำอัตโนมัติ: โหลดโฆษณาใหม่เมื่อดึงโฆษณาจากแคช
  • การลองใหม่ที่มีการจัดการ: โหลดโฆษณาใหม่เมื่อโหลดโฆษณาไม่สำเร็จ
  • การจัดการการหมดอายุ: รีเฟรชโฆษณาก่อนหมดอายุ
  • การเพิ่มประสิทธิภาพแคช: เพิ่มประสิทธิภาพลำดับแคชเพื่อแสดงโฆษณาที่มีลำดับความสำคัญสูงสุด

หากต้องการโหลดโฆษณาด้วยตนเอง โปรดดูคู่มือโหลดโฆษณาคั่นระหว่างหน้าเดียว

เริ่มโหลดล่วงหน้า

หากต้องการเริ่มโหลดโฆษณาล่วงหน้า ให้เรียกใช้เมธอด InterstitialAdPreloader.start แล้วส่งค่า preloadId, การตั้งค่า และ Callback เหตุการณ์เพื่อตรวจสอบการเปลี่ยนแปลงสถานะบัฟเฟอร์ ดังนี้

export function startPreloader(
  adUnitId: string,
  preloadId: string,
  customPreloadCallback?: PreloadCallback,
): boolean {
  try {
    const started = InterstitialAdPreloader.start(
      preloadId,
      {
        request: {adUnitId},
        bufferSize: 2,
      },
      {
        // Called when an ad is preloaded into the buffer.
        onAdPreloaded: (metadata) => {
          console.log(`Interstitial ad preloaded for ${metadata.preloadId}`);
          customPreloadCallback?.onAdPreloaded?.(metadata);
        },
        // Called when an ad fails to preload.
        onAdFailedToPreload: (error: LoadAdError) => {
          console.error('Failed to preload interstitial ad:', error.message);
          customPreloadCallback?.onAdFailedToPreload?.(error);
        },
        // Called when all preloaded ads in the buffer have been shown.
        onAdsExhausted: () => {
          console.log('Preload buffer exhausted for interstitial ads.');
          customPreloadCallback?.onAdsExhausted?.();
        },
      },
    );
    return started;
  } catch (error) {
    console.error('Error starting interstitial ad preloader:', error);
    return false;
  }
}

รหัสการโหลดล่วงหน้าคือสตริงที่ระบุการกำหนดค่าการโหลดโฆษณาล่วงหน้าโดยไม่ซ้ำกัน หากคุณใช้รหัสหน่วยโฆษณาสำหรับการกำหนดค่าการโหลดล่วงหน้าแบบเดี่ยวในแอป ให้ใช้รหัสหน่วยโฆษณานั้นเป็นรหัสการโหลดล่วงหน้า หากแอปของคุณต้องใช้ตัวโหลดล่วงหน้าหลายตัวสำหรับรหัสหน่วยโฆษณาเดียวกัน ให้ส่งสตริงที่แตกต่างกันสำหรับรหัสการโหลดล่วงหน้าแต่ละรหัส

เมื่อแอปของคุณดึงโฆษณาที่โหลดไว้ล่วงหน้าจากบัฟเฟอร์ Google Mobile Ads SDK for React Native จะขอโฆษณาทดแทนในเบื้องหลังเพื่อเติมบัฟเฟอร์อีกครั้ง หากไม่มีโฆษณาที่โหลดไว้ล่วงหน้าเหลืออยู่ในบัฟเฟอร์ Google Mobile Ads SDK for React Native จะเรียกใช้ Callback onAdsExhausted

ขีดจำกัดแคชที่โหลดล่วงหน้า

Google Mobile Ads SDK for React Native บังคับใช้ขีดจำกัดทั่วทั้งแอปสำหรับจำนวนโฆษณาที่โหลดล่วงหน้าทั้งหมดในหน่วยโฆษณาและรหัสการโหลดล่วงหน้าทั้งหมด ดังนี้

  • ขีดจำกัดเริ่มต้น: Google จะเก็บโฆษณาที่โหลดไว้ล่วงหน้าไว้ในหน่วยความจำได้สูงสุด 6 รายการ ขีดจำกัดนี้จะใช้ร่วมกันในทุกรูปแบบและรหัสการโหลดล่วงหน้า
  • บัฟเฟอร์ที่แนะนำ: โฆษณาที่โหลดล่วงหน้า 2 รายการสำหรับรหัสการโหลดล่วงหน้าแต่ละรหัส

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

สำรวจและแสดงโฆษณา

ก่อนแสดงโฆษณา ให้ยืนยันว่ามีโฆษณาพร้อมแสดงโดยเรียกใช้เมธอด InterstitialAdPreloader.isAdAvailable หากต้องการดึงข้อมูลโฆษณา ให้เรียกใช้เมธอด InterstitialAdPreloader.pollAd

หากต้องการฟังเหตุการณ์การนำเสนอ เช่น การปิดโฆษณาหรือการแสดงผลไม่สำเร็จ ให้ตั้งค่าพร็อพเพอร์ตี้ adEventCallback ในอินสแตนซ์โฆษณาก่อนเรียกใช้เมธอด show

ตัวอย่างต่อไปนี้จะตรวจสอบความพร้อมใช้งานของโฆษณา และฟังเหตุการณ์การนำเสนอแบบเต็มหน้าจอก่อนแสดงโฆษณา

export function showPreloadedAd(
  preloadId: string,
  customAdEventCallback?: FullScreenAdEventCallback,
) {
  if (InterstitialAdPreloader.isAdAvailable(preloadId)) {
    const ad = InterstitialAdPreloader.pollAd(preloadId);
    if (ad) {
      ad.adEventCallback = {
        // Called when the ad is presented on screen.
        onAdShowedFullScreenContent: () => {
          console.log('Preloaded interstitial ad showed full screen content.');
          customAdEventCallback?.onAdShowedFullScreenContent?.();
        },
        // Called when the ad is closed by the user.
        onAdDismissedFullScreenContent: () => {
          console.log('Preloaded interstitial ad dismissed.');
          customAdEventCallback?.onAdDismissedFullScreenContent?.();
          ad.destroy();
        },
        // Called when presentation fails.
        onAdFailedToShowFullScreenContent: (error) => {
          console.error('Preloaded interstitial ad failed to show:', error);
          customAdEventCallback?.onAdFailedToShowFullScreenContent?.(error);
          ad.destroy();
        },
        // Called when an impression is recorded.
        onAdImpression: () => {
          console.log('Preloaded interstitial ad recorded an impression.');
          customAdEventCallback?.onAdImpression?.();
        },
        // Called when the user taps the ad.
        onAdClicked: () => {
          console.log('Preloaded interstitial ad was clicked.');
          customAdEventCallback?.onAdClicked?.();
        },
        // Called when the ad is estimated to have earned money.
        onAdPaid: (adValue) => {
          console.log(
            `Preloaded interstitial ad paid: ${adValue.amountMicros}` +
              ` ${adValue.currencyCode}`,
          );
          customAdEventCallback?.onAdPaid?.(adValue);
        },
      };
      ad.show();
    }
  } else {
    console.log('No preloaded interstitial ad available in buffer.');
  }
}

หากต้องการปล่อยหน่วยความจำและทรัพยากร ให้เรียกใช้เมธอด ad.destroy ใน Callback onAdDismissedFullScreenContent และ onAdFailedToShowFullScreenContent

อ่านข้อมูลการตอบกลับ

หากต้องการตรวจสอบข้อมูลการตอบกลับของโฆษณาที่โหลดไว้ล่วงหน้าถัดไปโดยไม่ต้องนำโฆษณาออกจากแคช ให้เรียกใช้เมธอด InterstitialAdPreloader.peekAdResponseInfo ดังนี้

export function peekPreloadedAdResponseInfo(preloadId: string) {
  if (InterstitialAdPreloader.isAdAvailable(preloadId)) {
    const responseInfo = InterstitialAdPreloader.peekAdResponseInfo(preloadId);
    if (responseInfo) {
      console.log('Next preloaded ad response info:', responseInfo);
    }
  }
}

หากมีโฆษณาพร้อมใช้งาน เมธอด peekAdResponseInfo จะแสดงผลออบเจ็กต์ ResponseInfo ที่มีข้อมูลเกี่ยวกับแหล่งที่มาของโฆษณาที่โหลดและอะแดปเตอร์เครือข่าย

ล้างทรัพยากร

หากไม่จำเป็นต้องแสดงโฆษณาสำหรับรหัสการโหลดล่วงหน้าที่เฉพาะเจาะจงในช่วงที่เหลือของเซสชันอีกต่อไป ให้เรียกใช้เมธอด InterstitialAdPreloader.destroy กระบวนการนี้จะหยุดการโหลดล่วงหน้าสำหรับรหัสการโหลดล่วงหน้านั้น และนำโฆษณาที่โหลดล่วงหน้าที่ไม่ได้ใช้ออกจากหน่วยความจำ

ตัวอย่างต่อไปนี้จะหยุดการโหลดล่วงหน้า

export function destroyPreloader(preloadId: string) {
  InterstitialAdPreloader.destroy(preloadId);
}

หลังจากที่ผู้ใช้ปิดโฆษณาหรือโฆษณาไม่แสดง ให้ทำลายอินสแตนซ์โฆษณาที่สำรวจแต่ละรายการ ดูรายละเอียดได้ที่โพลและแสดงโฆษณา

ดูตัวอย่างแบบเต็ม

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

export function InterstitialScreen() {
  const [numAdsAvailable, setNumAdsAvailable] = useState<number>(0);
  const [status, setStatus] = useState<string>('Initializing Preloader...');

  const refreshAdCount = () => {
    const count = InterstitialAdPreloader.getNumAdsAvailable(PRELOAD_ID);
    setNumAdsAvailable(count);
  };

  useEffect(() => {
    // Start preloading interstitial ads on component mount
    startPreloader(INTERSTITIAL_AD_UNIT_ID, PRELOAD_ID, {
      onAdPreloaded: () => {
        refreshAdCount();
        setStatus('Ad preloaded and ready!');
      },
      onAdFailedToPreload: (error) => {
        setStatus(`Preload failed: ${error.message}`);
      },
      onAdsExhausted: () => {
        refreshAdCount();
        setStatus('Preload buffer exhausted.');
      },
    });
    setStatus('Preloader started.');

    // Clean up preloader resources on component unmount
    return () => {
      destroyPreloader(PRELOAD_ID);
    };
  }, []);

  const handleShow = () => {
    showPreloadedAd(PRELOAD_ID, {
      onAdDismissedFullScreenContent: () => {
        setStatus('Ad dismissed.');
      },
      onAdFailedToShowFullScreenContent: (error) => {
        setStatus(`Failed to show ad: ${error.message}`);
      },
    });
    setStatus('Showing preloaded ad...');
    refreshAdCount();
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Preload Interstitial Ads</Text>
      <Text style={styles.status}>Status: {status}</Text>
      <Text style={styles.status}>Ads Available: {numAdsAvailable}</Text>
      <View style={styles.buttonGroup}>
        <Button
          title="Show Preloaded Ad"
          onPress={handleShow}
          disabled={numAdsAvailable === 0}
        />
      </View>
    </View>
  );
}

แทนที่ค่าต่อไปนี้

  • INTERSTITIAL_AD_UNIT_ID ด้วยรหัสหน่วยโฆษณา
  • PRELOAD_ID ด้วยรหัส Preloader

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

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