ตั้งค่าโฆษณาคั่นระหว่างหน้าที่มีการให้รางวัล

โฆษณาคั่นระหว่างหน้าที่มีการให้รางวัลเป็นรูปแบบโฆษณาแบบเต็มหน้าจอที่ให้คุณเสนอไอเทมที่ซื้อในแอปสำหรับโฆษณาที่ปรากฏระหว่างหน้าจอหรือระดับเกม ผู้ใช้ไม่จําเป็นต้องเลือกดูโฆษณา ซึ่งต่างจากโฆษณาที่มีการให้รางวัล ดูรายละเอียดได้ที่กรณีศึกษาของ AdMob และภาพรวมของหน่วยโฆษณาคั่นระหว่างหน้าที่มีการให้รางวัล (เบต้า)

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

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

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

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

Android 

ca-app-pub-3940256099942544/5354046379

iOS 

ca-app-pub-3940256099942544/6978759866

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

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

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

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

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

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

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

export function startRewardedInterstitialAdPreloader(
  adUnitId: string,
  preloadId: string,
  customPreloadCallback?: PreloadCallback,
): boolean {
  const started = RewardedInterstitialAdPreloader.start(
    preloadId,
    {
      request: {adUnitId},
      bufferSize: 2,
    },
    {
      // Called when an ad is preloaded into the buffer.
      onAdPreloaded: (event) => {
        console.log(
          `Rewarded interstitial ad preloaded for ${event.preloadId}`,
        );
        customPreloadCallback?.onAdPreloaded?.(event);
      },
      // Called when an ad fails to preload.
      onAdFailedToPreload: (error: LoadAdError) => {
        console.error(
          'Failed to preload rewarded interstitial ad:',
          error.message,
        );
        customPreloadCallback?.onAdFailedToPreload?.(error);
      },
      // Called when all preloaded ads in the buffer have been shown.
      onAdsExhausted: () => {
        console.log('Rewarded interstitial ad buffer exhausted.');
        customPreloadCallback?.onAdsExhausted?.();
      },
    },
  );
  return started;
}

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

เมื่อแอปของคุณดึงโฆษณาที่โหลดไว้ล่วงหน้าจากบัฟเฟอร์ 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 รายการสำหรับรหัสการโหลดล่วงหน้าแต่ละรหัส

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

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

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

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

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

export function showPreloadedRewardedInterstitialAd(
  preloadId: string,
  onRewardEarned: (reward: Reward) => void,
  customAdEventCallback?: FullScreenAdEventCallback,
) {
  if (!RewardedInterstitialAdPreloader.isAdAvailable(preloadId)) {
    console.log('No preloaded rewarded interstitial ad available right now.');
    return;
  }

  const ad = RewardedInterstitialAdPreloader.pollAd(preloadId);
  if (!ad) {
    return;
  }

  ad.adEventCallback = {
    // Called when the ad is presented on screen.
    onAdShowedFullScreenContent: () => {
      console.log(
        'Preloaded rewarded interstitial ad showed full screen content.',
      );
      customAdEventCallback?.onAdShowedFullScreenContent?.();
    },
    // Called when the ad is closed by the user.
    onAdDismissedFullScreenContent: () => {
      console.log(
        'Preloaded rewarded interstitial ad dismissed full screen content.',
      );
      customAdEventCallback?.onAdDismissedFullScreenContent?.();
      ad.destroy();
    },
    // Called when presentation fails.
    onAdFailedToShowFullScreenContent: (error) => {
      console.error(
        'Failed to show preloaded rewarded interstitial ad:',
        error,
      );
      customAdEventCallback?.onAdFailedToShowFullScreenContent?.(error);
      ad.destroy();
    },
    // Called when an impression is recorded.
    onAdImpression: () => {
      console.log('Preloaded rewarded interstitial ad recorded an impression.');
      customAdEventCallback?.onAdImpression?.();
    },
    // Called when the user taps the ad.
    onAdClicked: () => {
      console.log('Preloaded rewarded interstitial ad was clicked.');
      customAdEventCallback?.onAdClicked?.();
    },
    // Called when the ad is estimated to have earned money.
    onAdPaid: (adValue) => {
      console.log(
        `Preloaded rewarded interstitial ad paid: ${adValue.amountMicros}` +
          ` ${adValue.currencyCode}`,
      );
      customAdEventCallback?.onAdPaid?.(adValue);
    },
  };

  ad.show(onRewardEarned);
}

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

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

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

export function peekRewardedInterstitialAdResponseInfo(
  preloadId: string,
): ResponseInfo | null {
  const responseInfo =
    RewardedInterstitialAdPreloader.peekAdResponseInfo(preloadId);
  if (responseInfo) {
    console.log(
      'Next preloaded rewarded interstitial ad response info:',
      responseInfo,
    );
  }
  return responseInfo;
}

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

ไม่บังคับ: ตรวจสอบ SSV Callback

หากแอปต้องการพารามิเตอร์การยืนยันที่กำหนดเอง เช่น รหัสผู้ใช้หรือข้อมูลเมตาของรางวัลที่กำหนดเองใน Callback การยืนยันฝั่งเซิร์ฟเวอร์ (SSV) ให้ตั้งค่าพร็อพเพอร์ตี้ serverSideVerificationOptions ในอินสแตนซ์โฆษณาที่สำรวจก่อนเรียกใช้เมธอด show

ระบบจะส่งค่าที่คุณตั้งไว้ไปยังพารามิเตอร์การค้นหา SSV Callback ดังนี้

  • userId: ส่งไปยังพารามิเตอร์การค้นหา user_id เพื่อระบุผู้ใช้
  • customData: ส่งไปยังพารามิเตอร์การค้นหา custom_data เพื่อส่งต่อข้อมูลเมตาที่กำหนดเอง

ตัวอย่างต่อไปนี้จะตั้งค่า ServerSideVerificationOptions (customData และ userId) ในออบเจ็กต์โฆษณาคั่นระหว่างหน้าที่มีการให้รางวัลก่อนแสดงโฆษณา

export function setServerSideVerificationRewardedInterstitial(
  ad: RewardedInterstitialAd,
) {
  ad.serverSideVerificationOptions = {
    userId: 'user_123',
    customData: 'sample_custom_data',
  };
}

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

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

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

export function destroyRewardedInterstitialAdPreloader(preloadId: string) {
  RewardedInterstitialAdPreloader.destroy(preloadId);
}

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

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

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

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

export function RewardedInterstitialScreen() {
  const [numAdsAvailable, setNumAdsAvailable] = useState<number>(0);
  const [status, setStatus] = useState<string>('Preloader idle.');
  const [reward, setReward] = useState<string | null>(null);

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

  useEffect(() => {
    // Start preloading ads on component mount
    const started = startRewardedInterstitialAdPreloader(
      REWARDED_INTERSTITIAL_AD_UNIT_ID,
      PRELOAD_ID,
      {
        onAdPreloaded: () => {
          refreshAdCount();
          setStatus('Rewarded interstitial ad preloaded into buffer.');
        },
        onAdFailedToPreload: (error) => {
          setStatus(
            `Failed to preload rewarded interstitial ad: ${error.message}`,
          );
        },
        onAdsExhausted: () => {
          refreshAdCount();
          setStatus('Preload buffer exhausted for rewarded interstitial ads.');
        },
      },
    );
    if (started) {
      setStatus('Preloader started.');
    }

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

  const handleShowAd = () => {
    setReward(null);
    setStatus('Showing preloaded ad...');
    showPreloadedRewardedInterstitialAd(
      PRELOAD_ID,
      (userReward) => {
        setReward(`${userReward.amount} ${userReward.type}`);
      },
      {
        onAdDismissedFullScreenContent: () => {
          setStatus('Ad dismissed.');
        },
        onAdFailedToShowFullScreenContent: (error) => {
          setStatus(`Failed to show preloaded ad: ${error.message}`);
        },
      },
    );
    refreshAdCount();
  };

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

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

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